@php
  $configData = Helper::appClasses();

  $formatMinutes = function (?int $total): string {
    if ($total === null) {
      return '—';
    }
    return sprintf('%02d:%02d', intdiv($total, 60), $total % 60);
  };

  $statoColors = [
    'preparazione' => 'var(--asp-prep)',
    'chiamata' => 'var(--asp-call)',
    'ritiro' => 'var(--asp-pick)',
    'consegnato' => '#6c757d',
  ];
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Occupazione slot asporto')

@section('pageTitle')
<div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-sm-between gap-2">
  <div>
    <h4 class="mb-1 text-sm-small mt-md-4 mt-lg-4">
      <i class="bx bx-grid d-none d-md-inline-flex"></i> Occupazione slot
    </h4>
    <nav aria-label="breadcrumb" style="font-size: smaller;" class="d-none d-md-block">
      <ol class="breadcrumb breadcrumb-custom-icon mb-0">
        <li class="breadcrumb-item">
          <a href="{{ route('asporto.dashboard') }}">Asporto</a>
          <i class="breadcrumb-icon icon-base bx bx-chevron-right align-middle"></i>
        </li>
        <li class="breadcrumb-item active text-primary">Occupazione slot</li>
      </ol>
    </nav>
  </div>
  <a href="{{ route('asporto.dashboard') }}" class="btn btn-sm btn-label-secondary">
    <i class="bx bx-arrow-back me-1"></i> Dashboard
  </a>
</div>
@endsection

@section('content')
@include('_partials.status')

