@extends('layouts.dashboard')
@section('css')
    <link href="{{ asset('css/receptores/create.css') }}" rel="stylesheet">
    <link href="{{ asset('css/firma.css') }}" rel="stylesheet">
@endsection
@section('content')
    @include('layouts.header_titulo')

    @if (session('message'))
        <div class="alert alert-success alert-dismissable col-lg-4 col-md-12"
            style="text-align: center;margin: auto;margin-bottom: 1rem;">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>{{ session('message') }}</strong>
        </div>
    @endif
    @if (session('danger'))
        <div class="col-md-12 text-center">
            <div class="alert alert-danger alert-dismissable col-md-12" style="word-break:break-all" role="progressbar"
                aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>{{ session('danger') }}</strong>
            </div>
        </div>
    @endif

    @if (session('ses_plan_emisor') != 'Free')
        @if (session('id_comprobante'))
            @include('pagos.store')
        @endif

        @if (empty(session('id_comprobante')))
            <div class="main-card mb-3 card">
                <div class="card-body">
                    <div id="example_wrapper" class="dataTables_wrapper dt-bootstrap4">
                        <div class="row">
                            <div class="loader-wrapper d-flex justify-content-center align-items-center"
                                id="loader_Inf_cancelacion"
                                style="width: 100%;height: 77vh;position: absolute;opacity: 0;z-index: -1;">
                                <div class="loader">
                                    <div class="ball-grid-pulse">
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12" id="card_cancelacion">
                                <div class="row">
                                    <div class="col-2"><input type="text" id="txt_uuid" name="txt_uuid"
                                            placeholder="Folio fiscal (UUID)" class="form-control" value=""
                                            onblur="buscar()"></div>
                                    <div class="col-1"><input type="text" id="txt_folio" name="txt_folio"
                                            placeholder="Folio" class="form-control" value="" onblur="buscar()"></div>
                                    <div class="col-1"><input type="text" id="txt_serie" name="txt_serie"
                                            placeholder="Serie" class="form-control" value="" onblur="buscar()"></div>
                                    <div class="col-2"><input type="text" id="txt_rfc" name="txt_rfc" placeholder="RFC"
                                            class="form-control" value="" onblur="buscar()"></div>
                                    <div class="col-4"><input type="text" id="txt_razon" name="txt_razon"
                                            placeholder="Razón social" class="form-control" value="" onblur="buscar()">
                                    </div>
                                    <div class="col-2" style="display: none">
                                        <select name="slc_documento" id="slc_documento" class="form-control"
                                            onchange="buscar()">
                                            <option value="AL">Todos los documentos</option>
                                        </select>
                                    </div>
                                    <div class="col-2">
                                        <select name="slc_estado" id="slc_estado" class="form-control" onchange="buscar()">
                                            <option value="AL">Todos los estados</option>
                                            <option value="A">Activo</option>
                                            <option value="C">Cancelado</option>
                                            <option value="E">En proceso de cancelaci&oacute;n</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2 mt-2">
                                        <select name="slc_banco" id="slc_banco" class="form-control" onchange="filtar_cuentas(this),buscar()">
                                            <option value="cbx_select">Selecione un banco</option>
                                            @foreach ($bancos_filtrados_nombre as $banco)
                                                <option value="{{ trim($banco->nombre) }}">{{ $banco->nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-4 mt-2">
                                        <select name="slc_cuenta_bancaria" id="slc_cuenta_bancaria" class="form-control"
                                            onchange="filtar_bancos(this),buscar()">
                                            <option value="cbx_select" banco="">Selecione una cuenta bancaria</option>
                                            @foreach ($bancos as $banco)
                                                <option value="{{ $banco->no_cuenta_bancaria }}" banco="{{$banco->nombre}}">
                                                    {{ $banco->no_cuenta_bancaria }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-2 mt-2">
                                        <select name="slc_metodo_pago" id="slc_metodo_pago" class="form-control"
                                            onchange="buscar()">
                                            <option value="">Selecione una forma de pago</option>
                                            @php
                                                echo $metodoPago;
                                            @endphp
                                        </select>
                                    </div>
                                    <div class="col-2 mt-2"><input type="number" id="txt_total" name="txt_total"
                                        placeholder="Total desde" class="form-control" value="" onblur="buscar()">
                                    </div>
                                    <div class="col-2 mt-2"><input type="number" id="txt_total2" name="txt_total2"
                                            placeholder="Total hasta" class="form-control" value="" onblur="buscar()">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2 mt-2">
                                    </div>
                                    <div class="col-2 mt-2">
                                    </div>
                                    <div class="col-2"></div>
                                    <div class="col-2 mt-2">
                                        <input type="checkbox" class="" id="chk_fecha">
                                        <input type="hidden" id="txt_fecha" value="n">
                                        <label class="form-check-label" for="exampleCheck1">Fechas en búsqueda</label>
                                    </div>
                                    <div class="col-2 mt-2">
                                        <input id="date_range" name="date_range" class="form-control" disabled>
                                    </div>
                                    <div class="col-2 mt-2">
                                        <input id="p_range" name="p_range" class="form-control" disabled
                                            value="{{ Carbon\Carbon::parse($hoy)->format('d-m-Y') }}">
                                    </div>
                                </div>
                                <br>
                                <table style="width: 100%;" id="tbl_cfdi"
                                    class="table table-hover table-striped table-bordered dataTable dtr-inline" role="grid"
                                    aria-describedby="example_info">
                                    <thead style="font-size: 14px;">
                                        <tr role="row">
                                            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Folio Fiscal
                                            </th>
                                            <th class="sorting" tabindex="1" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Fecha de Pago
                                            </th>
                                            <th class="sorting" tabindex="2" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Folio</th>
                                            <th class="sorting" tabindex="3" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Serie</th>
                                            <th class="sorting" tabindex="4" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                RFC</th>
                                            <th class="sorting" tabindex="5" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Razón social </th>
                                            <th class="sorting" tabindex="6" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Tipo de documento</th>
                                            <th class="sorting" tabindex="7" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Metodo del pago
                                            </th>
                                            <th class="sorting" tabindex="8" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Fecha del Timbrado
                                            </th>
                                            <th class="sorting" tabindex="9" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Banco
                                            </th>
                                            <th class="sorting" tabindex="10" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Cuenta bancaria
                                            </th>
                                            <th class="sorting" tabindex="11" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Estado</th>
                                            <th class="sorting" tabindex="13" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Importe pagado</th>
                                            <th class="" tabindex="15" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Acciones</th>
                                        </tr>

                                    </thead>
                                    <tbody style="font-size: 14px;">
                                    </tbody>

                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    @endcan

    @if (session('danger_free'))
        @include('errors.bloqueo_funciones')
    @endif
@endsection

@section('js')
    <script src="{{ asset('js/firma.js?version=' . version_js()) }}"></script>
    <script src="{{ asset('js/complementoPagos/timbrar.js?version=1.0') }}"></script>
    <script src="{{ asset('js/select2.js') }}"></script>
    <script src="{{ asset('js/receptores/_actions.js?version=' . version_js()) }}"></script>
    <script src="{{ asset('js/cancelacion/status.js?version=' . version_js()) }}"></script>
    <!-- InputMask -->
    <script src="{{ asset('plugins/moment/moment.min.js') }}"></script>
    <!-- date-range-picker -->
    <script src="{{ asset('plugins/daterangepicker/daterangepicker.js') }}"></script>


    <script>
        let _cfdi_;
        $(document).ready(function() {
            const _key_colum_= {
                "Folio Fiscal":"uuid as Folio_Fiscal",
                "Fecha de Pago":"fecha_pago as Fecha_pago",
                "Folio":"folio as Folio",
                "Serie":"serie as Serie",
                "RFC":"rfc_receptor as RFC",
                "Razón social":"re_razon_social as Razón_social",
                "Tipo de documento":"des_titulo_doc as Tipo_documento",
                "Metodo del pago":"metodo_pago as Forma_pago",
                "Fecha del Timbrado":"fecha_timbrado as Fecha_Timbrado",
                "Banco":"banco as Banco",
                "Cuenta bancaria":"no_cuenta_bancaria as Cuenta_bancaria",
                "Estado":"status as Estado",
                "Total":"total as Total",
                "Importe pagado":"(case when saldo_pendiente is null then 0 else saldo_pendiente end)as Saldo_pagado",
                "Saldo pendiente":"(case when saldo_pendiente is null then total else total-saldo_pendiente end)as Saldo_pendiente",
            };

            _cfdi_ = $('#tbl_cfdi').DataTable({
                lengthMenu: [
                    [25, 50, 100],
                    [25, 50, 100],
                ],
                "order": [
                    [1, "desc"]
                ],
                buttons: [{
                        extend: 'copy',
                        className: 'btn buttom_datatables'
                    },
                    {
                        extend: 'excel',
                        className: 'btn buttom_datatables',
                        action: function(e, dt, node, config) {

                            const filtro = {
                                uuid: $("#txt_uuid").val(),
                                folio: $("#txt_folio").val(),
                                serie: $("#txt_serie").val(),
                                rfc: $("#txt_rfc").val(),
                                razon: $("#txt_razon").val(),
                                documento: $("#slc_documento").val(),
                                estado: $("#slc_estado").val(),
                                periodo: $("#date_range").val(),
                                periodo2: $("#p_range").val(),
                                total: $("#txt_total").val(),
                                fecha: $("#txt_fecha").val(),
                                total2: $("#txt_total2").val(),
                                slc_banco: $("#slc_banco").val().trim(),
                                slc_cuenta_bancaria: $("#slc_cuenta_bancaria").val(),
                                slc_metodo_pago: $("#slc_metodo_pago").val()
                            }
                            const encabezado = []
                            $('#tbl_cfdi thead tr th').each((_index_, _th_) => {
                                if (_index_ < ($('#tbl_cfdi thead tr th').length - 1)) {
                                    encabezado.push(_key_colum_[_th_.textContent.trim()])
                                }
                            })
                            // Abrir nuevo tab
                            var win = window.open( base_url + "/control/pagos/reporte/download?encabezado="+JSON.stringify({encabezado})+'&filtro='+JSON.stringify({filtro}), '_blank');
                            // Cambiar el foco al nuevo tab (punto opcional)
                            win.focus();
                        }

                    },
                    {
                        extend: 'colvis',
                        action: function(e, dt, node, config) {
                            console.log('here');
                            $.fn.dataTable.ext.buttons.collection.action.call(this, e, dt, node,
                                config);
                        },
                        className: 'btn buttom_datatables',
                    },
                ],
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: {
                    url: "{{ url('/control/pagos/reporte/get') }}",
                    data: function(d) {
                        d.uuid = $("#txt_uuid").val(),
                            d.folio = $("#txt_folio").val(),
                            d.serie = $("#txt_serie").val(),
                            d.rfc = $("#txt_rfc").val(),
                            d.razon = $("#txt_razon").val(),
                            d.documento = $("#slc_documento").val(),
                            d.estado = $("#slc_estado").val(),
                            d.periodo = $("#date_range").val(),
                            d.periodo2 = $("#p_range").val(),
                            d.total = $("#txt_total").val(),
                            d.fecha = $("#txt_fecha").val(),
                            d.total2 = $("#txt_total2").val(),
                            d.slc_banco = $("#slc_banco").val().trim(),
                            d.slc_cuenta_bancaria = $("#slc_cuenta_bancaria").val(),
                            d.slc_metodo_pago = $("#slc_metodo_pago").val()
                    },
                    type: 'POST',
                },
                dataType: "JSON",
                searching: false,
                "columns": [{
                        "data": "uuid"
                    },
                    {
                        "data": "fecha_pago"
                    },
                    {
                        "data": "folio"
                    },
                    {
                        "data": "serie"
                    },
                    {
                        "data": "rfc_receptor",
                        render: function(data, type) {
                            let rfc = '';
                            if (type === 'display') {
                                if (data == '0') {
                                    rfc = 'XAXX010101000';
                                } else {
                                    rfc = data;
                                }
                            }
                            return rfc;
                        }
                    },
                    {
                        "data": "re_razon_social"
                    },
                    {
                        "data": "des_titulo_doc",
                        render: function(data, type) {
                            if (data == 'Carta Porte: Autotransporte') {
                                return 'Carta Porte'
                            } else {
                                return data
                            }
                        }
                    },
                    {
                        'data': 'metodo_pago',
                    },
                    {
                        'data': 'fecha_timbrado',
                        render: function(data, type) {
                            const MESES = [
                                "enero",
                                "febrero",
                                "marzo",
                                "abril",
                                "mayo",
                                "junio",
                                "julio",
                                "agosto",
                                "septiembre",
                                "octubre",
                                "noviembre",
                                "diciembre",
                            ];
                            let out = '';
                            const fecha = new Date(data);
                            if (type === 'display') {
                                out = '<p><i class="lnr-calendar-full"> </i>' + fecha.getDate() +
                                    ' de ' + MESES[fecha.getMonth()] + ' de ' + fecha
                                    .getFullYear() + '</p><p> <i class="lnr-clock"> </i>' + fecha
                                    .getHours() +
                                    ':' + fecha.getMinutes() + ':' + fecha.getSeconds() + ' ' + (
                                        fecha.getHours() >= 12 ? 'PM' : 'AM') + '</p>';
                            }
                            return out;
                        }
                    },
                    {
                        'data': 'banco',
                    },
                    {
                        'data': 'no_cuenta_bancaria',
                    },
                    {
                        "data": "status",
                        render: function(data, type) {
                            if (type === 'display') {
                                let status = '';
                                if (data == 'P') {
                                    status = 'Precomprobante';
                                } else if (data == 'C') {
                                    return '<span class="card-title text-danger" style="font-size:10px!important"> Cancelado </span>';
                                } else if (data == 'E') {
                                    return '<span class="card-title text-warning" style="font-size:10px!important"> Proceso </span>';
                                } else {
                                    status = 'Activo';
                                }
                                return status;
                            }
                            return data;
                        }
                    },
                    {
                        'data': 'saldo_pendiente',
                        render: function(data, type) {
                            if (Boolean(data) == false) {
                                return '<span><span>';
                            } else {
                                return '<span >$ ' + (data).toString() + '<span>';
                            }
                        }
                    },
                    {
                        data: 'action',
                        name: 'Acciones',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            //Date range as a button
            $('#date_range').daterangepicker({
                singleDatePicker: true,
                autoApply: true,
                showDropdowns: true,
                minYear: 2010,
                maxYear: parseInt(moment().format("YYYY"), 10),
                locale: {
                    "format": "DD-MM-YYYY",
                    "separator": " - ",
                    "applyLabel": "Guardar",
                    "cancelLabel": "Cancelar",
                    "daysOfWeek": [
                        "Do",
                        "Lu",
                        "Ma",
                        "Mi",
                        "Ju",
                        "Vi",
                        "Sa"
                    ],
                    "monthNames": [
                        "Enero",
                        "Febrero",
                        "Marzo",
                        "Abril",
                        "Mayo",
                        "Junio",
                        "Julio",
                        "Agosto",
                        "Setiembre",
                        "Octubre",
                        "Noviembre",
                        "Diciembre"
                    ],
                    "firstDay": 1
                },
                startDate: moment().subtract(29, 'days')
            });

            //Date range as a button
            $('#p_range').daterangepicker({
                singleDatePicker: true,
                autoApply: true,
                showDropdowns: true,
                minYear: 2010,
                maxYear: parseInt(moment().format("YYYY"), 10),
                locale: {
                    "format": "DD-MM-YYYY",
                    "separator": " - ",
                    "applyLabel": "Guardar",
                    "cancelLabel": "Cancelar",
                    "daysOfWeek": [
                        "Do",
                        "Lu",
                        "Ma",
                        "Mi",
                        "Ju",
                        "Vi",
                        "Sa"
                    ],
                    "monthNames": [
                        "Enero",
                        "Febrero",
                        "Marzo",
                        "Abril",
                        "Mayo",
                        "Junio",
                        "Julio",
                        "Agosto",
                        "Setiembre",
                        "Octubre",
                        "Noviembre",
                        "Diciembre"
                    ],
                    "firstDay": 1
                },
                //startDate: moment()
            });

        });

        function buscar() {
            document.getElementById('txt_fecha').value = 'n';
            if (document.getElementById('chk_fecha').checked == true)
                document.getElementById('txt_fecha').value = 's';
            else
                document.getElementById('txt_fecha').value = 'n';
            _cfdi_.draw();
        }

        $('#chk_fecha').click(function() {
            document.getElementById('txt_fecha').value = 'n';
            if (this.checked) {
                document.getElementById('txt_fecha').value = 's';
                $("#date_range").prop("disabled", false);
                $("#p_range").prop("disabled", false);

            } else {
                document.getElementById('txt_fecha').value = 'n';
                $("#date_range").prop("disabled", true);
                $("#p_range").prop("disabled", true);
            }
            buscar();
        });

        $('#date_range').change(function() {
            _cfdi_.draw();
        });

        $('#p_range').change(function() {
            _cfdi_.draw();
        });

        $(document).keyup(function(event) {
            if (event.which === 13) {
                if (document.querySelector('input[type="text"]:focus') || document.querySelector(
                        'input[type="number"]:focus')) {
                    buscar();
                }
            }
        })

        function filtar_bancos(_select_){
            // console.log(_select_.options[_select_.selectedIndex].attributes.banco.value)
            $('#slc_banco option').each((_index_,_option_)=>{
                if(_select_.options[_select_.selectedIndex].attributes.banco.value==_option_.value){
                    $('#slc_banco').val(_option_.value)
                }
            })
        }
        function filtar_cuentas(_select_){
            // console.log(_select_.value)
            $('#slc_cuenta_bancaria option').each((_index_,_option_)=>{
                if(_select_.value=='cbx_select'){
                    _option_.style.display=''
                    $('#slc_cuenta_bancaria').val('cbx_select')
                }else{
                    if(_option_.attributes.banco.value==_select_.value){
                        _option_.style.display=''
                        $('#slc_cuenta_bancaria').val(_option_.value)
                    }else{
                        _option_.style.display='none'
                    }
                }
            })
        }

        var Reporte = (function() {
            var _delete = function(id) {
                swal({
                        text: "Estas seguro de querer eliminar este pago?",
                        buttons: true,
                        dangerMode: true,
                    })
                    .then((willDelete) => {
                        if (willDelete) {
                            var data2 = {
                                "id": id
                            }
                            request.sendData("POST", base_url + "/control/pagos/delete/" + id, data2, sendDataRequest);
                        }
                    });
            }

            var sendDataRequest = function(_request) {
                if (_request != undefined) {
                    try {
                        if (!_request.error) {
                            _cfdi_.ajax.reload();
                        } else {
                            if ((_request.error) == true) {
                                swal("", "Se produjo un error inesperado, Error: " + _request.msg, "error");
                            } else {

                                swal("", "Se produjo un error inesperado, Error: " + _request.msg + ", favor de comunicar este error al área de soporte en la siguiente dirección: soporte@dinvbox.com", "error");
                            }
                        }

                    } catch (error) {
                        swal("", "Se produjo un error inesperado, Error: " + error + ", favor de comunicar este error al área de soporte en la siguiente dirección: soporte@dinvbox.com", "error");
                    }
                }
            }

            return {
                "Delete": _delete
            }
        })();
    </script>
@endsection
@include('modal.nota_interna')