@extends('layouts.erp')

@section('content')

<style>

.tracking-wrapper{

    max-width:1300px;

    margin:auto;
}

/* =========================================
   HEADER
========================================== */

.tracking-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;
}

.tracking-title h1{

    font-size:38px;

    font-weight:800;

    color:#1f2937;

    margin-bottom:8px;
}

.tracking-title p{

    color:#6b7280;

    margin:0;

    font-size:16px;
}

/* =========================================
   CLIENT CARD
========================================== */

.client-card{

    background:white;

    border-radius:28px;

    padding:35px;

    margin-bottom:35px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.04);

    position:relative;

    overflow:hidden;
}

.client-card::before{

    content:'';

    position:absolute;

    width:300px;
    height:300px;

    background:rgba(122,0,20,.03);

    border-radius:50%;

    right:-120px;
    top:-120px;
}

.client-card h2{

    font-size:34px;

    font-weight:800;

    margin-bottom:10px;

    color:#1f2937;

    position:relative;
    z-index:2;
}

.client-card p{

    color:#6b7280;

    margin:0;

    font-size:16px;

    position:relative;
    z-index:2;
}

/* =========================================
   STATUS BADGE
========================================== */

.status-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 24px;

    border-radius:50px;

    font-weight:700;

    font-size:15px;
}

.badge-warning{

    background:#fff4db;
    color:#f39c12;
}

.badge-info{

    background:#eaf4ff;
    color:#3498db;
}

.badge-success{

    background:#e8fff1;
    color:#27ae60;
}

.badge-danger{

    background:#ffeaea;
    color:#e74c3c;
}

/* =========================================
   STEPPER
========================================== */

.stepper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    position:relative;

    margin:50px 0;
}

.stepper::before{

    content:'';

    position:absolute;

    top:26px;
    left:0;

    width:100%;
    height:5px;

    background:#e5e7eb;

    z-index:1;

    border-radius:30px;
}

.step{

    position:relative;

    z-index:2;

    text-align:center;

    width:33%;
}

.circle{

    width:56px;
    height:56px;

    border-radius:50%;

    background:#d1d5db;

    color:white;

    display:flex;

    align-items:center;
    justify-content:center;

    margin:auto;

    font-size:20px;

    font-weight:bold;

    box-shadow:
    0 8px 20px rgba(0,0,0,.08);
}

.step.active .circle{

    background:#7A0014;
}

.step.completed .circle{

    background:#27ae60;
}

.step span{

    display:block;

    margin-top:14px;

    font-weight:700;

    color:#4b5563;
}

/* =========================================
   GRID
========================================== */

.info-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:25px;
}

/* =========================================
   INFO CARD
========================================== */

.info-card{

    background:white;

    border-radius:24px;

    padding:30px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.04);

    transition:.25s;
}

.info-card:hover{

    transform:translateY(-4px);

    box-shadow:
    0 15px 35px rgba(0,0,0,.06);
}

.info-card h3{

    margin-top:0;

    margin-bottom:25px;

    font-size:20px;

    color:#7A0014;

    font-weight:800;
}

.info-item{

    margin-bottom:22px;
}

.info-item small{

    display:block;

    margin-bottom:8px;

    color:#9ca3af;

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.5px;
}

.info-item strong{

    color:#111827;

    font-size:17px;

    font-weight:700;
}

/* =========================================
   STATUS CARD
========================================== */

.status-card{

    margin-top:30px;

    background:white;

    border-radius:24px;

    padding:40px;

    text-align:center;

    box-shadow:
    0 10px 30px rgba(0,0,0,.04);
}

.status-card h2{

    margin-bottom:25px;

    font-weight:800;

    color:#1f2937;
}

/* =========================================
   ACTIVITY
========================================== */

.activity-card{

    margin-top:30px;

    background:white;

    border-radius:24px;

    padding:35px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.04);
}

.activity-card h3{

    margin-bottom:30px;

    font-weight:800;

    color:#7A0014;
}

.activity-item{

    display:flex;

    align-items:flex-start;

    margin-bottom:25px;
}

.activity-dot{

    width:14px;
    height:14px;

    border-radius:50%;

    background:#7A0014;

    margin-top:6px;

    margin-right:18px;

    flex-shrink:0;
}

.activity-content strong{

    display:block;

    margin-bottom:6px;

    color:#111827;
}

.activity-content small{

    color:#6b7280;
}

/* =========================================
   FOOTER
========================================== */

.tracking-footer{

    text-align:center;

    margin-top:40px;

    color:#9ca3af;

    font-size:14px;
}

</style>

@php

$estatus = strtolower($servicio->estatus);

$step = 1;

$badge = 'badge-warning';

$icon = 'fa-spinner';

if(str_contains($estatus,'laboratorio'))
{
    $step = 2;
    $badge = 'badge-info';
    $icon = 'fa-vials';
}

if(str_contains($estatus,'pruebas'))
{
    $step = 2;
    $badge = 'badge-info';
    $icon = 'fa-vials';
}

if(str_contains($estatus,'validacion'))
{
    $step = 3;
    $badge = 'badge-warning';
    $icon = 'fa-search';
}

if(str_contains($estatus,'emitido'))
{
    $step = 3;
    $badge = 'badge-success';
    $icon = 'fa-check-circle';
}

if(str_contains($estatus,'rechazado'))
{
    $step = 3;
    $badge = 'badge-danger';
    $icon = 'fa-times-circle';
}

@endphp

<div class="tracking-wrapper">

    <!-- HEADER -->

    <div class="tracking-header">

        <div class="tracking-title">

            <h1>
                Tracking de Servicio
            </h1>

            <p>
                Seguimiento profesional de certificación NOM
            </p>

        </div>

        <div class="status-badge {{ $badge }}">

            <i class="fas {{ $icon }}"></i>

            {{ $servicio->estatus }}

        </div>

    </div>

    <!-- CLIENT -->

    <div class="client-card">

        <h2>
            Hola {{ $servicio->cliente }}
        </h2>

        <p>
            Consulta el avance actualizado de tu proceso de certificación.
        </p>

    </div>

    <!-- STEPPER -->

    <div class="stepper">

        <div class="step completed">

            <div class="circle">
                <i class="fas fa-folder-open"></i>
            </div>

            <span>Inicio</span>

        </div>

        <div class="step {{ $step >= 2 ? 'active' : '' }}">

            <div class="circle">
                <i class="fas fa-vials"></i>
            </div>

            <span>Pruebas</span>

        </div>

        <div class="step {{ $step >= 3 ? 'active' : '' }}">

            <div class="circle">
                <i class="fas fa-certificate"></i>
            </div>

            <span>Certificación</span>

        </div>

    </div>

    <!-- GRID -->

    <div class="info-grid">

        <!-- SERVICIO -->

        <div class="info-card">

            <h3>Servicio</h3>

            <div class="info-item">

                <small>Folio Cotización</small>

                <strong>
                    {{ $servicio->no_cotizacion }}
                </strong>

            </div>

            <div class="info-item">

                <small>Número Servicio</small>

                <strong>
                    {{ $servicio->no_servicio }}
                </strong>

            </div>

        </div>

        <!-- PRODUCTO -->

        <div class="info-card">

            <h3>Producto</h3>

            <div class="info-item">

                <small>Producto</small>

                <strong>
                    {{ $servicio->producto }}
                </strong>

            </div>

            <div class="info-item">

                <small>NOM</small>

                <strong>
                    {{ $servicio->nom }}
                </strong>

            </div>

        </div>

        <!-- FECHAS -->

        <div class="info-card">

            <h3>Fechas</h3>

            <div class="info-item">

                <small>Ingreso</small>

                <strong>
                    {{ $servicio->fecha_ingreso }}
                </strong>

            </div>

            <div class="info-item">

                <small>Emisión Tentativa</small>

                <strong>
                    {{ $servicio->fecha_emision ?? 'Pendiente' }}
                </strong>

            </div>

        </div>

    </div>

    <!-- STATUS -->

    <div class="status-card">

        <h2>
            Estatus Actual
        </h2>

        <div class="status-badge {{ $badge }}">

            <i class="fas {{ $icon }}"></i>

            {{ $servicio->estatus }}

        </div>

    </div>

    <!-- ACTIVITY -->

    <div class="activity-card">

        <h3>
            Última Actividad
        </h3>

        <div class="activity-item">

            <div class="activity-dot"></div>

            <div class="activity-content">

                <strong>
                    Servicio registrado correctamente
                </strong>

                <small>
                    {{ $servicio->created_at }}
                </small>

            </div>

        </div>

        @if($step >= 2)

        <div class="activity-item">

            <div class="activity-dot"></div>

            <div class="activity-content">

                <strong>
                    Servicio ingresado a laboratorio
                </strong>

                <small>
                    Área técnica ASITEC
                </small>

            </div>

        </div>

        @endif

        @if($step >= 3)

        <div class="activity-item">

            <div class="activity-dot"></div>

            <div class="activity-content">

                <strong>
                    Validación y certificación completada
                </strong>

                <small>
                    Proceso finalizado correctamente
                </small>

            </div>

        </div>

        @endif

    </div>

    <!-- FOOTER -->

    <div class="tracking-footer">

        Actualizado en tiempo real por ASITEC ERP

    </div>

</div>

@endsection