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

@section('content')

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    .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 shadow">

        {{-- ✅ TABS --}}
        <div class="card-header">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active"
                       id="tabReporte-tab"
                       data-bs-toggle="tab"
                       href="#tabReporte"
                       role="tab">
                       INVENTARIO
                    </a>
                </li>
            </ul>
        </div>

        <div class="card-body">

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

                {{-- ✅ CONTENIDO DEL REPORTE --}}
                <div class="tab-pane fade show active"
                     id="tabReporte"
                     role="tabpanel">

                    <div class="container">

                        <div class="row mb-2">
                            <div class="text-center">
                                <strong style="font-size: 1.2rem;">
                                    REPORTE DE CONTENEDORES EN INVENTARIO
                                </strong>
                                <br><br>
                            </div>
                        </div>

                        <div class="row mb-3">
                            Los campos marcados con (*) son mandatorios.  
                            Seleccione el estado y un rango de fechas válido.
                        </div>

                        {{-- ✅ FORMULARIO PRINCIPAL --}}
                        <form action="{{ route('entrada.generarExcel') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row mb-3">
                                <div class="col-md-2 d-flex flex-column align-items-start">
                                    <label for="fecha_ini" class="fw-bold mb-1 text-start">*De:</label>
                                    <input type="date" id="fecha_ini" name="fecha_ini" value="{{ now()->startOfMonth()->toDateString() }}" class="form-control shadow-sm border-primary" required>
                                </div>
                                
                                <div class="col-md-2 d-flex flex-column align-items-start">
                                    <label for="fecha_fin" class="fw-bold mb-1 text-start">*A:</label>
                                    <input type="date" id="fecha_fin" name="fecha_fin" value="{{ now()->toDateString() }}" class="form-control shadow-sm border-primary" required>
                                </div>

                                <div class="col-md-3 d-flex flex-column align-items-start">
                                    <label for="estado" class="fw-bold mb-1 text-start">*Estado:</label>
                                    <select name="estado" id="estado" class="form-select shadow-sm border-primary" required>
                                        <option value="general">📋 General</option>
                                        <option value="En Transito">🚛 En Tránsito</option>
                                        <option value="En Patio">🏗️ En Patio</option>
                                        <option value="Salida">📤 Salida</option>
                                    </select>
                                </div>

                                <div class="col-md-3 d-flex flex-column align-items-start">
                                    <label for="estado" class="fw-bold mb-1 test-start">*Formato:</label>
                                    <select name="formato" id="estado" class="form-select shadow-sm border-primary" required>
                                        <option value="excel">📗 Excel</option>
                                        <option value="pdf">📘 PDF</option>
                                    </select>
                                </div>
                           </div>

                          <button type="submit" class="btn btn-primary">Generar Reporte</button>

                            
                        </form>
                    </div>
                </div> {{-- FIN TAB --}}
            </div> {{-- FIN TAB CONTENT --}}
        </div>
    </div>
</div>

@endsection

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