@extends('plantilla')
@section('header')

@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">Pago</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 name="frmPago" id="frmPago" ng-submit="submitForm(frmPago.$valid)" novalidate>
                <div class="col-md-12 col-sm-12 address">
                    <h4>Datos Asegurado</h4>
                    <div class="contact-form">
                        <div class="row">
                            <div class="col-md-2">
                                <label id="name" ng-show="{{$asegurado->tipo_persona}} == '0'">Nombre</label>
                                <label id="name" ng-show="{{$asegurado->tipo_persona}} == '1'">Razón Social</label>
                            </div>
                            <div class="col-md-3">
                                <span>{{$asegurado->nombre}} {{$asegurado->paterno}} {{$asegurado->materno != "null" && $asegurado->materno ? $asegurado->materno : ""}}</span>
                            </div>
                            <div class="col-md-2">
                                <label id="name" ng-show="{{$asegurado->tipo_persona}} == '0'">Fecha de
                                    Nacimiento</label>
                                <label id="name" ng-show="{{$asegurado->tipo_persona}} == '1'">Fecha de Constituci&oacute;n</label>
                            </div>
                            <div class="col-md-2">
                                <span>{{$asegurado->fecha_nacimiento}}</span>
                            </div>
                            <div class="col-md-2">
                                <label id="name" ng-show="{{$asegurado->tipo_persona}} == '1'">Nacionalidad</label><span
                                        ng-show="{{$asegurado->tipo_persona}} == '1'">&nbsp;&nbsp;&nbsp;{{$asegurado->nacionalidad_apoderado_legal ? "Extranjero" : "Mexicano"}}</span>
                                <label id="name"
                                       ng-show="{{$asegurado->tipo_persona}} == '0'">G&eacute;nero</label><span
                                        ng-show="{{$asegurado->tipo_persona}} == '0'">&nbsp;&nbsp;&nbsp;{{($asegurado->sexo?'Masculino':'Femenino')}}</span>
                            </div>
                            <div class="col-md-2">


                            </div>
                        </div>
                        <div class="row" ng-show="{{$asegurado->tipo_persona}} == '1'">
                            <div class="col-md-3">
                                <label id="name">Apoderado Legal</label>
                            </div>
                            <div class="col-md-3">
                                <span>{{$asegurado->apoderado_legal}}</span>
                            </div>
                            <div class="col-md-3">
                                <label id="name">Objetivo Social</label>
                            </div>
                            <div class="col-md-3">
                                <span>{{$asegurado->objetivo_social}}</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                <label id="name">Email</label>
                            </div>
                            <div class="col-md-2">
                                <span>{{$asegurado->email}}</span>
                            </div>
                            <div class="col-md-2">
                                <label id="name">Tel&eacute;fono(s)</label>
                            </div>
                            <div class="col-md-2">
                                <span>{{$asegurado->telefono_fijo}}</span>
                            </div>
                            <div class="col-md-2">
                                <span>{{$asegurado->telefono_movil != "null" && $asegurado->telefono_movil ? $asegurado->telefono_movil : ""}}</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                <label id="name">Domicilio</label>
                            </div>
                            <div class="col-md-10">
                                <span>{{$asegurado->calle}} {{$asegurado->num_exterior}} {{$asegurado->num_interior != "null" && $asegurado->num_interior ? $asegurado->num_interior : ""}}
                                    , CP {{$asegurado->cp}}</span>
                            </div>
                        </div>
                    </div>
                </div>

                @if($contratante != null && $contratante->id != $asegurado->id)
                    <div class="col-md-12 col-sm-12 address">
                        <h4>Datos Contratante</h4>
                        <div class="contact-form">
                            <div class="row">
                                <div class="col-md-2">
                                    <label id="name" ng-show="{{$contratante->tipo_persona}} == '0'">Nombre</label>
                                    <label id="name" ng-show="{{$contratante->tipo_persona}} == '1'">Raz&oacute;n
                                        Social</label>
                                </div>
                                <div class="col-md-3">
                                    <span>{{$contratante->nombre}} {{$contratante->paterno}} {{$contratante->materno != "null" && $contratante->materno ? $contratante->materno : ""}}</span>
                                </div>
                                <div class="col-md-2">
                                    <label id="name" ng-show="{{$contratante->tipo_persona}} == '0'">Fecha de
                                        Nacimiento</label>
                                    <label id="name" ng-show="{{$contratante->tipo_persona}} == '1'">Fecha de Constituci&oacute;n</label>
                                </div>
                                <div class="col-md-2">
                                    <span>{{$contratante->fecha_nacimiento}}</span>
                                </div>
                                <div class="col-md-2">
                                    <label id="name"
                                           ng-show="{{$contratante->tipo_persona}} == '1'">Nacionalidad</label><span
                                            ng-show="{{$contratante->tipo_persona}} == '1'">&nbsp;&nbsp;&nbsp;{{$contratante->nacionalidad_apoderado_legal ? "Extranjero" : "Mexicano"}}</span>
                                    <label id="name"
                                           ng-show="{{$contratante->tipo_persona}} == '0'">G&eacute;nero</label><span
                                            ng-show="{{$contratante->tipo_persona}} == '0'">&nbsp;&nbsp;&nbsp;{{$contratante->sexo ? "Masculino" : "Femenino"}}</span>
                                </div>
                                <div class="col-md-2">


                                </div>
                            </div>
                            <div class="row" ng-show="{{$contratante->tipo_persona}} == '1'">
                                <div class="col-md-3">
                                    <label id="name">Apoderado Legal</label>
                                </div>
                                <div class="col-md-3">
                                    <span>{{$contratante->apoderado_letal}}</span>
                                </div>
                                <div class="col-md-3">
                                    <label id="name">Objetivo Social</label>
                                </div>
                                <div class="col-md-3">
                                    <span>{{$contratante->objetivo_social}}</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-2">
                                    <label id="name">Email</label>
                                </div>
                                <div class="col-md-2">
                                    <span>{{$contratante->email}}</span>
                                </div>
                                <div class="col-md-2">
                                    <label id="name">Tel&eacute;fono(s)</label>
                                </div>
                                <div class="col-md-2">
                                    <span>{{$contratante->telefono_fijo}}</span>
                                </div>
                                <div class="col-md-2">
                                    <span>{{$contratante->telefono_movil != "null" && $contratante->telefono_movil ? $contratante->telefono_movil : ""}}</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-2">
                                    <label id="name">Domicilio</label>
                                </div>
                                <div class="col-md-10">
                                    <span>{{$contratante->calle}} {{$contratante->num_exterior}} {{$contratante->num_interior != "null" && $contratante->num_interior ? $contratante->num_interior : "" }}
                                        , Col. {{$contratante->colonia}}
                                        , {{$contratante->municipio}} {{$contratante->ciudad}}
                                        , CP {{$contratante->cp}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="col-md-12 col-sm-12 address">
                    <h4>Datos Veh&iacute;culo</h4>
                    <div class="contact-form">
                        <div class="row">
                            <div class="col-md-2">
                                <label id="name">Modelo</label>
                            </div>
                            <div class="col-md-2">
                                <span>{{$cotizacion->modelo}}</span>
                            </div>
                            <div class="col-md-2">
                                <label id="name">Descripci&oacute;n</label>
                            </div>
                            <div class="col-md-6">
                                <span>{{$cotizacion->marca}} {{$cotizacion->descripcion}}</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                <label id="name">Serie</label>
                            </div>
                            <div class="col-md-2">
                                <span>{{$cotizacion->no_serie}}</span>
                            </div>
                            <div class="col-md-2">
                                <label id="name">Motor</label>
                            </div>
                            <div class="col-md-2">
                                <span>{{$cotizacion->no_motor != "null" && $cotizacion->no_motor ? $cotizacion->no_motor : ""}}</span>
                            </div>
                            <div class="col-md-2">
                                <label id="name">Placas</label>
                            </div>
                            <div class="col-md-2">
                                <span>{{$cotizacion->no_placas != "null" && $cotizacion->no_placas ? $cotizacion->no_placas : ""}}</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                <label id="name">Aseguradora</label>
                            </div>
                            <div class="col-md-2">
                                <span>{{$aseguradora->nombre}}</span>
                            </div>

                        </div>

                    </div>
                </div>

                <div class="col-md-12 col-sm-12 address">
                    <h4>Pago</h4>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="phone">Forma de Pago</label>
                                <p>
                                <div class="row">
                                    <div class="col-md-12">
                                        <select class="form-control" ng-model="model.tipo_pago">
                                            <option value="1">Tarjeta de Cr&eacute;dito</option>
                                            <!--option value="4">Tarjeta de Cr&eacute;dito 3MSI</option-->
                                            <!--option value="5">Tarjeta de Cr&eacute;dito 6MSI</option-->
                                            <option value="2">Cuenta CLABE</option>
                                            @if($cotizacion->forma_pago_id == 1 || $cotizacion->forma_pago_id == 2 || (in_array($cotizacion->sucursal,[717,727])))
                                                <option value="3">Efectivo</option>
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                </p>
                            </div>
                        </div>

                        <div class="col-md-3"
                             ng-show="model.tipo_pago == 1 || model.tipo_pago == 4 || model.tipo_pago == 5">
                            <div class="form-group">
                                <label for="phone">Tipo de tarjeta</label>
                                <p>
                                <div class="row">
                                    <div class="col-md-12">
                                        <select class="form-control" ng-model="model.tipo_tc">
                                            <option value="visa">Visa</option>
                                            <option value="mastercard">Master Card</option>
                                        </select>
                                    </div>
                                </div>
                                </p>
                            </div>
                        </div>

                        <div class="col-md-3"
                             ng-show="model.tipo_pago == 1 || model.tipo_pago == 4 || model.tipo_pago == 5">
                            <div class="form-group" ng-class="{'has-error' : frmPago.no_tc.$invalid}">
                                <label for="no_tc">N&uacute;mero de tarjeta</label>
                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="text" cc-number id="no_tc" name="no_tc"
                                               ng-model="model.no_tc"
                                               placeholder="" minlength="16" maxlength="16" class="form-control"
                                               required>
                                        <p ng-show="frmPago.no_tc.$invalid" class="help-block">Campo requerido o TDC
                                            inválida</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6" ng-if="model.tipo_pago == 2">
                            <div class="form-group">
                                <label for="phone">Cuenta CLABE</label>
                                <p>
                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="text" id="cta_clave" name="cta_clave" ng-model="model.cta_clave"
                                               placeolder="" maxlength="18" class="form-control"
                                               ng-blur="validarClabe()"
                                               required>
                                    </div>
                                </div>
                                </p>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="phone">Desea Factura</label>
                                <p>
                                <div>
                                    <input type="checkbox" id="facturar" ng-model="model.facturar" checked=""/>
                                </div>
                                </p>
                            </div>
                        </div>

                    </div>

                </div>

            </form>
        </div>
    </div>

    <center>
        <a href="{{url('datos/'.$cotizacion->id)}}" class="btn btn-danger btn-sm">
            <i class="glyphicon glyphicon-edit"></i>
            Editar datos
        </a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button class="btn btn-success btn-lg" type="submit" ng-click='pagarPoliza()'>
            <i class="glyphicon glyphicon-check"></i>
            Emitir
        </button>
    </center>
@endsection

@section('footer')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
    <script src="/js/bootstrap-switch.js"></script>
    <script src="/assets/angular-credit-cards.js"></script>
    <script>
        $("#ftermino").datepicker({
            format: "dd/mm/yyyy",
            startDate: "0d",
            endDate: "+30d",
            language: "es"
        });

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

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

            $scope.model = {};
            $scope.cotizacion_id = '{{$cotizacion->id}}';

            $scope.validarClabe = function () {
                $scope.clabeValida = false;
                if ($scope.model.cta_clave.length == 18)
                {
                    $http.get('/api/catalogos/validarClabe/' + $scope.model.cta_clave)
                            .then(function (response) {
                                $scope.clabeValida = true;
                            }, function (response) {
                                $scope.clabeValida = false;

                                swal('Cuenta CLABE no válida', $scope.model.cta_clave, 'error');
                            });
                }
            };

            $scope.pagarPoliza = function () {

                //permitir solo si es válida la CLABE
                // CHUCHO | Validar que se seleccione un metodo de pago
                if (typeof $scope.model.tipo_pago === 'undefined') {
                    swal('¡Selecciona una forma de pago!', null, 'error');
                    //terminar proceso
                    return;

                } else {

                    switch ($scope.model.tipo_pago)
                    {
                        case '1'://Tarjeta de Credito
                        {
                            if (typeof $scope.model.no_tc === 'undefined') {
                                swal('¡Hay que introducir una tarjeta válida!', null, 'error');
                                return;
                            }
                            else
                                $scope.emitirPoliza();
                        }
                            break;
                        case '2'://Cuenta Clabe
                        {
                            $scope.clabeValida = false;
                            if ($scope.model.cta_clave.length == 18)
                            {
                                $http.get('/api/catalogos/validarClabe/' + $scope.model.cta_clave)
                                        .then(function (response) {
                                            $scope.clabeValida = true;
                                            $scope.emitirPoliza();
                                        }, function (response) {
                                            $scope.clabeValida = false;

                                            swal('Cuenta CLABE no válida', $scope.model.cta_clave, 'error');
                                        });
                            }
                            else
                                swal('Cuenta CLABE no válida', $scope.model.cta_clave, 'error');

                        }
                            break;
                        case '3'://Efectivo
                            $scope.emitirPoliza();
                            break;
                    }



                }
            };

            $scope.pagarPolizaV1 = function () {

                //permitir solo si es válida la CLABE
                // CHUCHO | Validar que se seleccione un metodo de pago
                if (typeof $scope.model.tipo_pago === 'undefined') {
                    swal('¡Selecciona una forma de pago!', null, 'error');
                    //terminar proceso
                    return;

                } else {
                    // CHUCHO | Validar que introduzcan un numero de tarjeta
                    if ($scope.model.tipo_pago == '1') {
                        if (typeof $scope.model.no_tc === 'undefined') {
                            swal('¡Hay que introducir una tarjeta válida!', null, 'error');
                            return;
                        }
                    }
                    if ($scope.model.tipo_pago == '2') {
                        setTimeout(function () {
                            if (!$scope.clabeValida) {
                                swal('Cuenta CLABE no válida', $scope.model.cta_clave, 'error');
                                //terminar proceso
                                return;
                            }
                        }, 1000);

                    }
                    setTimeout(function (){
                    swal({
                            title: "¿Estas seguro?",
                            text: "Estas por emitir la póliza con una modalidad de pago <strong>{{$forma_pago->nombre}}</strong> ",
                            type: "warning",
                            html: true,
                            showCancelButton: true,
                            confirmButtonColor: "#7C6CC5", confirmButtonText: "Si, Continuar!",
                            cancelButtonText: "No, Cancelar!",
                            closeOnConfirm: false,
                            closeOnCancel: true,
                            showLoaderOnConfirm: true,
                        },
                        function (isConfirm) {
                            if (isConfirm) {
                                $ruta = '/api/cotizacion/Pago/' + $scope.cotizacion_id;

                                var EnviarPago = new FormData();

                                angular.forEach($scope.model, function (val, cve) {
                                    EnviarPago.append(cve, val);
                                });

                                axios.post($ruta, EnviarPago, {headers: {'Content-Type': undefined}}).then(function (response) {
                                    if (response.data.error == "")
                                        window.location = "/imprime/" + $scope.cotizacion_id;
                                    else {
                                        swal("Error!", response.data.error, "error");

                                    }
                                }, function (error) {
                                    swal("Error!", error, "error");
                                    console.log("ERROR");
                                    console.log(error);
                                });
                            } else {
                                return false;
                            }
                        });
                    }, 200 );
                }
            };

            $scope.emitirPoliza = function()
            {
                swal({
                    title: "¿Estas seguro?",
                    text: "Estas por emitir la póliza con una modalidad de pago <strong>{{$forma_pago->nombre}}</strong> ",
                    type: "warning",
                    html: true,
                    showCancelButton: true,
                    confirmButtonColor: "#7C6CC5", confirmButtonText: "Si, Continuar!",
                    cancelButtonText: "No, Cancelar!",
                    closeOnConfirm: false,
                    closeOnCancel: true,
                    showLoaderOnConfirm: true,
                },
                function (isConfirm) {
                    if (isConfirm) {
                        $ruta = '/api/cotizacion/Pago/' + $scope.cotizacion_id;

                        var EnviarPago = new FormData();

                        angular.forEach($scope.model, function (val, cve) {
                            EnviarPago.append(cve, val);
                        });

                        axios.post($ruta, EnviarPago, {headers: {'Content-Type': undefined}}).then(function (response) {
                            if (response.data.error == "")
                                window.location = "/imprime/" + $scope.cotizacion_id;
                            else {
                                swal("Error!", response.data.error, "error");

                            }
                        }, function (error) {
                            swal("Error!", error, "error");
                            console.log("ERROR");
                            console.log(error);
                        });
                    } else {
                        return false;
                    }
                });
            };
        });


    </script>
@endsection