@extends('layouts.kaiadmin.master')

@section('template_title')
Departamentos Empresa
@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-building me-2"></i> Departamentos Empresa
        </h4>

        <button class="btn btn-primary" id="btnNuevo">
            <i class="fas fa-plus-circle"></i> Nuevo
        </button>
    </div>

    <div class="card shadow-sm">
        <div class="card-body table-responsive">
            <table class="table table-hover align-middle" id="tablaDeptosEmpresa">
                <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>Nombre</th>
                        <th>Sigla</th>
                        <th>Descripción</th>
                        <th width="130">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')
        }
    });

    /* =========================
       DATATABLE (CLIENT SIDE)
    ========================= */
    let tabla = $('#tablaDeptosEmpresa').DataTable({
        ajax: {
            url: "{{ route('deptos-empresas.create') }}",
            dataSrc: ''
        },
        columns: [
            { data: 'id' },
            { data: 'deptoNombre' },
            { data: 'deptoSigla' },
            { data: 'deptoDescripcion' },
            {
                data: null,
                orderable: false,
                render: d => `
                    <div class="btn-group">
                        <button class="btn btn-sm btn-outline-info btnVer"
                            data-nombre="${d.deptoNombre}"
                            data-sigla="${d.deptoSigla}"
                            data-descripcion="${d.deptoDescripcion ?? ''}">
                            <i class="fas fa-eye"></i>
                        </button>

                        <button class="btn btn-sm btn-outline-warning btnEditar"
                            data-id="${d.id}"
                            data-nombre="${d.deptoNombre}"
                            data-sigla="${d.deptoSigla}"
                            data-descripcion="${d.deptoDescripcion ?? ''}">
                            <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 () {
        Swal.fire({
            title: 'Nuevo Departamento',
            html: `
                <input id="nombre" class="swal2-input" placeholder="Nombre">
                <input id="sigla" class="swal2-input" placeholder="Sigla">
                <textarea id="descripcion" class="swal2-textarea" placeholder="Descripción"></textarea>
            `,
            showCancelButton: true,
            confirmButtonText: 'Guardar',
            preConfirm: () => {
                let nombre = $('#nombre').val();
                let sigla = $('#sigla').val();

                if (!nombre || !sigla) {
                    Swal.showValidationMessage('Nombre y Sigla son obligatorios');
                    return false;
                }

                return {
                    deptoNombre: nombre,
                    deptoSigla: sigla,
                    deptoDescripcion: $('#descripcion').val()
                };
            }
        }).then(r => {
            if (r.isConfirmed) {
                $.post("{{ route('deptos-empresas.store') }}", r.value)
                    .done(() => {
                        Swal.fire('Guardado', '', 'success');
                        tabla.ajax.reload(null, false);
                    });
            }
        });
    });

    /* =========================
       VER
    ========================= */
    $(document).on('click', '.btnVer', function () {
        Swal.fire({
            title: 'Detalle',
            html: `
                <p><b>Nombre:</b> ${$(this).data('nombre')}</p>
                <p><b>Sigla:</b> ${$(this).data('sigla')}</p>
                <p><b>Descripción:</b><br>${$(this).data('descripcion')}</p>
            `,
            icon: 'info'
        });
    });

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

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

        Swal.fire({
            title: 'Editar Departamento',
            html: `
                <input id="nombre" class="swal2-input" value="${$(this).data('nombre')}">
                <input id="sigla" class="swal2-input" value="${$(this).data('sigla')}">
                <textarea id="descripcion" class="swal2-textarea">${$(this).data('descripcion')}</textarea>
            `,
            showCancelButton: true,
            confirmButtonText: 'Actualizar',
            preConfirm: () => ({
                deptoNombre: $('#nombre').val(),
                deptoSigla: $('#sigla').val(),
                deptoDescripcion: $('#descripcion').val()
            })
        }).then(r => {
            if (r.isConfirmed) {
                $.ajax({
                    url: "deptos-empresas/" + 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: "deptos-empresas/" + id,
                    type: 'DELETE',
                    success: () => {
                        Swal.fire('Eliminado', '', 'success');
                        tabla.ajax.reload(null, false);
                    }
                });
            }
        });
    });

});
</script>
@endsection