@extends('layouts.kaiadmin.master')

@section('template_title')
    Con Categoria Servicio
@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-layer-group me-2"></i>
            Categoría de Servicio
        </h4>
        <button class="btn btn-primary" id="btnNuevo">
            <i class="fas fa-plus-circle me-1"></i> Nueva Categoría
        </button>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle" id="tablaCategoria">
                    <thead class="table-light">
                        <tr>
                            <th>Código</th>
                            <th>Descripción</th>
                            <th>Observación</th>
                            <th>UsrSerCategoria</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')
        }
    });

    /* =========================
       DATATABLE
    ========================= */
    let tabla = $('#tablaCategoria').DataTable({
        ajax: {
            url: "{{ route('concategoriaservicio.create') }}",
            dataSrc: ''
        },
        processing: true,
        deferRender: true,
        columns: [
            { data: 'CatCotServicio' },
            { data: 'CatDescripcion' },
            { data: 'CatObservacion' },
            { data: 'UsrSerCategoria' },
            {
                data: null,
                orderable: false,
                searchable: false,
                render: function (data) {

                    return `
                        <div class="btn-group">
                            <button class="btn btn-sm btn-outline-info btnVer"
                                data-id="${data.CatCotServicio}"
                                data-descripcion="${data.CatDescripcion}"
                                data-observacion="${data.CatObservacion}"
                                data-usrsercategoria="${data.UsrSerCategoria}">
                                <i class="fas fa-eye"></i>
                            </button>

                            <button class="btn btn-sm btn-outline-warning btnEditar"
                                data-id="${data.CatCotServicio}"
                                data-descripcion="${data.CatDescripcion}"
                                data-observacion="${data.CatObservacion}"
                                data-usrsercategoria="${data.UsrSerCategoria}">
                                <i class="fas fa-edit"></i>
                            </button>

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

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

        Swal.fire({
            title: 'Nueva Categoría',
            html: `
                <input id="CatCotServicio" class="swal2-input" placeholder="Código">
                <input id="CatDescripcion" class="swal2-input" placeholder="Descripción">
                <input id="CatObservacion" class="swal2-input" placeholder="Observación">
                <input id="UsrSerCategoria" class="swal2-input" placeholder="Categoria">
            `,
            showCancelButton: true,
            confirmButtonText: 'Guardar',
            preConfirm: () => {
                let data = {
                    CatCotServicio: $('#CatCotServicio').val(),
                    CatDescripcion: $('#CatDescripcion').val(),
                    CatObservacion: $('#CatObservacion').val(),
                    UsrSerCategoria: $('#UsrSerCategoria').val()
                };

                if (!data.CatCotServicio || !data.CatDescripcion) {
                    Swal.showValidationMessage('Campos obligatorios');
                    return false;
                }

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

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

        Swal.fire({
            title: 'Detalle Categoría',
            html: `
                <p><b>Código:</b> ${$(this).data('id')}</p>
                <p><b>Descripción:</b> ${$(this).data('descripcion')}</p>
                <p><b>Observación:</b> ${$(this).data('observacion')}</p>
                <p><b>UsrSerCategoria:</b> ${$(this).data('usrsercategoria')}</p>
            `,
            icon: 'info'
        });
    });

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

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

        Swal.fire({
            title: 'Editar Categoría',
            html: `
                <p><b>Código:</b> ${id}</p>
                <input id="CatDescripcion" class="swal2-input" value="${$(this).data('descripcion')}">
                <input id="CatObservacion" class="swal2-input" value="${$(this).data('observacion')}">
                <input id="UsrSerCategoria" class="swal2-input" value="${$(this).data('usrsercategoria')}">
            `,
            showCancelButton: true,
            confirmButtonText: 'Actualizar',
            preConfirm: () => {
                return {
                    CatDescripcion: $('#CatDescripcion').val(),
                    CatObservacion: $('#CatObservacion').val(),
                    UsrSerCategoria: $('#UsrSerCategoria').val()
                }
            }
        }).then(result => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "concategoriaservicio/" + 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,
            confirmButtonColor: '#dc3545'
        }).then(result => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "concategoriaservicio/" + id,
                    type: 'DELETE',
                    success: function () {
                        Swal.fire('Eliminado', '', 'success');
                        tabla.ajax.reload(null, false);
                    }
                });
            }
        });
    });

});
</script>
@endsection