@extends('layouts.kaiadmin.master')

@section('template_title', 'Asignación de Cajas')

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
@endsection

@section('content')
<div class="container-fluid">
    <div class="card">
        <div class="card-header">
            <h5>Asignación de Cajas a Receptores</h5>
        </div>

        <div class="card-body">
            <table class="table table-striped table-bordered" id="tablaCajas" style="width:100%">
                <thead>
                    <tr>
                        <th class="text-center">Caja</th>
                        <th>Receptor</th>
                        <th class="text-center">Acción</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection



@section('js')
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(function () {

    /* ======================================
     * DATATABLE AJAX
     * ====================================== */
    const tabla = $('#tablaCajas').DataTable({
        ajax: {
            url: '/cajas/datatable',
            type: 'GET'
        },
        processing: true,
        deferRender: true,
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.8/i18n/es-ES.json'
        },
        columns: [
            {
                data: 'caja',
                className: 'text-center fw-bold'
            },
            {
                data: 'receptor',
                defaultContent: '— Sin asignar —'
            },
            {
                data: 'caja',
                orderable: false,
                searchable: false,
                className: 'text-center',
                render: function (data) {
                    return `
                        <button
                            type="button"
                            class="btn btn-sm btn-primary btnAsignar"
                            data-caja="${data}">
                            Asignar / Cambiar
                        </button>
                    `;
                }
            }
        ]
    });

    /* ======================================
     * CLICK ASIGNAR
     * ====================================== */
    $('#tablaCajas').on('click', '.btnAsignar', function () {

        const caja = $(this).data('caja');

        $.get('/cajas/receptores', { caja })
            .done(function (receptores) {

                let options = '<option value="">Seleccione receptor</option>';

                receptores.forEach(r => {

                    let nombre = r.nombre;

                    if (r.caja_asignada && r.caja_asignada !== caja) {
                        nombre += ` (Caja ${r.caja_asignada})`;
                    }

                    options += `
                        <option
                            value="${r.usrSystemCod}"
                            data-caja="${r.caja_asignada ?? ''}">
                            ${nombre}
                        </option>
                    `;
                });

                Swal.fire({
                    title: `Asignar Caja ${caja}`,
                    html: `<select id="receptorSelect" class="form-select">${options}</select>`,
                    showCancelButton: true,
                    confirmButtonText: 'Guardar',
                    cancelButtonText: 'Cancelar',
                    focusConfirm: false,

                    preConfirm: async () => {

                        const select = document.getElementById('receptorSelect');

                        if (!select.value) {
                            Swal.showValidationMessage('Debe seleccionar un receptor');
                            return false;
                        }

                        const cajaActual = select.selectedOptions[0].dataset.caja;

                        if (cajaActual && cajaActual !== caja) {
                            const confirmacion = await Swal.fire({
                                title: 'Mover receptor',
                                text: `Este receptor está asignado a la caja ${cajaActual}. ¿Desea moverlo?`,
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonText: 'Sí, mover',
                                cancelButtonText: 'Cancelar'
                            });

                            if (!confirmacion.isConfirmed) return false;
                        }

                        return select.value;
                    }
                })
                .then(result => {

                    if (!result.value) return;

                    $.post('/cajas/asignar', {
                        _token: '{{ csrf_token() }}',
                        cajaFactura: caja,
                        usrSystemCod: result.value
                    })
                    .done(function () {

                        // 🔄 RECARGAR TABLA SIN PERDER PÁGINA
                        tabla.ajax.reload(null, false);

                        Swal.fire(
                            'Asignado',
                            'La caja fue asignada correctamente',
                            'success'
                        );
                    })
                    .fail(function (xhr) {
                        Swal.fire(
                            'Error',
                            xhr.responseJSON?.message ?? 'Error al asignar',
                            'error'
                        );
                    });
                });
            });
    });

});
</script>
@endsection