@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">
        <strong>Respuesta</strong>
        <hr>

        @if (isset($error))
            @foreach ($error as $falla )
                {{ $falla }} <br>
            @endforeach
        @endif

        <table border="1">
            <thead>
                <tr>
                    <th>Status</th>
                    <th>WBS</th>
                    <th>Tarea</th>
                    <th>Volumen</th>
                    <th>PU</th>
                    <th>Volumen previo</th>
                    <th>Unidad Medida</th>
                    <th>Costo</th>
                    <th>Duración</th>
                    <th>Start</th>
                    <th>Finish</th>
                </tr>
            </thead>
            <tbody>
                @foreach($data as $item)
                    <tr>
                        <td style="color:green"><strong>Cargado</strong></td>
                        <td>{{ $item[0] }}</td>
                        <td>{{ $item[1] }}</td>
                        <td>{{ $item[2] }}</td>
                        <td>{{ $item[3] }}</td>
                        <td>{{ $item[4] }}</td>
                        <td>{{ $item[5] }}</td>
                        <td>{{ $item[6] }}</td>
                        <td>{{ $item[7] }}</td>
                        <td>{{ $item[8] }}</td>
                        <td>{{ $item[9] }}</td>
                        <td>{{ $item[10] }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>


    </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')