@extends('layouts.kaiadmin.master')

@section('template_title')
    Código Postal
@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-4">
        <h4 class="fw-bold mb-0">
            <i class="fas fa-map-marker-alt me-2"></i>
            Gestión de Códigos Postales
        </h4>
        <button class="btn btn-primary" id="btnNuevo">
            <i class="fas fa-plus-circle me-1"></i> Nuevo Código Postal
        </button>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle" id="tablaCodigoPostal">
                    <thead class="table-light">
                        <tr>
                            <th>Codigo Postal</th>
                            <th>Área</th>
                            <th>Municipio</th>
                            <th width="150">Acciones</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </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')
        }
    });

    /* =========================
       CARGAR MUNICIPIOS 1 SOLA VEZ
    ========================= */
    let municipios = [];

    $.get("{{ route('municipios.list') }}", function (data) {
    municipios = data;
    });


    /* =========================
       DATATABLE
    ========================= */
    let tabla = $('#tablaCodigoPostal').DataTable({
        ajax: {
            url: "{{ route('codigopostal.create') }}",
            dataSrc: ''
        },
        processing: true,
        deferRender: true,
        columns: [
            {
                data: 'codigoPostal',
                render: data => `<span class="badge bg-light text-dark">${data}</span>`
            },
            { data: 'area' },
            {
                data: 'municipio',
                render: data => data?.municipio ?? '-'
            },
            {
                data: null,
                orderable: false,
                searchable: false,
                render: function (data) {

                    let municipioNombre = data.municipio?.municipio ?? '';
                    let municipioId = data.municipios_id ?? '';

                    return `
                        <div class="btn-group">
                            <button class="btn btn-sm btn-outline-info btnVer"
                                data-id="${data.codigoPostal}"
                                data-area="${data.area}"
                                data-municipio="${municipioNombre}">
                                <i class="fas fa-eye"></i>
                            </button>

                            <button class="btn btn-sm btn-outline-warning btnEditar"
                                data-id="${data.codigoPostal}"
                                data-area="${data.area}"
                                data-municipios_id="${municipioId}">
                                <i class="fas fa-edit"></i>
                            </button>

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

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

        let options = municipios.map(m =>
            `<option value="${m.id}">${m.municipio}</option>`
        ).join('');

        Swal.fire({
            title: 'Nuevo Código Postal',
            html: `
                <input id="codigoPostal" class="swal2-input" placeholder="Código Postal">
                <input id="area" class="swal2-input" placeholder="Área">
                <select id="municipios_id" class="swal2-select">
                    <option value="">Seleccione municipio</option>
                    ${options}
                </select>
            `,
            showCancelButton: true,
            confirmButtonText: 'Guardar',
            preConfirm: () => {
                let codigoPostal = $('#codigoPostal').val();
                let area = $('#area').val();
                let municipios_id = $('#municipios_id').val();

                if (!codigoPostal || !area || !municipios_id) {
                    Swal.showValidationMessage('Todos los campos son obligatorios');
                    return false;
                }

                return { codigoPostal, area, municipios_id };
            }
        }).then(result => {
            if (result.isConfirmed) {
                $.post("{{ route('codigopostal.store') }}", result.value)
                    .done(() => {
                        Swal.fire('Guardado', '', 'success');
                        tabla.ajax.reload(null, false);
                    });
            }
        });
    });

    /* =========================
       VER (INSTANTÁNEO)
    ========================= */
    $(document).on('click', '.btnVer', function () {

        Swal.fire({
            title: 'Detalle Código Postal',
            html: `
                <p><b>Código Postal:</b> ${$(this).data('id')}</p>
                <p><b>Área:</b> ${$(this).data('area')}</p>
                <p><b>Municipio:</b> ${$(this).data('municipio')}</p>
            `,
            icon: 'info'
        });
    });

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

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

        let options = municipios.map(m =>
            `<option value="${m.id}" ${m.id == municipios_id ? 'selected' : ''}>
                ${m.municipio}
            </option>`
        ).join('');

        Swal.fire({
            title: 'Editar Código Postal',
            html: `
                <p><b>Código Postal:</b> #${id}</p>
                <input id="area" class="swal2-input" value="${area}">
                <select id="municipios_id" class="swal2-select">
                    ${options}
                </select>
            `,
            showCancelButton: true,
            confirmButtonText: 'Actualizar',
            preConfirm: () => {
                return {
                    area: $('#area').val(),
                    municipios_id: $('#municipios_id').val()
                }
            }
        }).then(result => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "codigopostal/" + id,
                    type: 'PUT',
                    data: result.value,
                    success: function () {
                        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: 'Esta acción no se puede deshacer',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Eliminar',
            confirmButtonColor: '#dc3545'
        }).then(result => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "codigopostal/" + id,
                    type: 'DELETE',
                    success: function () {
                        Swal.fire('Eliminado', '', 'success');
                        tabla.ajax.reload(null, false);
                    }
                });
            }
        });
    });

});
</script>
@endsection