@extends('layouts.index', ['subHeader' => 'Editar Esquema de Seguridad'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <a href="{{ route('viajeros.index') }}" class="text-decoration-none text-dark"> / Esquemas de Seguridad</a>
    <a href="#" class="text-decoration-none text-dark"> / Editar</a>
@endsection

@section('js')
    <script>
        function verPDF(url, name) {
            let timestamp = new Date().getTime();
            $('#modalPDFLabel').text(name);
            $('#pdfViewer').attr('src', url + '?t=' + timestamp);
            $('#modalPDF').modal('show');
        }
    </script>
@endsection

@section('content')
    <div class="d-flex justify-content-end gap-3 flex-wrap">
        <div class="btn-group">
            <a href="{{ url()->previous() }}" class="btn btn-enviar btn-lg btn-block">
                <i class="bi bi-arrow-left-circle-fill"></i> Atrás
            </a>
        </div>
    </div>

    <div class="container mt-4">
        <div class="row justify-content-center">
            <div class="col-md-8">

                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span class="fs-3 fw-bolder">Actualizar Esquema de Seguridad</span>
                    </div>

                    <form method="POST" action="{{ route('viajeros.esquema.update', $itinerario->id) }}" enctype="multipart/form-data">
                        @csrf

                        <div class="card-body">
                            <div class="row g-3 mb-3 align-items-end">
                                <div class="col-10 mb-3">
                                    <label for="esquema_pdf" class="form-label">Subir Nueva Versión (PDF)</label>
                                    <input type="file" class="form-control" id="esquema_pdf" name="esquema_pdf" accept="application/pdf" required>
                                </div>
                                @if ($itinerario->url_esquema_seguridad)
                                    <div class="col-2 mb-3">
                                        <button type="button" class="btn btn-outline-primary w-100" style="height: 3em;"
                                                onclick="verPDF('{{ asset('storage/' . $itinerario->url_esquema_seguridad) }}', '{{ $itinerario->titulo_esquema }}')">
                                            <i class="bi bi-file-earmark-pdf"></i> Ver
                                        </button>
                                    </div>
                                @endif
                            </div>

                            <div class="col-12 d-flex justify-content-end mt-10">
                                <div class="flex-row w-100 justify-content-end">
                                    <a href="{{ url()->previous() }}" class="btn btn-lg mb-3 btn-cancelar">Cancelar</a>
                                    <button class="btn btn-lg mb-3 btn-enviar" type="submit">Actualizar</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                @if (count($trazabilidad) > 0)
                    <div class="card mt-4">
                        <div class="card-header fs-3 fw-bolder" style="align-items: center;">Historial de Versiones</div>
                        <div class="card-body">
                            <ul class="list-group">
                                @foreach (array_reverse($trazabilidad) as $version)
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <div>
                                            <span class="fw-semibold">Versión del {{ \Carbon\Carbon::parse($version['fecha'])->format('d/m/Y h:ia') }}</span><br>
                                            <span class="text-muted">Subido por: {{ $version['usuario'] ?? 'Desconocido' }}</span>
                                        </div>
                                        <button type="button" class="btn btn-outline-primary"
                                                onclick="verPDF('{{ asset('storage/' . $version['archivo']) }}', 'Versión del {{ \Carbon\Carbon::parse($version['fecha'])->format('d/m/Y h:ia') }}')">
                                            <i class="bi bi-file-earmark-pdf"></i> Ver
                                        </button>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif


            </div>
        </div>
    </div>

    <!-- Modal para visualizar PDF -->
    <div class="modal fade" id="modalPDF" tabindex="-1" aria-labelledby="modalPDFLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content" style="height: 80vh;">
                <div class="modal-header py-2 bg-info text-white" style="align-items: center;">
                    <h6 class="modal-title fw-bold" id="modalPDFLabel"></h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-0 d-flex justify-content-center align-items-center" style="height: calc(100% - 35px);">
                    <iframe id="pdfViewer" src="" style="width: 100%; height: 100%;" frameborder="0"></iframe>
                </div>
            </div>
        </div>
    </div>
@endsection