@extends('layouts.kaiadmin.master')

@section('template_title')
Departamentos
@endsection

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="container-fluid px-4 mt-4">

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="fw-bold">
            <i class="fas fa-map me-2"></i> Departamentos
        </h4>
        <button class="btn btn-primary" id="btnNuevo">
            <i class="fas fa-plus-circle"></i> Nuevo Departamento
        </button>
    </div>

    <div class="card shadow-sm">
        <div class="card-body table-responsive">
            <table class="table table-hover align-middle" id="tablaDepartamentos">
                <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>Departamento</th>
                        <th>País</th>
                        <th width="120">Acciones</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(function () {

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    /* =========================
       PAISES
    ========================= */
    let paises = [];
    $.get("{{ route('paises.list') }}", d => paises = d);

    /* =========================
       DATATABLE
    ========================= */
    let tabla = $('#tablaDepartamentos').DataTable({
        ajax: {
            url: "{{ route('departamentos.create') }}",
            dataSrc: ''
        },
        columns: [
            { data: 'id' },
            { data: 'departamento' },
            {
                data: 'paise',
                render: d => d ? d.pais : '-'
            },
            {
                data: null,
                orderable: false,
                render: d => `
                    <div class="btn-group">
                        <button class="btn btn-sm btn-outline-info btnVer"
                            data-departamento="${d.departamento}"
                            data-pais="${d.paise?.pais ?? ''}">
                            <i class="fas fa-eye"></i>
                        </button>

                        <button class="btn btn-sm btn-outline-warning btnEditar"
                            data-id="${d.id}"
                            data-departamento="${d.departamento}"
                            data-paises_id="${d.paises_id}">
                            <i class="fas fa-edit"></i>
                        </button>

                        <button class="btn btn-sm btn-outline-danger btnEliminar"
                            data-id="${d.id}">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                `
            }
        ]
    });

    /* =========================
       CREAR
    ========================= */
    $('#btnNuevo').click(function () {

        let options = paises.map(p =>
            `<option value="${p.id}">${p.pais}</option>`
        ).join('');

        Swal.fire({
            title: 'Nuevo Departamento',
            html: `
                <input id="departamento" class="swal2-input" placeholder="Departamento">
                <select id="paises_id" class="swal2-select">
                    <option value="">Seleccione país</option>
                    ${options}
                </select>
            `,
            showCancelButton: true,
            confirmButtonText: 'Guardar',
            preConfirm: () => {
                let departamento = $('#departamento').val();
                let paises_id = $('#paises_id').val();
                if (!departamento || !paises_id) {
                    Swal.showValidationMessage('Todos los campos son obligatorios');
                    return false;
                }
                return { departamento, paises_id };
            }
        }).then(r => {
            if (r.isConfirmed) {
                $.post("{{ route('departamentos.store') }}", r.value)
                    .done(() => {
                        Swal.fire('Guardado', '', 'success');
                        tabla.ajax.reload(null, false);
                    });
            }
        });
    });

    /* =========================
       VER
    ========================= */
    $(document).on('click', '.btnVer', function () {
        Swal.fire({
            title: 'Detalle Departamento',
            html: `
                <p><b>Departamento:</b> ${$(this).data('departamento')}</p>
                <p><b>País:</b> ${$(this).data('pais')}</p>
            `,
            icon: 'info'
        });
    });

    /* =========================
       EDITAR
    ========================= */
    $(document).on('click', '.btnEditar', function () {

        let id = $(this).data('id');
        let paisSel = $(this).data('paises_id');

        let options = paises.map(p =>
            `<option value="${p.id}" ${p.id == paisSel ? 'selected' : ''}>
                ${p.pais}
            </option>`
        ).join('');

        Swal.fire({
            title: 'Editar Departamento',
            html: `
                <input id="departamento" class="swal2-input"
                    value="${$(this).data('departamento')}">
                <select id="paises_id" class="swal2-select">
                    ${options}
                </select>
            `,
            showCancelButton: true,
            confirmButtonText: 'Actualizar',
            preConfirm: () => ({
                departamento: $('#departamento').val(),
                paises_id: $('#paises_id').val()
            })
        }).then(r => {
            if (r.isConfirmed) {
                $.ajax({
                    url: "departamentos/" + id,
                    type: 'PUT',
                    data: r.value,
                    success: () => {
                        Swal.fire('Actualizado', '', 'success');
                        tabla.ajax.reload(null, false);
                    }
                });
            }
        });

    });

    /* =========================
       ELIMINAR
    ========================= */
    $(document).on('click', '.btnEliminar', function () {

        let id = $(this).data('id');

        Swal.fire({
            title: '¿Eliminar?',
            text: 'No se puede deshacer',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545'
        }).then(r => {
            if (r.isConfirmed) {
                $.ajax({
                    url: "departamentos/" + id,
                    type: 'DELETE',
                    success: () => {
                        Swal.fire('Eliminado', '', 'success');
                        tabla.ajax.reload(null, false);
                    }
                });
            }
        });

    });

});
</script>
@endsection