@extends('plantilla')
@section('header')
    <style>
        .flotante {
            display: scroll;
            position: fixed;
            bottom: 520px;
            right: 0px;
        }
    </style>
@endsection

@section('breadcrumbs')
    <div class="breadcrumbs" style="display:none">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-4">
                    <h1>Cotizador</h1>
                </div>
                <div class="col-md-8 col-sm-8">
                    <ol class="breadcrumb pull-right">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Cotizador</a></li>
                        <li class="active">Compara</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('container')
    <div class="container">
        <div class="row">
            <div class="text-center feature-head">
                <div class="col-md-12">
                    <h1>{{$cotizacion->marca}}  {{$cotizacion->modelo}} {{$cotizacion->descripcion}} </h1>
                </div>
            </div>
        </div>
        <div class="alert alert-danger" {{(date('Y')-$cotizacion->modelo<15?'style=display:none':'style=display:block')}}>
            <strong>Atenci&oacute;n!</strong> Por el a&ntilde;o del veh&iacute;culo solo se puede cotizar los planes RC y Limitada. </div>
        <div class="row">
            <div class="text-left feature-head">
                <div class="col-md-6">
                    <p>Cotizaci&oacute;n <strong>#{{$cotizacion->id}}</strong>&nbsp;&nbsp;&nbsp;Email:
                        <strong>{{$cotizacion->email}}</strong></p>
                    @if(!empty($time))
                        <small>Tiempo de cotización: {{ $time }} segundos</small>
                    @endif
                </div>
                <div class="col-md-6">
                    <p>CP: <strong>{{$cotizacion->codigo_postal}}</strong>&nbsp;&nbsp;&nbsp;Fecha:
                        <strong>{{ $cotizacion->created_at}}</strong></p><br/>
                </div>
            </div>
        </div>
        <div class="row">
            <form role="form" action="#" id="formCotiza" method="get">
                <div class="panel-body">
                    <section class="panel">
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="forma_pago_id">Formas de Pago</label>
                                <select name="forma_pago_id" id="forma_pago_id" class="form-control"
                                        onchange="cambiaValores();">
                                    <optgroup label="Forma de Pago">
                                        @foreach($formas_pago as $forma_pagoCur)
                                            <option value="{{$forma_pagoCur->id}}"{{($cotizacion->forma_pago_id==$forma_pagoCur->id)?' selected':''}}>{{$forma_pagoCur->nombre}}</option>
                                        @endforeach
                                    </optgroup>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="exampleInputPassword1">Paquete</label>
                                <select name="paquete_id" id="paquete_id" class="col-md-12 form-control"
                                        onchange="cambiaValores();cambiaPaquete();">
                                    <optgroup label="Paquete">
                                        @foreach($paquetes as $paqueteCur)
                                            <option value="{{$paqueteCur->id}}"{{(($cotizacion->paquete_id)==$paqueteCur->id)?'  selected':''}}>{{$paqueteCur->nombre}}</option>
                                        @endforeach
                                    </optgroup>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group" id="divDeducibles">
                                <label for="exampleInputPassword1">Deducibles</label>
                                <select name="deducibles" id="deducibles" class="col-md-12 form-control"
                                        onchange="cambiaValores();">
                                    <optgroup label="Deducibles">
                                                                            </optgroup>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="btn1">&nbsp;</label>
                                <button class="btn btn-default form-control" type="submit" data-toggle="modal"
                                        data-target="#loading" ng-click="procesoCompara({{$cotizacion->id}})">
                                    <i class="icon-refresh "></i>&nbsp;&nbsp;Recotizar
                                </button>
                            </div>
                            <div class="modal fade" tabindex="-1" role="dialog" id="loading">
                                <div class="modal-dialog modal-loading" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            Cotizando Vehículo...
                                        </div>
                                        <div class="modal-body">
                                            <div class="col-md-12 text-center">
                                                <img src="/img/loading.gif" height="160"/>
                                            </div>
                                        </div>
                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal-dialog -->
                            </div><!-- /.modal -->
                        </div>
                        <div class="col-md-2">
                            <div class="form-group" id="divImprime">
                                <label for="btn2">&nbsp;</label>
                                <a class="btn btn-warning form-control" href="/imprimecotizacion/{{$cotizacion->id}}"
                                   target="_blank"><i class="icon-print"></i>&nbsp;&nbsp;Imprime </a>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group" id="divEnviar">
                                <label for="btn3">&nbsp;</label>
                                <a href="#" ng-click="enviarEmailCotizacion()" class="btn btn-success form-control"><i
                                            class="icon-envelope"></i>&nbsp;&nbsp;Enviar
                                </a>
                            </div>
                        </div>
                    </section>
                </div>
            </form>
        </div>
        <div class="row text-center" id="divCotizacion">
            <button class="btn btn-info btn-lg flotante" id="btnDetalle" type="button" onClick="verDetalle();"><i
                        class="icon-eye-open"></i> Ver Detalle
            </button>
            <!--price start-->
                        <div class="text-center" style="align-content: center">
                @foreach($cotizaciones as $cotizacionCur)
                    @if( $cotizacionCur["cotizacion"]->prima_total != 0)
                        <div class="col-md-20"
                             style="display: {{(($cotizacion->paquete_id=="4")&&$ind>3)?'none':'block'}};">
                            <div class="pricing-table">
                                <div class="pricing-head">
                                    <div class="text-center">
                                        <img src="https://s3-us-west-2.amazonaws.com/autos-dev/logos/{{$cotizacionCur["aseguradora"]->logo}}"
                                             width="80" height="80">
                                    </div>

                                    @if($cotizacionCur['cotizacion']->prima_total != 0)
                                        @if ($cotizacionCur['cotizacion']->aseguradora_id == 1)
                                        <div class="text-center" style="display:none;border-top: solid thin #41cac0; background-color: #41cac0">
                                            <p style="color: #ffffff; font-weight: bold">Descuento  28%</p>
                                        </div>
                                        @endif
                                            @if ($cotizacionCur['cotizacion']->aseguradora_id == 2)
                                            <div class="text-center" style="display:none;border-top: solid thin #41cac0; background-color: #41cac0">
                                                <p style="color: #ffffff; font-weight: bold">Descuento  35%</p>
                                            </div>
                                            @endif
                                            @if ($cotizacionCur['cotizacion']->aseguradora_id == 6)
                                            <div class="text-center" style="display:none;border-top: solid thin #41cac0; background-color: #41cac0">
                                                <p style="color: #ffffff; font-weight: bold">Descuento  40%</p>
                                            </div>
                                            @endif
                                        <div class="pago-normal">
                                            <p class="preciop">
                                                $ {{number_format( ($cotizacionCur["cotizacion"]->prima_total), 2, '.', ',')}}
                                            </p>
                                            <button class="btn btn-default btn-mini" type="submit"
                                                    ng-click='updateCotizacion({{$cotizacion->id}},{{$cotizacionCur["cotizacion"]->aseguradora_id}},0)'>
                                                Solicitar Seguro
                                            </button>
                                        </div>
                                        <ul class="list-unstyled coberturas" style="display:none">
                                                                                        <span class="peque">1er Pago de $ {{ number_format( ($cotizacionCur["cotizacion"]->primer_pago), 2, '.', ',') }}</span><br>
                                            <span class="peque">+ {{ $forma_pago->no_pagos-1}} {{ $forma_pago->no_pagos==2?'Pago':'Pagos' }}
                                                de $ {{ number_format( ($cotizacionCur["cotizacion"]->subsecuentes_pago), 2, '.', ',') }}</span>
                                            
                                        </ul>
                                    @endif
                                </div>
                                <ul class="list-unstyled coberturas" style="display:none">
                                    @foreach($cotizacionCur["coberturas"] as $coberturas)
                                        <li data-toggle="tooltip" title="{{$coberturas["descripcion"]}}">
                                            <i class="icon-caret-right"></i>&nbsp;&nbsp;{{$coberturas["cobertura"]}}
                                            :
                                            <strong></strong> {{$coberturas["deducible"]}}
                                        </li>
                                    @endforeach
                                </ul>

                            </div>
                        </div>
                                            @endif
                @endforeach
            </div>
            <!--price end-->
        </div>
        <p>Cotización sujeta a modificaciones sin previo aviso</p>
        <br/>
    </div>
