@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('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">
                            <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">RFC
                                        </th>
                                        <th class="sorting" tabindex="1" aria-controls="example" rowspan="1"
                                            colspan="1">Razón social
                                        </th>
                                        <th class="sorting" tabindex="2" aria-controls="example" rowspan="1"
                                            colspan="1">
                                            UUID</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">
                                            Folio</th>

                                        <th class="sorting" tabindex="5" aria-controls="example" rowspan="1"
                                            colspan="1">
                                            Fecha </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">
                                            parcialidad</th>

                                        <th class="sorting" tabindex="8" aria-controls="example" rowspan="1"
                                            colspan="1">
                                            Tipo de documento</th>

                                        <th class="sorting" tabindex="9" aria-controls="example" rowspan="1"
                                            colspan="1">
                                            Estatus</th>

                                        <th class="sorting" tabindex="10" aria-controls="example" rowspan="1"
                                            colspan="1">
                                            Notas</th>

                                        <th class="sorting" tabindex="11" aria-controls="example" rowspan="1"
                                            colspan="1">
                                            Método de pago</th>

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

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

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

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

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @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>
    <script>
        $(document).ready(function() {
            $('#tbl_cfdi').DataTable({
                "order": [
                    [5, "desc"]
                ],
                "columnDefs": [{
                    'visible': false,
                    'targets': [1, 10]
                }],
                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": base_url + "/pagos?uuid={{ $uuid }}",
                "dataType": "JSON",
                "type": "POST",
                "columns": [{
                        "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": "uuid"
                    },
                    {
                        "data": "serie"
                    },
                    {
                        "data": "folio"
                    },
                    {
                        "data": "fecha",
                        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": "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": "parcialidad"
                    },
                    {
                        "data": "des_titulo_doc",
                        render: function(data, type) {
                            if (data == 'Carta Porte: Autotransporte') {
                                return 'Carta Porte'
                            } else {
                                return data
                            }
                        }
                    },
                    {
                        "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: 'notas',
                        name: 'Notas',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'c_MetodoPago',
                        name: 'Metodo_pago',
                        orderable: false,
                        "visible": false
                    },
                    {
                        "data": "created_at",
                        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;
                        },
                        "visible": false
                    },
                    {
                        "data": "updated_at",
                        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;
                        },
                        "visible": false
                    },
                    {
                        data: 'action',
                        name: 'Acciones',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });
    </script>
@endsection
@include('modal.nota_interna')