@extends('layouts.kaiadmin.master')

@section('template_title')
    Con Voltio Servicio
@endsection

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

<div class="container-fluid px-4 mt-4">
    {{-- Header simple --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold mb-0">
            <i class="fas fa-bolt me-2 text-primary"></i> Gestión Voltio Servicio
        </h4>
        <button class="btn btn-primary" id="btnNuevo">
            <i class="fas fa-plus-circle me-1"></i> Nuevo Voltio
        </button>
    </div>

    {{-- Card simple --}}
    <div class="card shadow-sm">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle" id="tablaVoltio">
                    <thead class="table-light">
                        <tr>
                            <th>Código</th>
                            <th>Descripción</th>
                            <th>Observación</th>
                            <th class="text-center">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- DataTables llenará esto -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Modal simple para Crear/Editar --}}
<div class="modal fade" id="modalVoltio" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Nuevo Voltio Servicio</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="formVoltio">
                    <input type="hidden" id="recordId">
                    
                    <div class="mb-3">
                        <label class="form-label">Código <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="ConVolCodigo" maxlength="50" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Descripción <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="ConVolDescripcion" rows="2" required></textarea>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Observación</label>
                        <textarea class="form-control" id="ConVolObservacion" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="btnGuardar">Guardar</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<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>
$(function () {
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
    });

    // DataTable simple
    let tabla = $('#tablaVoltio').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ route('con-voltio-servicios.create') }}",
            dataSrc: ''
        },
        columns: [
            { data: 'ConVolCodigo' },
            { 
                data: 'ConVolDescripcion',
                render: function(data) {
                    return data || '-';
                }
            },
            { 
                data: 'ConVolObservacion',
                render: function(data) {
                    if (!data) return '<span class="text-muted">-</span>';
                    
                    let preview = data.length > 50 ? data.substr(0, 50) + '…' : data;
                    return `
                        <span style="cursor: pointer;" 
                              onclick="Swal.fire('Observación', '${data.replace(/'/g, "\\'")}', 'info')">
                            ${preview}
                            ${data.length > 50 ? ' <i class="fas fa-search text-info small"></i>' : ''}
                        </span>
                    `;
                }
            },
            {
                data: null,
                orderable: false,
                className: 'text-center',
                render: function(data) {
                    return `
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-info btnVer" data-id="${data.id}">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button class="btn btn-warning btnEditar" data-id="${data.id}">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-danger btnEliminar" data-id="${data.id}">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    `;
                }
            }
        ],
        language: {
            url: "//cdn.datatables.net/plug-ins/1.13.8/i18n/es-ES.json"
        },
        pageLength: 10,
        order: [[0, 'asc']]
    });

    // Limpiar formulario
    function limpiarForm() {
        $('#formVoltio')[0].reset();
        $('#recordId').val('');
        $('#ConVolCodigo').prop('readonly', false);
        $('#modalTitle').text('Nuevo Voltio Servicio');
    }

    // Nuevo
    $('#btnNuevo').click(function() {
        limpiarForm();
        $('#modalVoltio').modal('show');
    });

    // Guardar
    $('#btnGuardar').click(function() {
        if (!$('#ConVolCodigo').val() || !$('#ConVolDescripcion').val()) {
            Swal.fire('Error', 'Los campos marcados con * son requeridos', 'error');
            return;
        }

        let id = $('#recordId').val();
        let data = {
            ConVolCodigo: $('#ConVolCodigo').val(),
            ConVolDescripcion: $('#ConVolDescripcion').val(),
            ConVolObservacion: $('#ConVolObservacion').val()
        };

        let url = id ? "con-voltio-servicios/" + id : "{{ route('con-voltio-servicios.store') }}";
        let method = id ? 'PUT' : 'POST';

        $.ajax({
            url: url,
            type: method,
            data: data,
            success: function() {
                $('#modalVoltio').modal('hide');
                Swal.fire({
                    icon: 'success',
                    title: 'Éxito',
                    text: id ? 'Registro actualizado' : 'Registro creado',
                    timer: 1500,
                    showConfirmButton: false
                });
                tabla.ajax.reload(null, false);
            },
            error: function(xhr) {
                Swal.fire('Error', xhr.responseJSON?.message || 'Error al guardar', 'error');
            }
        });
    });

    // Ver
    $(document).on('click', '.btnVer', function() {
        let data = tabla.row($(this).parents('tr')).data();
        
        Swal.fire({
            title: 'Detalle',
            html: `
                <div class="text-start">
                    <p><strong>Código:</strong> ${data.ConVolCodigo}</p>
                    <p><strong>Descripción:</strong> ${data.ConVolDescripcion}</p>
                    <p><strong>Observación:</strong> ${data.ConVolObservacion || '-'}</p>
                </div>
            `,
            icon: 'info',
            confirmButtonText: 'Cerrar'
        });
    });

    // Editar
    $(document).on('click', '.btnEditar', function() {
        let data = tabla.row($(this).parents('tr')).data();
        
        limpiarForm();
        
        $('#recordId').val(data.id);
        $('#ConVolCodigo').val(data.ConVolCodigo).prop('readonly', true);
        $('#ConVolDescripcion').val(data.ConVolDescripcion);
        $('#ConVolObservacion').val(data.ConVolObservacion);
        
        $('#modalTitle').text('Editar Voltio Servicio');
        $('#modalVoltio').modal('show');
    });

    // Eliminar
    $(document).on('click', '.btnEliminar', function() {
        let id = $(this).data('id');
        let data = tabla.row($(this).parents('tr')).data();
        
        Swal.fire({
            title: '¿Eliminar?',
            text: `${data.ConVolCodigo} - ${data.ConVolDescripcion}`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            confirmButtonText: 'Eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "con-voltio-servicios/" + id,
                    type: 'DELETE',
                    success: function() {
                        Swal.fire('Eliminado', '', 'success');
                        tabla.ajax.reload(null, false);
                    }
                });
            }
        });
    });

    // Reset modal al cerrar - SOLUCIÓN DEL ERROR
    $('#modalVoltio').on('hidden.bs.modal', function () {
        limpiarForm();
        // Devolver el foco al botón que abrió el modal
        $('#btnNuevo').focus();
    });

    // Opcional: quitar el foco de los botones al hacer clic
    $('#btnGuardar, .btn-secondary').on('click', function() {
        $(this).blur();
    });
});
</script>

<style>
/* Estilos mínimos necesarios */
#tablaVoltio {
    font-size: 0.9rem;
}

#tablaVoltio thead th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.btn-group .btn {
    padding: 0.25rem 0.5rem;
}

.btn-group .btn i {
    font-size: 0.85rem;
}

/* Pequeño indicador para observaciones largas */
.fa-search {
    opacity: 0.6;
}

.fa-search:hover {
    opacity: 1;
}
</style>
@endsection