@push('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.6/css/responsive.bootstrap4.min.css">
    <style>
        .select-info {
            display: block !important;
            margin-left: 0 !important;
        }
    </style>
@endpush
<div class="tabs_item">
    <div class="row justify-content-between">
        {{-- <div class="col-md-6 col-12">
            <div class="form-group d-flex align-items-center">
                Correo: <input id="email_tarjetahabiente_cancun" name="email_tarjetahabiente_cancun" placeholder="correo del tarjetahabiente" style="width: 290px;"
                class="ml-3 form-control form-control-sm" type="email" required>
            </div>
        </div>
        <div class="col-md-6 col-12">
            <div class="form-group d-flex align-items-center">
                Teléfono: <input id="phone_tarjetahabiente_cancun" name="phone_tarjetahabiente_cancun" placeholder="teléfono del tarjetahabiente" style="width: 290px;"
                class="ml-3 form-control form-control-sm" type="number" required>
            </div>
        </div> --}}
    </div>
    <div class="box-desplegable">
        <h4 class="encabezado-box-desplegable"> <span class="icon-i-documento-1 ico-box-desplegable"></span>
            Selecciona los contratos a pagar</h4>

        <div class="contenido-box-desplegable">
            <div class="table-responsive-sm">
                <table id="contratosCancun" class="table table-width-100" style="width: 100%">
                    <thead>
                        <tr>
                            <th>Contrato</th>
                            <th>Nombre</th>
                            <th>Cliente</th>
                            <th>Ubicación</th>
                            <th>Saldo</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($contratosCancun as $contrato)
                            {{-- SOLO CONTRATOS CON SALDO A PAGAR --}}
                            @if ((float) $contrato->sld > 0)
                                <tr>
                                    <td>{{ $contrato->id_contrato }}</td>
                                    <td>{{ $contrato->nombre }}</td>
                                    <td>{{ $contrato->cliente }}</td>
                                    <td>{{ $contrato->vIDCENOPR_DESC }}</td>
                                    <td>{{ $contrato->sld }}</td>
                                </tr>
                            @endif
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="espacio"></div>
    <div class="row" class="btn-pagar-multiple">
        <div class="col-md-12 text-right">
            <a class="btn btn-sm btn-secondary" id="pagar-cancun" href="#">
                <span class="icon-i-dinero"></span>
                Pagar seleccionados
            </a>
        </div>
    </div>
</div>
<div class="tabs_item">


    <div class="box-desplegable">
        <h4 class="encabezado-box-desplegable"> <span class="icon-i-documento-1 ico-box-desplegable"></span>
            Selecciona los contratos a pagar </h4>
        <div class="contenido-box-desplegable">
            <div class="table-responsive-sm">
                <table id="contratosPlaya" class="table table-width-100" style="width: 100%">
                    <thead>
                        <tr>
                            <th>Contrato</th>
                            <th>Nombre</th>
                            <th>Cliente</th>
                            <th>Ubicación</th>
                            <th>Saldo</th>
                        </tr>
                    </thead>
                    <tbody>

                        @foreach ($contratosPlaya as $contrato)
                            {{-- SOLO CONTRATOS CON SALDO A PAGAR --}}

                            @if ((float) $contrato->sld > 0)
                                <tr>
                                    <td>{{ $contrato->id_contrato }}</td>
                                    <td>{{ $contrato->nombre }}</td>
                                    <td>{{ $contrato->cliente }}</td>
                                    <td>{{ $contrato->vIDCENOPR_DESC }}</td>
                                    <td>{{ $contrato->sld }}</td>
                                </tr>
                            @endif
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="espacio"></div>
    <div class="row" class="btn-pagar-multiple">
        <div class="col-md-12 text-right">
            <a class="btn btn-sm btn-secondary" id="pagar-playa" href="#">
                <span class="icon-i-dinero"></span>
                Pagar seleccionados
            </a>
        </div>
    </div>
</div>



@push('scripts')
    {{-- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css"> --}}
    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css">

    {{-- <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script> --}}
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.6/js/responsive.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
    <script>
        let mitForm = document.querySelector('#mitForm');
        let languageTrad = {
            "lengthMenu": "Mostrar _MENU_ registros por página",
            "zeroRecords": "No se encontraron registros",
            "info": "Mostrando _PAGE_ de _PAGES_ páginas",
            "infoEmpty": "No hay registros disponibles",
            "infoFiltered": "(filtrado de _MAX_ registros totales)",
            "search": "Buscar: ",
            "selected": "Contratos seleccionados",
            "paginate": {
                "next": "Siguiente",
                "previous": "Anterior"
            },
            select: {
                rows: "%d contratos seleccionados"
            }
        }
        let token = '{{ csrf_token() }}';
        $(document).ready(function() {
            var events = $('#events'); // Servirá para mostrar la suma al selecccionar un elemento -> proximamente
            var tablePlaya = $('#contratosPlaya').DataTable({
                "order": [],
                responsive: true,
                autoWith: false,
                "language": languageTrad,
                select: {
                    style: 'multi'
                }

            });

            let btnPagarPlaya = document.querySelector('#pagar-playa');
            btnPagarPlaya.addEventListener('click', (el) => { // listener para click pagar seleccionados
                el.preventDefault();
                let contratosSelPlaya = tablePlaya.rows({
                    selected: true
                }).data().toArray(); //obtiene los registros seleccionados en forma de array


                if (contratosSelPlaya.length > 1) {
                    let totalPagar = 0;

                    contratosSelPlaya.forEach(element => {
                        totalPagar += parseFloat(element[4]);

                    });
                    totalPagar = totalPagar.toFixed(2);

                    var data = {
                        _token: token,
                        contratos: contratosSelPlaya,
                        idcenopr: 5,
                        total: totalPagar
                    };
                    let form = document.createElement("form");
                    form.setAttribute("method", "POST");
                    form.setAttribute("action", "{{ route('contratos.pagarMultiple') }}");
                    form.style.display = "none";

                    for (let key in data) {
                        if (data.hasOwnProperty(key)) {
                            if (key === "contratos") {
                                data.contratos.forEach((contrato, index) => {
                                    contrato.forEach((valor, i) => {
                                        let input = document.createElement("input");
                                        input.setAttribute("type", "hidden");
                                        input.setAttribute("name",
                                            `contratos[${index}][${i}]`);
                                        input.setAttribute("value", valor);
                                        form.appendChild(input);
                                    });
                                });
                            } else {
                                let input = document.createElement("input");
                                input.setAttribute("type", "hidden");
                                input.setAttribute("name", key);
                                input.setAttribute("value", data[key]);
                                form.appendChild(input);
                            }
                        }
                    }

                    document.body.appendChild(form);
                    form.submit();

                } else {
                    alert('Debes seleccionar más de 1 contrato');
                }
            });

            var tableCancun = $('#contratosCancun').DataTable({
                "order": [],
                responsive: true,
                autoWith: false,
                "language": languageTrad,
                select: {
                    style: 'multi'
                }
            });
            let btnPagarCancun = document.querySelector('#pagar-cancun');
            btnPagarCancun.addEventListener('click', (el) => { // listener para click pagar seleccionados
                el.preventDefault();
                let contratosSelCancun = tableCancun.rows({
                    selected: true
                }).data().toArray(); //obtiene los registros seleccionados en forma de array
                let totalPagar = 0;

                contratosSelCancun.forEach(element => {
                    totalPagar += parseFloat(element[4]);
                });

                if (contratosSelCancun.length > 1) {
                    totalPagar = totalPagar.toFixed(2);
                    var data = {
                        _token: token,
                        contratos: contratosSelCancun,
                        idcenopr: 1,
                        total: totalPagar
                    };

                    let form = document.createElement("form");
                    form.setAttribute("method", "POST");
                    form.setAttribute("action", "{{ route('contratos.pagarMultiple') }}");
                    form.style.display = "none";

                    for (let key in data) {
                        if (data.hasOwnProperty(key)) {
                            if (key === "contratos") {
                                data.contratos.forEach((contrato, index) => {
                                    contrato.forEach((valor, i) => {
                                        let input = document.createElement("input");
                                        input.setAttribute("type", "hidden");
                                        input.setAttribute("name",
                                            `contratos[${index}][${i}]`);
                                        input.setAttribute("value", valor);
                                        form.appendChild(input);
                                    });
                                });
                            } else {
                                let input = document.createElement("input");
                                input.setAttribute("type", "hidden");
                                input.setAttribute("name", key);
                                input.setAttribute("value", data[key]);
                                form.appendChild(input);
                            }
                        }
                    }

                    document.body.appendChild(form);
                    form.submit();

                } else {
                    alert('Debes seleccionar más de 1 contrato');
                }
            });


        });
        // Función para formatear un string de formato: $1,3013.30 a sin formato para parsear como float 13013.30
        function convierteFloat(dato) {
            dato = dato.replace(/[^\d\.\-]/g, "");
            return dato;
        }

        function isEmail(email) {
            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            return regex.test(email);
        }
    </script>
@endpush