@extends('layouts.kaiadmin.master')

@section('title', 'Lectura')

<style>
    #lecturas-table td, #lecturas-table th {
        font-size: 10px; /* o el tamaño que prefieras */
        padding: 0.3rem; /* también puedes reducir el padding */
        white-space: normal !important;
        word-wrap: break-word;
    }
</style>


@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg">
                <div class="card shadow-sm">
                    <div class="card-header bg-light text-dark d-flex justify-content-between align-items-center">
                        <h5 id="card_title" class="mb-0">{{ __('Gestión de Lecturas') }}</h5>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="lecturas-table" class="table table-hover table-bordered small" style="width:100%">
                                <thead class="thead-dark">
                                    <tr>
                                        <th data-data="UsrServicio_UsrSerCodigo" class="text-center">Servicio</th>
                                        <th data-data="UsrCarFechaLectura" class="text-center">Fecha Lectura</th>
                                        <th data-data="UsrCarLecturaActual" class="text-center">Lectura Actual</th>
                                        <th data-data="UsrCarLecturaAnterior" class="text-center">Lectura Anterior</th>
                                        <th data-data="UsrSerMultiplicador" class="text-center">Multiplicador</th>
                                        <th data-data="UsrCarKwhDistribuidoRed" class="text-center">Consumo Kwh</th>
                                        <th data-data="UsrSerDemandaContratada" class="text-center">Potencia Contratada</th>
                                        <th data-data="UsrCarPotenciaMaxima" class="text-center">Potencia Máxima</th>
                                        <th data-data="UsrCarExcedentePotencia" class="text-center">Excedente de Potencia</th>
                                        <th data-data="UsrCarFactorPotencia" class="text-center">Factor Potencia</th>
                                        <th data-data="UsrCarDescripcionPeriodoLectura" class="text-center">Descripción</th>
                                        <th data-data="fotografia" class="text-center">Fotografía</th>
                                        <th data-data="acciones" class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Los datos se cargarán automáticamente via AJAX -->
                                </tbody>
                            </table>
                        </div>

                        <div class="d-flex justify-content-end mt-4">
                            <form id="revisado-form" action="{{ route('lecturas.marcarRevisado') }}" method="POST">
                                @csrf
                                <input type="hidden" name="id" value="{{ $itinerarioId }}">
                                <input type="hidden" name="inicio" value="{{ $inicio }}">
                                <input type="hidden" name="final" value="{{ $final }}">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-check"></i> Revisado
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para imágenes -->
    <div class="modal fade" id="imagenModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Fotografía de la lectura</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="modal-imagen" src="" style="max-width: 100%; height: auto;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    @if(session('success'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    icon: 'success',
                    title: 'Éxito',
                    text: '{{ session('success') }}',
                });
            });
        </script>
    @endif
@endsection


@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   
   
    <script>
        $(document).ready(function() {
            // Inicializar DataTable con server-side processing
            var table = $('#lecturas-table').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('lecturas.index') }}",
                    data: function(d) {
                        d.id = "{{ $itinerarioId }}";
                        d.inicio = "{{ $inicio }}";
                        d.final = "{{ $final }}";
                        d.usrcarfechalectura = "{{ $usrcarfechalectura }}";
                    }
                },
                columns: [
                    { data: 'UsrServicio_UsrSerCodigo', className: 'text-center' },
                    { 
                        data: 'UsrCarFechaLectura', 
                        className: 'text-center',
                        render: function(data, type, row) {
                            if (type === 'display' || type === 'filter') {
                                if (data) {
                                    // Asumiendo que la fecha viene en formato ISO (YYYY-MM-DD)
                                    const date = new Date(data);
                                    const day = String(date.getDate()).padStart(2, '0');
                                    const month = String(date.getMonth() + 1).padStart(2, '0');
                                    const year = date.getFullYear();
                                    return `${day}/${month}/${year}`;
                                }
                                return '';
                            }
                            return data;
                        }
                    },
                    { data: 'UsrCarLecturaActual', className: 'text-center' },
                    { data: 'UsrCarLecturaAnterior', className: 'text-center' },
                    { data: 'UsrSerMultiplicador', className: 'text-center' },
                    { data: 'UsrCarKwhDistribuidoRed', className: 'text-center' },
                    { data: 'UsrSerDemandaContratada', className: 'text-center' },
                    { data: 'UsrCarPotenciaMaxima', className: 'text-center' },
                    { data: 'UsrCarExcedentePotencia', className: 'text-center' },
                    { data: 'UsrCarFactorPotencia', className: 'text-center' },
                    { data: 'UsrCarDescripcionPeriodoLectura', className: 'text-center' },
                    { data: 'fotografia', className: 'text-center', orderable: false, searchable: false },
                    { data: 'acciones', className: 'text-center', orderable: false, searchable: false }
                ],
                language: {
                    url: "//cdn.datatables.net/plug-ins/1.11.5/i18n/es-ES.json"
                },
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Todos"]]
            });

            // Manejar clic en botones de imagen
            $(document).on('click', '.view-image', function() {
                var imageUrl = $(this).data('image');
                $('#modal-imagen').attr('src', imageUrl);
                $('#imagenModal').modal('show');
            });

            // Configurar el formulario de revisado para evitar recarga de página
            $('#revisado-form').on('submit', function(e) {
                e.preventDefault();
                
                Swal.fire({
                    title: '¿Marcar como revisado?',
                    text: "¿Estás seguro de que deseas marcar este itinerario como revisado?",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Sí, marcar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: $(this).attr('action'),
                            type: 'POST',
                            data: $(this).serialize(),
                            success: function(response) {
                                if(response.success) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Éxito',
                                        text: response.message,
                                    }).then(() => {
                                        window.location.href = "{{ route('itinerarios.index') }}";
                                    });
                                }
                            },
                            error: function(xhr) {
                                Swal.fire('Error', 'Ocurrió un error al marcar como revisado', 'error');
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection