@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<br>
<h1>TRACKING DE ORDEN</h1>
<br>
<div class="container-flex">




    {{-- CARD DE ORDEN / SEGUIMIENTO (Izquierda) --}}
    <div class="card">
        <div class="card-header"></div>
        <div class="card-body">
            <h1>N° Orden: 990746359</h1>
            <h2><p><strong>Estado:</strong> Carga en Ruta / Día en Entrega</p></h2>
        </div>
        <div class="timeline">
            <div class="timeline-item estado-pendiente">
                <div>--/--/-- --:-- </div>
                <div><img src="{{ asset('images/circulo banner desactivado.svg') }}" style="height: 20px;" /></div>
                <div>Carga Entregada</div>
            </div>
            <div class="timeline-item estado-activo">
                <div>01/10/2025 08:00 </div>
                <div><img src="{{ asset('images/circulo banner activo.svg') }}" style="height: 30px;" /></div>
                <div>Carga en Ruta / Día en Entrega</div>
            </div>
            <div class="timeline-item estado-completado-1">
                <div>30/09/2025 18:30 </div>
                <div><img src="{{ asset('images/circulo banner desactivado.svg') }}" style="height: 20px;" /></div>
                <div>Carga Arribada en Región Destino</div>
            </div>
            <div class="timeline-item estado-completado-2">
                <div>29/09/2025 03:10 </div>
                <div><img src="{{ asset('images/circulo banner desactivado.svg') }}" style="height: 20px;" /></div>
                <div>Salida CD - Newtrans a Región</div>
            </div>
            <div class="timeline-item estado-completado-3">
                <div>28/09/2025 16:10 </div>
                <div><img src="{{ asset('images/circulo banner desactivado.svg') }}" style="height: 20px;" /></div>
                <div>Recepcionado en Newtrans, SANTIAGO</div>
            </div>
        </div>
    </div>

    {{-- DERECHA: Agrupados con scroll --}}
    <div class="right-column">

        {{-- CARD DE DATOS --}}
        <div class="card">
            <div class="card-header"></div>
            <div class="card-body">
                <h2>Datos</h2>
            </div>
            <div class="card-content">
                <div>
                    <strong>Nombre y apellido</strong>
                    Juan Pérez
                </div>
                <div>
                    <strong>Email:</strong>
                    correo@empresa.com
                </div>
                <div>
                    <strong>Rut:</strong>
                    10.875.982-1
                </div>
                <div>
                    <strong>Dirección:</strong>
                    Calle Copihues #124
                </div>
                <div>
                    <strong>Teléfono:</strong>
                    9 9876 5442
                </div>
            </div>
        </div>

        {{-- CARD DE INCIDENCIAS --}}
        <div class="card">
            <div class="card-header"></div>
            <div class="card-body">
                <h2>Incidencias</h2>
            </div>
            <div class="card-content" style="grid-template-columns: 1fr 1fr 2fr;">
                <strong>Incidencia</strong> <strong>Fecha</strong> <strong>Observaciones</strong>
                <div>1</div> <div>-</div> <div>-</div>
                <div>2</div> <div>-</div> <div>-</div>
                <div>3</div> <div>-</div> <div>-</div>
            </div>
        </div>

        {{-- CARD DE CEDIBLES --}}
        <div class="card">
            <div class="card-header"></div>
            <div class="card-body">
                <h2>Cedibles</h2>
            </div>
            <div class="cedibles-actions">
                <button class="btn btn-download">
                    <img src="{{ asset('images/descarga.svg') }}" style="height: 12px;" /> Descargar
                </button>
            </div>
            <div>
                <object class="pdf-viewer" data="ejemplo.pdf" type="application/pdf"></object>
            </div>
        </div>

    </div>
</div>
@endsection