@extends('layout.master',['activePage' => 'contratos_anexos', 'menuParent' => 'Reportes', 'titlePage' => __('Impresion de contratos y anexos')])


@push('plugin-styles')

{!! Html::style('assets/css/loader.css') !!}
{!! Html::style('assets/css/apps/tickets.css') !!}
{!! Html::style('assets/css/forms/checkbox-theme.css') !!}
{!! Html::style('plugins/table/datatable/datatables.css') !!}
{!! Html::style('plugins/table/datatable/dt-global_style.css') !!}
@endpush


@section('content')

<div class="sub-header-container">
    <header class="header navbar navbar-expand-sm">
        <ul class="navbar-nav flex-row">
            <li>
                <div class="page-header">
                    <nav class="breadcrumb-one" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0);"> {{__('Reportes')}}</a></li>
                            <li class="breadcrumb-item active" aria-current="page"><span> {{__('IMPRESION DE CONTRATOS Y ANEXOS')}}</span></li>
                        </ol>
                    </nav>
                </div>
            </li>
        </ul>
    </header>
</div>
<div class="container-fluid pt-2">
    <div class="card mb-4">
        <div class="card-body">
            <div class="form-group row mb-4 ">
                <div class="col-lg-2">
                    <label>Cuenta cliente: <span class="text-danger">*</span></label>
                    <input type="number" class="form-control" id="cuenta_cliente" onkeydown="javascript:if (event.key === 'Enter') getCliente() ">
                </div>
                <div class="col-lg-4">
                    <label>Nombre cliente: <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="cliente_search">
                    <input type="hidden" class="form-control" id="id_cliente_hidden">
                </div>
                <div class="col-lg-3">
                    <label>Tarjeta cliente: <span class="text-danger">*</span></label>
                    <input type="text" class="form-control creditCard" id="numero_tarjeta">
                </div>
                <div class="col-lg-3">
                    <button class="btn btn-primary mt-4" type="button" onclick="getCliente()">Buscar</button>

                </div>
            </div>

            <div class="card content-cliente-info  mb-4" style="display: none;">
                <div class="card-body font-12">
                    <div class="row mt-2 ">
                        <div class="col-lg-3">
                            <span class="text-black ">Nombre: </span>
                            <span id="nombre"></span>

                        </div>
                        <div class="col-lg-2">
                            <span class="text-black">Estatus: </span>
                            <span id="estatus" class="badge badge-primary">Activo</span>
                        </div>

                    </div>
                    <div class="row mt-2">
                        <div class="col-lg-3">
                            <span class="text-black">Domicilio: </span>
                            <span id="domicilio"></span>
                        </div>
                        <div class="col-lg-3">
                            <span class="text-black">Colonia: </span>
                            <span id="colonia"></span>
                        </div>
                        <div class="col-lg-3">
                            <span class="text-black">Población: </span>
                            <span id="poblacion"></span>
                        </div>
                        <div class="col-lg-2">
                            <span class="text-black">Estado: </span>
                            <span id="estado"></span>
                        </div>
                        <div class="col-lg-2">
                            <span class="text-black">C.P: </span>
                            <span id="cp"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card content-cliente-info  " style="display: none;">
                <div class="card-body">
                    <div class="row px-3">
                        <div class="col-5 text-center">
                            <span style="margin-left: -15px; ">Selecciona las opciones a generar</span>
                            <div class="row py-2">
                                <div class="checkbox-inline">

                                    @foreach($data['documentos'] as $dc)
                                    <label class="checkbox">
                                        <input type="checkbox" class="cbx-formatos" id="cbx-{{$dc->Progresivo}}" value="{{$dc->Progresivo}}" checked>
                                        <span></span>{{$dc->DescripcionFormato}}</label>
                                    @endforeach

                                </div>
                            </div>
                            <div class="row">
                                <button class="btn btn-primary " type="button" onclick="generarDocumento()">Generar</button>
                            </div>
                        </div>
                        <div class="col-7 text-center">
                            <span style="margin-left: -15px; display: none;" id="text-archivos">Descargar archivos</span>
                            <div class="row " id="content_archivos">

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

<div class="alert alert-icon-left alert-light-danger mb-4 is_message" id="error" role="alert" is_message="true" style="
            position:absolute;
            top:20px;
            right:20px;
            z-index:10000;
            display:none">
    <button type="button" class="close font-19" data-dismiss="alert" aria-label="{{__('Close')}}">
        <i class="las la-times text-danger"></i>
    </button>
    <i class="las la-trash-alt"></i>
    <strong>{{__('¡Error!')}}</strong>
    <span id="error_message"></span>
</div>

<style>
    .ui-autocomplete-input {
        font-size: 14px;
        padding-top: 0px !important;
        z-index: 1000;
        position: relative;
    }

    .ui-menu .ui-menu-item a {
        font-size: 12px;
    }

    .ui-autocomplete {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000 !important;
        float: left;
        display: none;
        min-width: 160px;
        width: 160px;
        padding: 4px 0;
        margin: 2px 0 0 0;
        list-style: none;
        background-color: #ffffff;
        border-color: #ccc;
        border-color: rgba(0, 0, 0, 0.2);
        border-style: solid;
        border-width: 1px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        *border-right-width: 2px;
        *border-bottom-width: 2px;
    }

    .ui-autocomplete {
        max-height: 200px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
        /* add padding to account for vertical scrollbar */
        padding-right: 20px;
    }

    .ui-menu-item>a.ui-corner-all {
        display: block;
        padding: 3px 15px;
        clear: both;
        font-weight: normal;
        line-height: 18px;
        color: #555555;
        white-space: nowrap;
        text-decoration: none;
    }

    .ui-state-hover,
    .ui-state-active {
        color: #ffffff;
        text-decoration: none;
        background-color: #0088cc;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        background-image: none;
    }
