@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')
<style>
    @keyframes loading {
        0%, 100% {
            margin-top: 25px;
            height: 10px;
        }

        50%{
            margin-top: 0px;
            height: 50px;
        }
    }

        .loader > ul {
        display: inline-flex;
        margin: 0;
        padding: 0;
        list-style: none;
        gap: 5px;
        }

        .loader > li {
        background-color: var(--color-primary);
        width: 10px;
        height: 10px;
        animation: loading 1s ease-in-out infinite;
        }

        .loader > li:nth-child(1) {
        animation-delay: 0s;
        }

        .loader > li:nth-child(2) {
        animation-delay: -0.2s;
        }

        .loader > li:nth-child(3) {
        animation-delay: -0.4s;
        }

        .loader > li:nth-child(4) {
        animation-delay: -0.6s;
        }

        .loader > li:nth-child(5) {
        animation-delay: -0.8s;
        }
</style>
  

    @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('id_cotizacion'))
        @include('cotizaciones.store')
    @endif
    @if (empty(session('id_cotizacion')))
        @can('cotizacion.create')
            <div class="animated fadeIn">
                <!-- /Widgets -->
                    <div class="h4 mb-0" style="margin-top: 0px;text-align: end;padding-bottom: 15px;">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="{{ route('cotizaciones.create') }}" class="btn btn-primary">
                            <i class="fa fa-plus"></i>&nbsp;&nbsp; Nueva cotización&nbsp;&nbsp;
                        </a>
                    </div>
                <!-- .row -->
            </div>
            <div class="loader">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <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"  style="display: none"><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-2"><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_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"><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 class="col-2"></div>
                                    <div class="col-2 mt-2">
                                        <input type="checkbox" class="" id="chk_fecha">
                                        <input type="hidden" id="txt_fecha" value="x">
                                        <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 value="{{ Carbon\Carbon::parse($hoy)->format('d-m-Y') }}">
                                    </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">
                                                Fecha
                                            </th>
                                            <th class="sorting" tabindex="1" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Fecha maxima de vigencia
                                            </th>
                                            <th class="sorting" tabindex="2" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Serie</th>
                                            <th class="sorting" tabindex="3" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Folio</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">
                                                Total </th>
                                            <th class="sorting" tabindex="7" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Estado</th>

                                            <th class="sorting" tabindex="8" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Notas</th>
                                            <th class="sorting" tabindex="9" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Fecha Alta</th>

                                            <th class="sorting" tabindex="10" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Ultima Modificación</th>

                                            <th class="" tabindex="11" aria-controls="example" rowspan="1"
                                                colspan="1">
                                                Acciones</th>
                                        </tr>

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

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

    @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_;
        const _meses_= {
           '01':'enero',
            '02':'febrero',
            '03':'marzo',
            '04':'abril',
            '05':'mayo',
            '06':'junio',
            '07':'julio',
            '08':'agosto',
            '09':'septiembre',
            '10':'octubre',
            '11':'noviembre',
            '12':'diciembre'
        };
        $(document).ready(function() {
            _cfdi_ = $('#tbl_cfdi').DataTable({
                lengthMenu: [
                    [25, 50, 100],
                    [25, 50, 100],
                ],
                
                "columnDefs": [{
                    'visible': false,
                    'targets': [9]
                }],
                buttons: [{
                        extend: 'copy',
                        className: 'btn buttom_datatables'
                    },
                    {
                        extend: 'excel',
                        className: 'btn buttom_datatables'
                    },
                    {
                        extend: 'colvis',
                        className: 'btn buttom_datatables'
                    },
                ],
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: {
                    url: "{{ route('datatable_table_cotizacion') }}",
                    data: function(d) {
                            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()
                    },
                    type: 'post',
                },
                dataType: "JSON",
                "order": [
                    [1, "asc"]
                ],
                searching: false,
                "columns": [{
                        "data": "fecha",
                        render: function name(_fecha_) {
                            try {
                                _fecha_=_fecha_.split(' ')
                                _fecha_mes_=(_fecha_[0]).split('-')
                                _fecha_mes_=_fecha_mes_[0]+' de '+_meses_[_fecha_mes_[1]]+' de '+_fecha_mes_[2]
                                return '<p><i class="lnr-calendar-full"> </i>'+_fecha_mes_+'</p>';
                            } catch (error) {
                                return _fecha_
                            }
                        }
                    },
                    {
                        "data": "fecha_vigencia_fin",
                        render: function name(_fecha_) {
                            try {
                                _fecha_=_fecha_.split(' ')
                                _fecha_mes_=(_fecha_[0]).split('-')
                                _fecha_mes_=_fecha_mes_[0]+' de '+_meses_[_fecha_mes_[1]]+' de '+_fecha_mes_[2]
                                return '<p><i class="lnr-calendar-full"> </i>'+_fecha_mes_+'</p>';
                            } catch (error) {
                                return _fecha_
                            }
                        }
                    },
                    {
                        "data": "serie"
                    },
                    {
                        "data": "folio"
                    },
                    {
                        "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": "total",
                        render: function(data, type) {
                            var number = $.fn.dataTable.render.number(',', '.', 2, '$ ').display(
                                data);
                            if (type === 'display') {
                                let color = 'green';
                                return '<span style="color:' + color + '">' + number + '</span>';
                            }
                            return number;
                        }
                    },
                    {
                        "data": "status",
                        render: function(data, type) {
                            if (type === 'display') {
                                let status = '';
                                if (data == 'V') {
                                    return '<span class="card-title text-danger" style="font-size:10px!important"> Vencida </span>';
                                } else if (data == 'P') {
                                    return '<span class="card-title text-warning" style="font-size:10px!important"> Proceso </span>';
                                } else if (data == 'T') {
                                    return '<span class="card-title text-succes" style="font-size:10px!important"> Timbrada </span>';
                                }else {
                                    status = 'Vigente';
                                }
                                return status;
                            }
                            return data;
                        }
                    },
                    {
                        data: 'notas',
                        name: 'Notas',
                        orderable: false,
                        searchable: false
                    },
                    {
                        "data": "created_at",
                        render: function name(_fecha_) {
                            _fecha_=(_fecha_.split('.000000Z')[0]).split('T')
                            _fecha_mes_=(_fecha_[0]).split('-')
                            _fecha_mes_=_fecha_mes_[0]+' de '+_meses_[_fecha_mes_[1]]+' de '+_fecha_mes_[2]
                            return '<p><i class="lnr-calendar-full"> </i>'+_fecha_mes_+'</p>'+
                                    '<p> <i class="lnr-clock"> </i>'+_fecha_[1]+'</p>';
                        },
                        "visible": false
                    },
                    {
                        "data": "updated_at",
                        render: function name(_fecha_) {
                            _fecha_=(_fecha_.split('.000000Z')[0]).split('T')
                            _fecha_mes_=(_fecha_[0]).split('-')
                            _fecha_mes_=_fecha_mes_[0]+' de '+_meses_[_fecha_mes_[1]]+' de '+_fecha_mes_[2]
                            return '<p><i class="lnr-calendar-full"> </i>'+_fecha_mes_+'</p>'+
                                    '<p> <i class="lnr-clock"> </i>'+_fecha_[1]+'</p>';
                        },
                        "visible": false
                    },
                    {
                        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() {
            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() {
            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();
                }
            }
        })

    </script>
@endsection
@include('modal.nota_interna')