@extends('layouts.theme_selector')

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-md-10">

                @include('layouts.alerts.success')

                @include('layouts.alerts.error')

                <div class="card glass-card border-0 shadow-lg overflow-hidden">

                    <div class="card-header py-3 border-0 d-flex align-items-center"
                        style="background: var(--sp-brand-blue) !important;">
                        <a href="{{ Route('EmisionMenu') }}"
                            class="btn btn-sm glass-brand-red rounded-circle me-3 shadow-sm border-0 d-flex align-items-center justify-content-center"
                            style="width: 35px; height: 35px;">
                            <i class="bi bi-chevron-left text-white"></i>
                        </a>
                        <h5 class="mb-0 fw-bold tracking-tight shadow-text text-white">Anulaciones por Alta Siniestro</h5>
                        <button type="button" class="btn btn-sm btn-outline-light rounded-pill ms-auto"
                            data-bs-toggle="modal" data-bs-target="#modalLogs">
                            <i class="bi bi-journal-text me-1"></i> Ver Logs
                        </button>
                    </div>

                    <div class="card-body">

                        <div class="table-responsive px-4 py-4">
                            <table id="tabla_anulaciones" class="w-100 table table-sm table-hover table-bordered mb-4">
                                <caption>
                                    Listado de Anulaciones Pendientes
                                </caption>
                                <thead class="bg-secondary text-center">
                                    <tr>
                                        <th scope="col">Sección</th>
                                        <th scope="col">PAS</th>
                                        <th scope="col">Póliza</th>
                                        <th scope="col">Fecha Anulación</th>
                                        <th scope="col">Fecha Creado</th>
                                        <th scope="col">Fecha Última Actualización</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($anulaciones as $anulacion)
                                        <tr class="text-center">
                                            <td>{{ $anulacion->seccion }}</td>
                                            <td>{{ $anulacion->idProductor }}</td>
                                            <td>{{ $anulacion->polizaNro }}</td>
                                            <td>{{ \Carbon\Carbon::parse($anulacion->vigenciaDesde)->format('d/m/Y') }}</td>
                                            <td>{{ $anulacion->created_at->format('d/m/Y H:i') }}</td>
                                            <td>{{ $anulacion->updated_at->format('d/m/Y H:i') }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center py-4 text-muted">No existen anulaciones
                                                pendientes en este momento.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('modals')
    <div class="modal fade" id="modalLogs" tabindex="-1" aria-labelledby="modalLogsLabel">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content" style="background-color: var(--bs-modal-bg); color: var(--bs-body-color);">
                <div class="modal-header" style="border-color: var(--bs-border-color);">
                    <h5 class="modal-title" id="modalLogsLabel">Registros de Procesamiento (últimas 2 ejecuciones)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-0">
                    <pre id="logContent" class="p-3 mb-0 small"
                        style="max-height: 60vh; overflow-y: auto; background: #1e1e1e; color: #d4d4d4; font-family: 'Courier New', Courier, monospace;">Cargando logs...</pre>
                </div>
                <div class="modal-footer" style="border-color: var(--bs-border-color);">
                    <a href="{{ route('ControlSiniestrosLogsDownload') }}"
                        class="btn btn-primary btn-sm rounded-pill no-spinner">
                        <i class="bi bi-download me-1"></i> Descargar Histórico Completo
                    </a>
                    <button type="button" class="btn btn-secondary btn-sm rounded-pill"
                        data-bs-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
@endpush

@include('layouts/datatable')

@push('scripts')
    <script>
        $(document).ready(function () {
            $('#tabla_anulaciones').DataTable({
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
                },
                "order": [[5, "desc"]]
            });

            $('#modalLogs').on('show.bs.modal', function () {
                $('#logContent').text('Cargando registros...');
                $.get('{{ route("ControlSiniestrosLogs") }}')
                    .done(function (data) {
                        $('#logContent').text(data.log);
                        // Auto-scroll to bottom
                        var logDiv = document.getElementById('logContent');
                        logDiv.scrollTop = logDiv.scrollHeight;
                    })
                    .fail(function () {
                        $('#logContent').text('Error al cargar los logs.');
                    });
            });
        });
    </script>
@endpush