@extends('layouts.kaiadmin.master')

@section('template_title', 'Cajas Factura')

@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 d-flex justify-content-between">
            <h5>Cajas Factura</h5>
            <button class="btn btn-primary btn-sm" onclick="abrirCrear()">➕ Nueva Caja</button>
        </div>

        <div class="card-body">
            <table class="table table-striped" id="tablaCajas">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Caja</th>
                        <th>Descripción</th>
                        <th>Establecimiento</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<!-- MODAL -->
<div class="modal fade" id="modalCaja" tabindex="-1">
  <div class="modal-dialog">
    <form id="formCaja">
        @csrf
        <input type="hidden" id="method">
        <input type="hidden" id="caja_id">

        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="tituloModal"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <div class="mb-2">
                    <label>Caja Factura</label>
                    <input type="text" class="form-control" name="cajaFactura" id="cajaFactura">
                </div>

                <div class="mb-2">
                    <label>Descripción</label>
                    <input type="text" class="form-control" name="descripcionCaja" id="descripcionCaja">
                </div>

                <div class="mb-2">
                    <label>Establecimiento</label>
                    <select class="form-select" name="establecimientos_id" id="establecimientos_id">
                        <option value="">Seleccione un establecimiento</option>
                        @foreach($establecimientos as $e)
                            <option value="{{ $e->id }}">{{ $e->nombreComercial }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="modal-footer">
                <button class="btn btn-primary" type="submit">Guardar</button>
            </div>
        </div>
    </form>
  </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>
let tabla;
let modal = new bootstrap.Modal(document.getElementById('modalCaja'));

$(function () {

    tabla = $('#tablaCajas').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('cajas-facturas.index') }}",
        columns: [
            { data: null, render: (d,t,r,m) => m.row + 1 },
            {  data: 'cajaFactura',
                render: function (data) {
                    return data;
                }
            },
            { data: 'descripcionCaja' },
            { data: 'establecimiento.nombreComercial',
                defaultContent: '—' },
            {
                data: 'cajaFactura',
                orderable: false,
                render: id => `
                    <button class="btn btn-sm btn-success" onclick="editar('${id}')">Editar</button>
                    <button class="btn btn-sm btn-danger" onclick="eliminar('${id}')">Eliminar</button>
                `
            }
        ]
    });

    $('#formCaja').on('submit', guardar);
});

// ➕ CREAR
function abrirCrear() {
    $('#formCaja')[0].reset();
    $('#method').val('POST');
    $('#tituloModal').text('Crear Caja Factura');
    modal.show();
}

// ✏️ EDITAR (PRECARGA)
function editar(id) {
    fetch(`/cajas-facturas/${id}`)
        .then(r => r.json())
        .then(data => {
            $('#method').val('PUT');
            $('#caja_id').val(id);
            $('#cajaFactura').val(data.cajaFactura);
            $('#descripcionCaja').val(data.descripcionCaja);

            // 👇 esto selecciona el option correcto
            $('#establecimientos_id').val(data.establecimientos_id);

            $('#tituloModal').text('Editar Caja Factura');
            modal.show();
        });
}


// 💾 GUARDAR (CREATE / UPDATE)
function guardar(e) {
    e.preventDefault();

    let method = $('#method').val();
    let id = $('#caja_id').val();
    let url = method === 'POST'
        ? '/cajas-facturas'
        : `/cajas-facturas/${id}`;

    $.ajax({
        url,
        type: method === 'POST' ? 'POST' : 'PUT',
        data: $('#formCaja').serialize(),
        success: resp => {
            modal.hide();
            Swal.fire('Correcto', resp.message, 'success');
            tabla.ajax.reload();
        },
        error: err => {
            let errores = err.responseJSON.errors;
            let html = '<ul>';
            Object.values(errores).forEach(e => html += `<li>${e[0]}</li>`);
            html += '</ul>';

            Swal.fire({
                title: 'Errores de validación',
                html,
                icon: 'error'
            });
        }
    });
}

// 🗑️ ELIMINAR
function eliminar(id) {
    Swal.fire({
        title: '¿Eliminar?',
        text: 'No se puede deshacer',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Sí, eliminar'
    }).then(res => {
        if (res.isConfirmed) {
            $.ajax({
                url: `/cajas-facturas/${id}`,
                type: 'DELETE',
                data: { _token: '{{ csrf_token() }}' },
                success: resp => {
                    Swal.fire('Eliminado', resp.message, 'success');
                    tabla.ajax.reload();
                }
            });
        }
    });
}
</script>
@endsection