@extends('../layouts/partials/header')

@section('content')
<script>
    // document.addEventListener('DOMContentLoaded', function () {
    // // Capturar el cambio de pestaña
    // const tabs = document.querySelectorAll('a[data-bs-toggle="tab"]');
    // tabs.forEach(tab => {
    //     tab.addEventListener('shown.bs.tab', function (e) {
    //         // Guardar el id de la pestaña activa en el input oculto
    //         document.getElementById('active_tab').value = e.target.getAttribute('href').substring(1);
    //     });
    // });

    // // Activar la pestaña correcta al cargar la página
    // const activeTab = '{{ old('active_tab',session('active_tab', 'tab1')) }}';
    // alert(activeTab);
    // const tabElement = document.querySelector(`a[href="#${activeTab}"]`);
    // if (tabElement) {
    //     const tabInstance = new bootstrap.Tab(tabElement);
    //     tabInstance.show();
    // }
    // });

    document.addEventListener('DOMContentLoaded', function () {
        const tabs = document.querySelectorAll('a[data-bs-toggle="tab"]');
        tabs.forEach(tab => {
            tab.addEventListener('shown.bs.tab', function (e) {
                document.getElementById('active_tab').value = e.target.getAttribute('href').substring(1);
            });
        });
    });

</script>

    <style>
        table {
            width: 100%; /* Ocupa el 100% del ancho del contenedor */
            border-collapse: collapse; /* Opcional: para eliminar el espacio entre bordes de celdas */
        }
        .img-custom-size {
            width: 300px;
            height: 150px;
            border: 2px solid black; border-radius: 15px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
        }
        .table td {
            text-align: left;
        }

    </style>

    <div class="container mt-3">
        <br>
        <div class="card text-center">
            <div class="card-header">
                <!-- Nav Tabs -->
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link {{ session('active_tab', 'tab1') == 'tab1' ? 'active' : '' }}" id="tab1-tab" data-bs-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">Notas de archivo</a>
                    </li>
                </ul>
            </div>

            <div class="card-header">
                <div class="tab-content" id="myTabContent">

                    <div class="tab-pane fade  {{ session('active_tab', 'tab1') == 'tab1' ? 'show active' : '' }}" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
                        <div class="container">
                            <div class="row">
                                <h3>{{ $odm->odm }} <br></h3>
                            </div>
                            <div class="row">
                                <div class="text-center">
                                    <a href="{{ route('odms.edit',$odm->id)}}#tab2">
                                        Ver Archivos
                                    </a>
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-md-2 text-left">
                                    <label for="archivo" style="all: unset;"><strong>Archivo:</strong></label>
                                </div>
                                <div class="col-md-3 text-left">
                                    {{ $archivo->archivo }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-2 text-left">
                                    <label for="archivo" style="all: unset;"><strong>Cargado por:</strong></label>
                                </div>
                                <div class="col-md-3 text-left">
                                    {{ $archivo->user->name }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-2 text-left">
                                    <label for="archivo" style="all: unset;"><strong>Fecha de carga:</strong></label>
                                </div>
                                <div class="col-md-3 text-left">
                                    {{ $archivo->created_at }}
                                </div>
                            </div>
                            <div class="row">
                                <br><br>
                            </div>

                            <div class="row">
                                <form action="{{route('odms.fileNoteStore',$archivo->id)}}" method="POST" id="formCaratura" enctype="multipart/form-data" >
                                    @csrf
                                    <div class="col-md-2 text-left">
                                        <label for="nota" style="all: unset;"><strong>Observaciones:</strong></label>
                                    </div>
                                    <div class="col-md-10 text-left">
                                        <textarea class="form-control" name="nota" id="nota" rows="3" placeholder="Notas de archivo" required></textarea>
                                    </div>
                                    <p>
                                    <div class="col-md-2">
                                        <div class="row">
                                            <input type="hidden" name="active_tab" id="active_tab" value="{{ session('active_tab', 'tab1') }}">
                                            <button type="submit" class="btn btn-primary">
                                                <i class="bi bi-save-fill"></i> Guardar nota
                                            </button>
                                            <p>
                                        </div>
                                    </div>
                                    <input type="hidden" name="id_archivo" value="{{$archivo->id}}">
                                </form>
                            </div>
                            <div class="row ">

                            </div>
                            <div class="row">
                                <div class="col-md-10">
                                    <div class="table-responsive-md">
                                        <table class="table table-hover table-border align-middle">
                                            <thead>
                                                <tr class="table-active">
                                                    <th>Comentario</th>
                                                    <th>Capturó</th>
                                                    <th>Fecha</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($notas as $nota)
                                                <tr>
                                                    <td scope="row" width="75%">
                                                        {{ $nota->nota }}
                                                    </td>
                                                    <td>{{ $nota->user->name ?? 'Usuario no asignado' }}</td>
                                                    <td>{{ $nota->created_at }}</td>
                                                    <td></td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>


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




                                <div class="row">
                                    <p class="text-left">
                                    <a href="#top">Volver arriba</a>
                                </div>

                            <br><br>

                        </div>
                    </div>

                </div>
            </div>

        </div>



    </div>






@endsection


@extends('../layouts/partials/footer')