<style>
  .asporto-slot-live {
    --asp-prep: #f58220;
    --asp-call: #602d91;
    --asp-pick: #0d9488;
    --asp-time: #15265c;
    --asp-surface: var(--bs-card-bg);
    --asp-surface-2: var(--bs-tertiary-bg);
    --asp-border: var(--bs-border-color);
    --asp-text: var(--bs-body-color);
    --asp-muted: var(--bs-secondary-color);
  }

  [data-bs-theme="dark"] .asporto-slot-live {
    --asp-time: #9db0e8;
  }

  .asporto-slot-live__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
  }

  .asporto-slot-live__stat {
    border: 1px solid var(--asp-border);
    border-radius: .75rem;
    background: var(--asp-surface);
    padding: .75rem .9rem;
  }

  .asporto-slot-live__stat-label {
    font-size: .72rem;
    color: var(--asp-muted);
    margin-bottom: .15rem;
  }

  .asporto-slot-live__stat-value {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--asp-text);
  }

  .asporto-slot-live__card {
    border: 1px solid var(--asp-border);
    border-radius: .9rem;
    background: var(--asp-surface);
  }

  .asporto-slot-live__card-head {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--asp-border);
    background: var(--asp-surface-2);
    border-radius: .9rem .9rem 0 0;
    border-top: 3px solid var(--asp-time);
  }

  .asporto-slot-live__card-body {
    padding: .85rem 1rem 1rem;
    overflow-x: auto;
  }

  .asporto-slot-preview__table {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .82rem;
  }

  .asporto-slot-preview__table th,
  .asporto-slot-preview__table td {
    border-bottom: 1px solid var(--asp-border);
    vertical-align: middle;
  }

  .asporto-slot-preview__table thead th {
    padding: .35rem .4rem;
    font-size: .72rem;
    font-weight: 800;
    color: var(--asp-muted);
    text-align: center;
  }

  .asporto-slot-preview__table thead th.is-label {
    text-align: left;
    width: 7.5rem;
    min-width: 7.5rem;
  }

  .asporto-slot-preview__label {
    padding: .35rem .5rem .35rem 0;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--asp-text);
    border-right: 1px solid var(--asp-border);
    background: var(--asp-surface);
    position: sticky;
    left: 0;
    z-index: 1;
  }

  .asporto-slot-preview__label small {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    color: var(--asp-muted);
  }

  .asporto-slot-preview__track-cell {
    padding: .15rem .2rem;
    min-width: 5.5rem;
  }

  .asporto-slot-preview__track {
    position: relative;
    height: 1.55rem;
    border-radius: .25rem;
    background:
      repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(100% / var(--asp-parts, 4) - 1px),
        color-mix(in srgb, var(--asp-border) 70%, transparent) calc(100% / var(--asp-parts, 4) - 1px),
        color-mix(in srgb, var(--asp-border) 70%, transparent) calc(100% / var(--asp-parts, 4))
      ),
      color-mix(in srgb, var(--asp-border) 22%, transparent);
  }

  .asporto-slot-preview__bar {
    position: absolute;
    top: .18rem;
    bottom: .18rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .35rem;
    border-radius: .25rem;
    color: #fff;
    overflow: hidden;
    min-width: 1.6rem;
    font-size: .65rem;
    font-weight: 800;
    white-space: nowrap;
  }

  .asporto-slot-preview__bar.is-free {
    background: color-mix(in srgb, var(--asp-border) 55%, transparent);
    color: var(--asp-muted);
    font-weight: 700;
  }

  .asporto-slot-preview__bar.is-full {
    outline: 1px solid rgba(255, 255, 255, .35);
  }

  .asporto-slot-preview__table tbody tr.is-slot-start .asporto-slot-preview__label,
  .asporto-slot-preview__table tbody tr.is-slot-start .asporto-slot-preview__track-cell {
    border-top: 1px solid var(--asp-border);
  }

  .asporto-slot-preview__table tbody tr:not(.is-slot-start) .asporto-slot-preview__track-cell {
    border-top: 0;
  }

  .asporto-slot-live__meta {
    margin-top: .65rem;
    font-size: .75rem;
    color: var(--asp-muted);
  }

  .asporto-slot-live__legend {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1rem;
    margin-top: .75rem;
    font-size: .75rem;
    color: var(--asp-muted);
  }

  .asporto-slot-live__legend span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
  }

  .asporto-slot-live__dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    display: inline-block;
  }

  @media (max-width: 767.98px) {
    .asporto-slot-live__stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
</style>

<div class="asporto-slot-live">
  <div class="asporto-slot-live__stats">
    <div class="asporto-slot-live__stat">
      <div class="asporto-slot-live__stat-label">Ordini / ora</div>
      <div class="asporto-slot-live__stat-value">{{ $capacitaOra }}</div>
    </div>
    <div class="asporto-slot-live__stat">
      <div class="asporto-slot-live__stat-label">Capacità totale</div>
      <div class="asporto-slot-live__stat-value">{{ $capacitaTotale }}</div>
    </div>
    <div class="asporto-slot-live__stat">
      <div class="asporto-slot-live__stat-label">Occupati oggi</div>
      <div class="asporto-slot-live__stat-value">{{ $occupati }}</div>
    </div>
    <div class="asporto-slot-live__stat">
      <div class="asporto-slot-live__stat-label">Liberi</div>
      <div class="asporto-slot-live__stat-value">{{ $liberi }}</div>
    </div>
  </div>

  <div class="asporto-slot-live__card">
    <div class="asporto-slot-live__card-head">
      <div class="fw-bold">Griglia slot di oggi</div>
      <div class="small text-muted">
        Fascia {{ $formatMinutes($startMin) }}–{{ $formatMinutes($endMin) }}
        · slot da {{ $durata }} min
        · max {{ $maxOrdini }} ordini/slot
      </div>
    </div>
    <div class="asporto-slot-live__card-body">
      @if(empty($minuteSlots) || empty($hours) || empty($slots))
        <div class="text-muted small py-2">
          Configura orari e durata slot per vedere l’occupazione.
        </div>
      @else
        <table class="asporto-slot-preview__table">
          <thead>
            <tr>
              <th class="is-label">Minuti</th>
              @foreach($hours as $h)
                <th>{{ sprintf('%02d:00', $h) }}</th>
              @endforeach
            </tr>
          </thead>
          <tbody>
            @foreach($minuteSlots as $ms)
              @for($i = 1; $i <= $maxOrdini; $i++)
                <tr class="{{ $i === 1 ? 'is-slot-start' : 'is-slot-cont' }}">
                  @if($i === 1)
                    <th scope="row" class="asporto-slot-preview__label" rowspan="{{ $maxOrdini }}">
                      {{ $ms['label'] }}
                      <small>{{ $maxOrdini }} posti</small>
                    </th>
                  @endif
                  @foreach($hours as $h)
                    @php
                      $absStart = $h * 60 + $ms['start'];
                      $active = !empty($activeKeys[$absStart]);
                      $asporto = ($occupancy[$absStart] ?? [])[$i - 1] ?? null;
                      $leftPct = ($ms['start'] / 60) * 100;
                      $widthPct = max((($ms['end'] - $ms['start']) / 60) * 100, 4);
                    @endphp
                    <td class="asporto-slot-preview__track-cell">
                      <div class="asporto-slot-preview__track" style="--asp-parts: {{ count($minuteSlots) }}">
                        @if($active)
                          @if($asporto)
                            @php
                              $ordine = $asporto->ordine;
                              $info = is_array($ordine?->info) ? $ordine->info : [];
                              $codice = $ordine->codice ?? ('A-'.$asporto->ordine_id);
                              $cliente = $info['cliente'] ?? ($ordine->nome ?? '');
                              $color = $statoColors[$asporto->stato] ?? 'var(--asp-time)';
                            @endphp
                            <div
                              class="asporto-slot-preview__bar is-full"
                              style="left:{{ $leftPct }}%;width:{{ $widthPct }}%;background:{{ $color }}"
                              title="{{ $codice }} · {{ $cliente }} · {{ $asporto->stato }}"
                            >
                              {{ $codice }}
                            </div>
                          @else
                            <div
                              class="asporto-slot-preview__bar is-free"
                              style="left:{{ $leftPct }}%;width:{{ $widthPct }}%"
                              title="Posto libero"
                            >
                              libero
                            </div>
                          @endif
                        @endif
                      </div>
                    </td>
                  @endforeach
                </tr>
              @endfor
            @endforeach
          </tbody>
        </table>

        <div class="asporto-slot-live__meta">
          {{ count($slots) }} slot · {{ $occupati }} occupati · {{ $liberi }} liberi
          · {{ $capacitaOra }} ordini/ora · {{ $capacitaTotale }} capacità totale
        </div>

        <div class="asporto-slot-live__legend">
          <span><i class="asporto-slot-live__dot" style="background:var(--asp-prep)"></i>Preparazione</span>
          <span><i class="asporto-slot-live__dot" style="background:var(--asp-call)"></i>Chiamata</span>
          <span><i class="asporto-slot-live__dot" style="background:var(--asp-pick)"></i>Ritiro</span>
          <span><i class="asporto-slot-live__dot" style="background:#6c757d"></i>Consegnato</span>
          <span><i class="asporto-slot-live__dot" style="background:color-mix(in srgb, var(--asp-border) 70%, transparent)"></i>Libero</span>
        </div>
      @endif
    </div>
  </div>
</div>
@endsection