@endsection

@section('footer')

    <script>
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });

        var cerrado = 1;

        function verDetalle() {
            var x = document.getElementsByClassName("coberturas");
            var i;
            for (i = 0; i < x.length; i++) {

                if (cerrado === 1) {
                    x[i].style.display = "block";
                }
                else
                    x[i].style.display = "none";
            }
            if (cerrado === 1) {
                cerrado = 0;
                var y = document.getElementById("btnDetalle");
                y.innerHTML = '<i class="icon-eye-open"></i> Ocultar Detalle';
            }
            else {
                cerrado = 1;
                var y = document.getElementById("btnDetalle");
                y.innerHTML = '<i class="icon-eye-open"></i> Ver Detalle';
            }

        }

    </script>

    <script>
        $("#btnRegresar").click(function () {
            window.location.href = "/cotiza/{{ $cotizacion->id }}";
        });

        var bbapp = angular.module('bbapp', []);
        bbapp.controller('FundacionCtrl', function ($scope, $http, $httpParamSerializerJQLike, $location) {


            $scope.procesoCompara = function (id) {
                var config = {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                    }
                };
                $ruta = '/api/cotizacion/' + id + '/guardarCambio';
                axios.post($ruta, $("#formCotiza").serialize())
                    .then(function (response) {

                        axios.get('/api/cotizacion/' + id + '/cotiza/qualitas').then(function (reponse) {
                            console.log("ACABO QUA");
                        }, function (error) {
                            console.log("ERROR QUA");
                        });
                        axios.get('/api/cotizacion/' + id + '/cotiza/mapfre').then(function (reponse) {
                            console.log("ACABO MAP");
                        }, function (error) {
                            console.log("ERROR MAP");
                        });
                        axios.get('/api/cotizacion/' + id + '/cotiza/axa').then(function (reponse) {
                            console.log("ACABO AXA");
                        }, function (error) {
                            console.log("ERROR AXA");
                        });
                        axios.get('/api/cotizacion/' + id + '/cotiza/hdi').then(function (reponse) {
                            console.log("ACABO HDI");
                        }, function (error) {
                            console.log("ERROR HDI");
                        });
                        axios.get('/api/cotizacion/' + id + '/cotiza/zurich').then(function (reponse) {
                            console.log("ACABO ZUR");
                        }, function (error) {
                            console.log("ERROR ZUR");
                        });
                        axios.get('/api/cotizacion/' + id + '/cotiza/bx').then(function (reponse) {
                            console.log("ACABO BX+");
                        }, function (error) {
                            console.log("ERROR BX+");
                        });


                        setTimeout(function () {
                            window.location = "/compara/" + id;
                        }, 1000 * 30);

                    }, function (error) {
                        console.log("HAY ERROR");
                        console.log(error);
                    });

            };


            var vm = this;

            $scope.updateCotizacion = function ($cotizacion_id, $aseguradora_id, $metodo_pago_id) {

                //TODO qué pasa con los deducibles??
                $ruta = '/api/cotizacion/EligeAseguradora/' + $cotizacion_id + "?aseguradora_id=" + $aseguradora_id + "&metodo_pago_id=" + $metodo_pago_id;
                console.log($ruta);
                axios.post($ruta).then(function (response) {
                    window.location = "/datos/" + $cotizacion_id;
                }, function (error) {
                    console.log("HAY ERROR");
                    console.log(error);
                });
            };


            $scope.enviarEmailCotizacion = function () {
                swal({title: "Enviando ....", showConfirmButton: false});

                axios.get("/api/cotizacion/Enviar/{{$cotizacion->id}}")
                    .then(function () {
                        swal("Cotización enviada correctamente", null, "success");
                    }, function () {
                        swal("Error al enviar la cotización", null, "error");
                    });
            };



        });

        function cambiaValores() {
            document.getElementById('divCotizacion').style.display = 'none';
            document.getElementById('divImprime').style.display = 'none';
            document.getElementById('divEnviar').style.display = 'none';
        }

        function validaPaquete() {
            var paqueteID = document.getElementById("paquete_id").value;

            if (paqueteID == 2 || paqueteID == 3) {
                document.getElementById('divDeducibles').style.display = "none";
            }
            else {
                document.getElementById('divDeducibles').style.display = "block";
            }
        }

        function cambiaPaquete() {
            var paqueteID = document.getElementById("paquete_id").value;

            switch (paqueteID) {
                case '1'://AMPLIA
                {
                    var select = $('#deducibles');
                    var options = select.attr('options');

                    $('option', select).remove();
                    select.append($('<option>', {
                        value: '5|10',
                        text: '5% DM y 10% RT'
                    }));
                    select.append($('<option>', {
                        value: '3|5',
                        text: '3% DM y 5% RT'
                    }));
                }
                    break;
                case '2'://LIMITADA
                {
                    var select = $('#deducibles');
                    var options = select.attr('options');

                    $('option', select).remove();
                    select.append($('<option>', {
                        value: '0|10',
                        text: '0% DM y 10% RT'
                    }));
                }
                    break;
                case '3'://RC
                {
                    var select = $('#deducibles');
                    var options = select.attr('options');

                    $('option', select).remove();
                    select.append($('<option>', {
                        value: '0|0',
                        text: '0% DM y 0% RT'
                    }));
                }
                    break;
                case '4'://AMPLIA PLUS
                {
                    var select = $('#deducibles');
                    var options = select.attr('options');

                    $('option', select).remove();
                    select.append($('<option>', {
                        value: '5|10',
                        text: '5% DM y 10% RT'
                    }));
                 /*   select.append($('<option>', {
                        value: '3|10',
                        text: '3% DM y 10% RT'
                    }));*/
                }
                    break;
            }
            validaPaquete();
        }

        validaPaquete();
    </script>
@endsection