</style>
<input type="hidden" name="id_cliente" id="id_cliente">
@endsection

@push('plugin-scripts')
{!! Html::script('plugins/table/datatable/datatables.js') !!}
{!! Html::script('plugins/table/datatable/button-ext/dataTables.buttons.min.js') !!}
{!! Html::script('plugins/table/datatable/button-ext/jszip.min.js') !!}
{!! Html::script('plugins/flatpickr/flatpickr.js') !!}
{!! Html::script('plugins/flatpickr/custom-flatpickr.js') !!}
{!! Html::script('assets/js/loader.js') !!}
{!! Html::script('assets/js/basicui/inputmask.js') !!}
{!! Html::script('plugins/jquery-ui/jquery-ui.min.js') !!}


@endpush

@push('custom-scripts')
<script>
    $(document).ready(function() {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $('.creditCard').inputmask({
            mask: '(9{4} 9{4} 9{4}|9{4} 9{4} 9{4} 9{4})'
        }).change(function() {
            let value = $(this).val().substr(0, 2);
            $(this).inputmask({
                mask: '(9{4} 9{4} 9{4}|9{4} 9{4} 9{4} 9{4})'
            });
        });

        $('#cliente_search').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "{{url('procesos/get_clientes')}}",
                    dataType: 'json',
                    data: {
                        term: request.term
                    },
                    success: function(data) {
                        $('#id_cliente_hidden').val('')
                        response(data)
                    }
                })
            },
            select: function(event, ui) {


                $('#id_cliente_hidden').val(ui.item.id)
                $('#cliente_search').val(ui.item.label)
                getCliente()
                return false;
            },
            selectFirst: true,
            minLength: 3
        });

        $(".basic-select2").select2();
    });


    function getCliente() {
        if ($('#id_cliente_hidden').val() == '' && $('#cliente_search').val() == '' && $('#cuenta_cliente').val() == '' && $('#numero_tarjeta').val() == '') {
            $('#error_message').text('Ingresa por lo menos un filtro');
            $('#error').show();
            return;
        }

        $.ajax({
                url: '{{ url("reportes/contratos-anexos/get-cliente" )}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    id_cliente: $('#id_cliente_hidden').val(),
                    nombre_cliente: $('#cliente_search').val(),
                    cuenta_cliente: $('#cuenta_cliente').val(),
                    numero_tarjeta: $('#numero_tarjeta').val(),
                }
            })
            .done(function(resp) {

                if (resp.data == null) {
                    $('#error_message').text('Cliente no encontrado');
                    $('#error').show();
                    setTimeout(() => {
                        location.reload();
                    }, 3000);
                    return;
                }


                $('.content-cliente-info').show();
                $('#id_cliente_hidden').val(resp.data['id']);
                $('#nombre').text(resp.data['nombre_completo']);
                $('#cuenta_cliente').val(resp.data['cuenta'])
                $('#cliente_search').val(resp.data['nombre_completo'])
                $('#numero_tarjeta').val(resp.data['numero_tarjeta'])
                $('#domicilio').text(resp.data['domicilio']);
                $('#colonia').text(resp.data.colonias['descripcion']);
                $('#poblacion').text(resp.data.colonias.poblacion['descripcion']);
                $('#estado').text(resp.data.colonias.poblacion.municipio.estado['descripcion']);
                $('#cp').text(resp.data.colonias['codigo_postal']);
                $('#estatus').text(resp.data['estatus']);

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {

            });
    }

    $('#cbx-6').on('change', () => {

        if ($("#cbx-6").is(':checked')) {
            $('input[type="checkbox"]').prop('checked', true)
            return;
        }

        $('input[type="checkbox"]').prop('checked', false)
    })

    function generarDocumento() {


        var arr_check = new Array;
        $('.cbx-formatos').each(function() {
            if ($(this).is(':checked'))
                arr_check.push($(this).val());

        })

        $('#loadingModal').modal('show')

        $.ajax({
                url: '{{ url("reportes/contratos-anexos/generar" )}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    formatos: arr_check,
                    id_cliente: $('#id_cliente_hidden').val(),
                }
            })
            .done(function(resp) {

                $('#content_archivos').empty();
                $('#text-archivos').show();
                $.each(resp.data, function(index, value) {
                    $('#content_archivos').append(
                        '<div class="col-3">' +
                        '<a href="' + value['url'] + '" title="Descargar archivo"> <span class="m-2 strong text-dark" style="font-size: .75rem;">' + value['nombre'] + '</span><br><i class="las la-cloud-download-alt text-primary font-weight-bold" style="font-size: 1.3rem;"></i></a>' +
                        '</div>'
                    )
                })
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                setTimeout(() => {
                    $('#loadingModal').modal('hide')

                }, 3000);
            });
    }
</script>
@endpush