@extends('layouts.kaiadmin.master')

@section('template_title')
    Con Causística
@endsection

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

<div class="container-fluid px-4 mt-4">
    {{-- Header --}}
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="fw-bold mb-0">
            <i class="fas fa-list me-2"></i> Gestión de Causísticas
        </h4>
        <button class="btn btn-primary" id="btnNuevo">
            <i class="fas fa-plus-circle me-1"></i> Nueva Causística
        </button>
    </div>

    {{-- Card --}}
    <div class="card shadow-sm">
        <div class="card-body p-0 p-md-3">
            <div class="table-responsive">
                <table class="table table-hover align-middle w-100" id="tablaCausistica" style="width:100%">
                    <thead class="table-light">
                        <tr>
                            <th>Código</th>
                            <th>Descripción</th>
                            <th class="text-center">Kwh</th>
                            <th class="text-center">Orden</th>
                            <th class="text-center d-none d-lg-table-cell">Visualizar</th>
                            <th class="text-center d-none d-lg-table-cell">Consulta</th>
                            <th class="text-center d-none d-xl-table-cell">ConQry</th>
                            <th class="d-none d-xl-table-cell">Observación</th>
                            <th class="d-none d-lg-table-cell">Grupo Trabajo</th>
                            <th class="text-center">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- DataTables llenará esto -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Modal para Editar/Crear --}}
