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

@section('content')

    <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: 444px;
            height: 300px;
            border: 3px 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" role="presentation">
                        <a class="nav-link {{ old('active_tab',session('active_tab', 'tab2')) == 'tab2' ? 'active' : '' }}" id="tab2-tab" data-bs-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="true">-</a>
                    </li>

                </ul>
            </div>

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

                    <div class="tab-pane fade {{ old('active_tab',session('active_tab', 'tab2')) == 'tab2' ? 'show active' : '' }}" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
                        <div class="container">
                            <div class="row">

                            </div>
                            <div class="row">
                                <div class="text-center">
                                    <h4>Proyecto CENAGAS / OMA Estado de México</h4>
                                </div>
                            </div>
                            <br>
                            <div class="row">
                                Nota : El archivo "Project" debe cargarse en formato Excel (*.xlsx). <br>
                                Debe tener el siguiente encabezado en la primer linea:
                                <p style="color: blue;">
                                    <b>WBS | Tarea | Volumen | PU | Volumen previo	| Unidad de medida | (Espacio) | Cost |	Duration | Start_Date | Finish_Date <b>
                                </p>
                            </div>


                            <form action="{{ route('tarea.uploadExcel') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="d-flex align-items-center">
                                    <label for="file" class="me-2 mb-0">Subir archivo (.xlsx):</label>
                                    <input type="file" name="file" class="form-control me-2" id="file" accept=".xlsx" required style="width: auto;">
                                    <button type="submit" class="btn btn-primary d-flex align-items-center">
                                        <i class="bi bi-upload me-1"></i> <!-- Icono de carga de archivo -->
                                        Cargar archivo
                                    </button>
                                </div>


                            </form>

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



                </div>
            </div>

        </div>



    </div>



    <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')) }}';
        const tabElement = document.querySelector(`a[href="#${activeTab}"]`);
        if (tabElement) {
            const tabInstance = new bootstrap.Tab(tabElement);
            tabInstance.show();
        }
        });

    </script>


@endsection


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