@extends('layouts.planti')
@section('contenido')

<div class="container-fluid px-4">

    {{-- ALERTAS --}}
    @if(Session::has('success'))
        <div class="alert alert-success shadow-sm">
            {{ Session::get('success') }}
        </div>
    @endif

    {{-- HEADER --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold text-dark mb-0">📊 Reporte OTIF</h2>
    </div>

    {{-- CARD FILTROS --}}
    <div class="card shadow border-0 mb-4">
        <div class="card-body">

            <form method="GET" action="{{ url('exreportebrinsa') }}">
                
                <div class="row g-3 align-items-end">

                    <div class="col-md-3">
                        <label class="form-label">Fecha desde</label>
                        <input type="date" name="txtFechaini" class="form-control"
                            value="{{ $Fechaini }}">
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Fecha hasta</label>
                        <input type="date" name="txtFechafin" class="form-control"
                            value="{{ $Fechafin }}">
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Buscar</label>
                        <input type="text" name="numero_do" class="form-control"
                            placeholder="DO o Pedido..."
                            value="{{ $numero_do ?? '' }}">
                    </div>

                    <div class="col-md-2 d-grid">
                        <button type="submit" name="buscar" value="1"
                            class="btn btn-primary fw-bold">
                            🔍 Buscar
                        </button>
                    </div>

                </div>
            </form>

            {{-- BOTÓN DESCARGA --}}
            <form method="POST" action="{{ route('exportotif') }}" target="downloadFrame" id="formDownload" class="mt-3">
                @csrf
                <input type="hidden" name="txtFechaini" value="{{ $Fechaini }}">
                <input type="hidden" name="txtFechafin" value="{{ $Fechafin }}">
                <input type="hidden" name="numero_do" value="{{ $numero_do ?? '' }}">

                <div class="d-grid">
                    <button type="submit" class="btn btn-success fw-bold">
                        ⬇️ Descargar Excel
                    </button>
                </div>
            </form>

            {{-- LOADER --}}
            <div id="loaderText" class="text-center mt-3 fw-bold text-primary" style="display:none;">
                ⏳ Procesando información...
            </div>

        </div>
    </div>

    {{-- RESULTADOS --}}
    @if(isset($data) && $data->count() > 0)

    <div class="card shadow border-0">
        <div class="card-header bg-white fw-bold">
            📋 Resultados ({{ $data->total() }})
        </div>

        <div class="card-body table-responsive">

            <table class="table table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th>Fecha Apertura</th>
                        <th>DO</th>
                        <th>Pedido</th>
                        <th>Contenedor</th>
                        <th>Tamaño</th>
                        <th>Incoterm</th>
                        <th>ETA</th>
                        <th>Notificación</th>
                        <th>Prod Disponible</th>
                        <th>Programación</th>
                        <th>Fecha Req</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach($data as $row)
                        <tr>
                            <td>
                                {{ $row->fecha_apertura ? \Carbon\Carbon::parse($row->fecha_apertura)->format('Y-m-d') : '' }}
                            </td>
                            <td class="fw-bold text-primary">{{ $row->DO }}</td>
                            <td>{{ $row->PED }}</td>
                            <td>{{ $row->CONTENEDOR }}</td>
                            <td>{{ $row->NOMBRE_TAMANO_CONTENEDOR }}</td>


                            <td>
                                @if(!empty($row->INCOTERM))
                                    <span class="badge rounded-pill bg-light text-primary border border-primary">
                                        {{ $row->INCOTERM }}
                                    </span>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>   

                            <td>{{ $row->ETA }}</td>
                            <td>{{ $row->Fecha_notificacion_del_pedido }}</td>
                            <td>{{ $row->PROD_DISPONIBLE_CONFIRMADO_POR_PLANEACION }}</td>
                            <td>{{ $row->SOLICITUD_PROGRAMACION_XL }}</td>
                            <td>{{ $row->Fecha_requerida_unidad_en_Ctg }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            {{-- PAGINACIÓN --}}
            <div class="d-flex justify-content-center mt-3">
                {{ $data->links() }}
            </div>

        </div>
    </div>

    @endif

    {{-- SIN RESULTADOS --}}
    @if(isset($data) && $data->count() == 0 && request()->has('buscar'))
        <div class="alert alert-warning mt-4 text-center">
            ⚠️ No se encontraron resultados
        </div>
    @endif

</div>

<iframe name="downloadFrame" style="display:none;"></iframe>

{{-- SCRIPT --}}
<script>
    const loaderText = document.getElementById('loaderText');

    document.querySelector('form[action*="exreportebrinsa"]').addEventListener('submit', () => {
        loaderText.style.display = 'block';
    });

    document.getElementById('formDownload').addEventListener('submit', () => {
        loaderText.style.display = 'block';

        setTimeout(() => {
            loaderText.style.display = 'none';
        }, 5000);
    });
</script>

@endsection