<div class="modal fade" id="modalForm" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalFormTitle">Nueva Causística</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="formCausistica">
                    <input type="hidden" id="recordId">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Código</label>
                            <input type="text" class="form-control" id="ConCauCodigo" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Descripción</label>
                            <input type="text" class="form-control" id="ConCauDescripcion" required>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check mt-4">
                                <input class="form-check-input" type="checkbox" id="ConCauKwh">
                                <label class="form-check-label">Kwh</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Orden</label>
                            <input type="number" class="form-control" id="ConOrden">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Grupo Trabajo</label>
                            <input type="text" class="form-control" id="ConGrupoTrabajoCasoPuntual">
                        </div>
                        <div class="col-md-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="ConVisualizar">
                                <label class="form-check-label">Visualizar</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="ConConsulta">
                                <label class="form-check-label">Consulta</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="ConQry">
                                <label class="form-check-label">ConQry</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Observación</label>
                            <textarea class="form-control" id="ConObservacionCaso" rows="3"></textarea>
                        </div>
                    </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 src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">

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

    // Configuración responsive de DataTables
    let tabla = $('#tablaCausistica').DataTable({
        processing: true,
        serverSide: false,
        responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal({
                    header: function(row) {
                        let data = row.data();
                        return 'Detalles de ' + data.ConCauCodigo;
                    }
                }),
                renderer: function(api, rowIdx, columns) {
                    let data = $.map(columns, function(col) {
                        if (col.visible !== true) {
                            return '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
                                '<td><strong>' + col.title + ':</strong></td> ' +
                                '<td>' + col.data + '</td>' +
                                '</tr>';
                        }
                        return '';
                    }).join('');
                    
                    return data ? $('<table class="table table-sm table-borderless"/>').append('<tbody>' + data + '</tbody>') : false;
                }
            }
        },
        ajax: {
            url: "{{ route('con-causisticas.create') }}",
            dataSrc: ''
        },
        columns: [
            { data: 'ConCauCodigo' },
            { 
                data: 'ConCauDescripcion',
                render: function(data) {
                    if (!data) return '-';
                    return data.length > 50 ? data.substr(0, 50) + '…' : data;
                }
            },
            { 
                data: 'ConCauKwh', 
                className: 'text-center',
                render: function(data) {
                    // Verificar si es numérico (1/0) o booleano
                    if (data === 1 || data === '1' || data === true || data === 'true' || data === 'Sí' || data === 'Si') {
                        return '<span class="badge bg-success">Sí</span>';
                    } else if (data === 0 || data === '0' || data === false || data === 'false' || data === 'No' || data === null || data === '') {
                        return '<span class="badge bg-secondary">No</span>';
                    } else {
                        // Si tiene otro valor, mostrarlo como texto
                        return data || '<span class="badge bg-secondary">No</span>';
                    }
                }
            },
            { data: 'ConOrden', className: 'text-center' },
            { 
                data: 'ConVisualizar', 
                className: 'text-center d-none d-lg-table-cell',
                render: function(data) {
                    if (data === 1 || data === '1' || data === true || data === 'true' || data === 'Sí') {
                        return '<span class="badge bg-success">Sí</span>';
                    } else {
                        return '<span class="badge bg-secondary">No</span>';
                    }
                }
            },
            { 
                data: 'ConConsulta', 
                className: 'text-center d-none d-lg-table-cell',
                render: function(data) {
                    if (data === 1 || data === '1' || data === true || data === 'true' || data === 'Sí') {
                        return '<span class="badge bg-success">Sí</span>';
                    } else {
                        return '<span class="badge bg-secondary">No</span>';
                    }
                }
            },
            { 
                data: 'ConQry', 
                className: 'text-center d-none d-xl-table-cell',
                render: function(data) {
                    if (data === 1 || data === '1' || data === true || data === 'true' || data === 'Sí') {
                        return '<span class="badge bg-success">Sí</span>';
                    } else {
                        return '<span class="badge bg-secondary">No</span>';
                    }
                }
            },
            { 
                data: 'ConObservacionCaso', 
                className: 'd-none d-xl-table-cell',
                render: function(data, type, row) {
                    if (!data) return '<span class="text-muted">-</span>';
                    
                    if (type === 'display') {
                        // Muestra solo los primeros 30 caracteres
                        let displayText = data.length > 30 ? data.substr(0, 30) + '…' : data;
                        
                        // Escapamos caracteres especiales para el onclick
                        let escapedData = data.replace(/'/g, "\\'").replace(/"/g, '&quot;');
                        
                        return `
                            <div class="observacion-wrapper" 
                                 onclick="mostrarObservacion('${escapedData}')"
                                 style="cursor: pointer; display: flex; align-items: center; gap: 5px; padding: 2px 5px; border-radius: 4px; background-color: #f8f9fa;">
                                <span class="observacion-texto" style="font-size: 0.85rem;">${displayText}</span>
                                <i class="fas fa-info-circle text-info" 
                                   style="font-size: 0.9rem;"
                                   title="Haz clic para ver el texto completo"></i>
                            </div>
                        `;
                    }
                    
                    return data;
                }
            },
            { 
                data: 'ConGrupoTrabajoCasoPuntual', 
                className: 'd-none d-lg-table-cell',
                render: data => data || '-'
            },
            {
                data: null,
                orderable: false,
                className: 'text-center',
                render: function(data) {
                    return `
                        <div class="btn-group" role="group">
                            <button class="btn btn-sm btn-info btnVer" title="Ver" data-id="${data.id}">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button class="btn btn-sm btn-warning btnEditar" title="Editar" data-id="${data.id}">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-sm btn-danger btnEliminar" title="Eliminar" 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"
        },
        order: [[0, 'asc']],
        pageLength: 10,
        lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "Todos"]]
    });

    // ========== NUEVO ==========
    $('#btnNuevo').click(function() {
        $('#formCausistica')[0].reset();
        $('#recordId').val('');
        $('#modalFormTitle').text('Nueva Causística');
        $('#modalForm').modal('show');
    });

    // ========== GUARDAR ==========
    $('#btnGuardar').click(function() {
        let id = $('#recordId').val();
        let data = {
            ConCauCodigo: $('#ConCauCodigo').val(),
            ConCauDescripcion: $('#ConCauDescripcion').val(),
            ConCauKwh: $('#ConCauKwh').is(':checked') ? 1 : 0,
            ConOrden: $('#ConOrden').val(),
            ConVisualizar: $('#ConVisualizar').is(':checked') ? 1 : 0,
            ConConsulta: $('#ConConsulta').is(':checked') ? 1 : 0,
            ConQry: $('#ConQry').is(':checked') ? 1 : 0,
            ConObservacionCaso: $('#ConObservacionCaso').val(),
            ConGrupoTrabajoCasoPuntual: $('#ConGrupoTrabajoCasoPuntual').val()
        };

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

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

    // ========== VER ==========
    $(document).on('click', '.btnVer', function() {
        let id = $(this).data('id');
        let data = tabla.row($(this).parents('tr')).data();
        
        // Función para formatear valores booleanos
        function formatBool(value) {
            if (value === 1 || value === '1' || value === true || value === 'true' || value === 'Sí') {
                return '<span class="badge bg-success">Sí</span>';
            } else {
                return '<span class="badge bg-secondary">No</span>';
            }
        }
        
        let html = `
            <div class="table-responsive">
                <table class="table table-sm table-borderless">
                    <tr><th style="width:40%">Código:</th><td>${data.ConCauCodigo || '-'}</td></tr>
                    <tr><th>Descripción:</th><td>${data.ConCauDescripcion || '-'}</td></tr>
                    <tr><th>Kwh:</th><td>${formatBool(data.ConCauKwh)}</td></tr>
                    <tr><th>Orden:</th><td>${data.ConOrden || '-'}</td></tr>
                    <tr><th>Visualizar:</th><td>${formatBool(data.ConVisualizar)}</td></tr>
                    <tr><th>Consulta:</th><td>${formatBool(data.ConConsulta)}</td></tr>
                    <tr><th>ConQry:</th><td>${formatBool(data.ConQry)}</td></tr>
                    <tr><th>Observación:</th><td>${data.ConObservacionCaso || '-'}</td></tr>
                    <tr><th>Grupo Trabajo:</th><td>${data.ConGrupoTrabajoCasoPuntual || '-'}</td></tr>
                </table>
            </div>
        `;
        
        Swal.fire({
            title: 'Detalle de Causística',
            html: html,
            icon: 'info',
            confirmButtonText: 'Cerrar',
            width: '600px'
        });
    });

    // ========== EDITAR ==========
    $(document).on('click', '.btnEditar', function() {
        let id = $(this).data('id');
        let data = tabla.row($(this).parents('tr')).data();
        
        $('#recordId').val(data.id);
        $('#ConCauCodigo').val(data.ConCauCodigo);
        $('#ConCauDescripcion').val(data.ConCauDescripcion);
        
        // Para checkboxes, verificamos si el valor es 1, true, '1', 'true', 'Sí'
        $('#ConCauKwh').prop('checked', (data.ConCauKwh == 1 || data.ConCauKwh == '1' || data.ConCauKwh === true || data.ConCauKwh === 'true' || data.ConCauKwh === 'Sí'));
        $('#ConOrden').val(data.ConOrden);
        $('#ConVisualizar').prop('checked', (data.ConVisualizar == 1 || data.ConVisualizar == '1' || data.ConVisualizar === true || data.ConVisualizar === 'true' || data.ConVisualizar === 'Sí'));
        $('#ConConsulta').prop('checked', (data.ConConsulta == 1 || data.ConConsulta == '1' || data.ConConsulta === true || data.ConConsulta === 'true' || data.ConConsulta === 'Sí'));
        $('#ConQry').prop('checked', (data.ConQry == 1 || data.ConQry == '1' || data.ConQry === true || data.ConQry === 'true' || data.ConQry === 'Sí'));
        $('#ConObservacionCaso').val(data.ConObservacionCaso);
        $('#ConGrupoTrabajoCasoPuntual').val(data.ConGrupoTrabajoCasoPuntual);
        
        $('#modalFormTitle').text('Editar Causística');
        $('#modalForm').modal('show');
    });

    // ========== ELIMINAR ==========
    $(document).on('click', '.btnEliminar', function() {
        let id = $(this).data('id');
        
        Swal.fire({
            title: '¿Confirmar eliminación?',
            text: "Esta acción no se puede revertir",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "con-causisticas/" + id,
                    type: 'DELETE',
                    success: function() {
                        Swal.fire({
                            icon: 'success',
                            title: 'Eliminado',
                            text: 'Registro eliminado',
                            timer: 2000,
                            showConfirmButton: false
                        });
                        tabla.ajax.reload(null, false);
                    },
                    error: function() {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'No se pudo eliminar'
                        });
                    }
                });
            }
        });
    });
});

// Función global para mostrar la observación (Opción 3)
function mostrarObservacion(texto) {
    Swal.fire({
        title: 'Observación',
        text: texto,
        icon: 'info',
        confirmButtonText: 'Cerrar',
        confirmButtonColor: '#17a2b8',
        width: '600px',
        showCloseButton: true,
        showClass: {
            popup: 'animate__animated animate__fadeInDown'
        },
        hideClass: {
            popup: 'animate__animated animate__fadeOutUp'
        }
    });
}
</script>

<style>
/* Estilos mejorados */
#tablaCausistica {
    font-size: 0.85rem;
}

#tablaCausistica thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.3px;
}

#tablaCausistica td {
    vertical-align: middle;
}

.btn-group .btn {
    padding: 0.25rem 0.5rem;
    margin: 0 2px;
    border-radius: 4px !important;
}

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

/* Modal styles */
.modal-lg {
    max-width: 800px;
}

.form-label {
    font-weight: 500;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    color: #495057;
}

/* Badge styles */
.badge {
    font-size: 0.7rem;
    padding: 0.35rem 0.5rem;
    font-weight: 500;
}

.badge.bg-success {
    background-color: #28a745 !important;
}

.badge.bg-secondary {
    background-color: #6c757d !important;
}

/* Estilos para la celda de observación */
.observacion-wrapper {
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.observacion-wrapper:hover {
    background-color: #e9ecef !important;
    border-color: #17a2b8;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.observacion-wrapper:hover i {
    transform: scale(1.1);
    color: #0d6efd !important;
}

.observacion-texto {
    color: #495057;
}

/* Animación para el ícono */
.observacion-wrapper i {
    transition: transform 0.2s ease;
}

/* Responsive table */
@media (max-width: 768px) {
    #tablaCausistica {
        font-size: 0.8rem;
    }
    
    .btn-group .btn {
        padding: 0.2rem 0.4rem;
    }
}

/* Estilos para SweetAlert */
.swal2-popup {
    font-size: 0.9rem !important;
}

.swal2-title {
    font-size: 1.3rem !important;
    color: #17a2b8 !important;
}

.swal2-confirm {
    background-color: #17a2b8 !important;
}

/* Estilos para la tabla en el modal de ver */
.table-sm th {
    color: #495057;
    font-weight: 600;
    background-color: #f8f9fa;
}

.table-sm td {
    color: #212529;
}
</style>
@endsection