<?php
use App\Models\Role;
use Illuminate\Support\Facades\Auth;
?>
@php
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Asporto')

@section('vendor-style')
@vite([
'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
'resources/assets/vendor/libs/apex-charts/apex-charts.scss',
'resources/assets/vendor/scss/pages/card-analytics.scss',
'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
'resources/assets/vendor/libs/@form-validation/form-validation.scss'
])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
@vite([
'resources/assets/vendor/libs/moment/moment.js',
'resources/assets/vendor/libs/flatpickr/flatpickr.js',
'resources/assets/vendor/libs/apex-charts/apexcharts.js',
'resources/assets/vendor/libs/@form-validation/popular.js',
'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
'resources/assets/vendor/libs/@form-validation/auto-focus.js',
'resources/assets/vendor/libs/@form-validation/popular.js',
'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
'resources/assets/vendor/libs/@form-validation/auto-focus.js',
'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js'
])
@endsection

@section('pageTitle')
<div class="d-flex flex-column">
  <h4 class="mb-1 text-sm-small mt-md-4 mt-lg-4">
    <i class="bx bx-package d-none d-md-inline-flex d-lg-inline-flex"></i> Asporto
  </h4>
  <nav aria-label="breadcrumb" style="font-size: smaller;" class="d-none d-md-block d-lg-block">
    <ol class="breadcrumb breadcrumb-custom-icon">
      <li class="breadcrumb-item">
        <a href="#">Dashboard</a>
        <i class="breadcrumb-icon icon-base bx bx-chevron-right align-middle"></i>
      </li>
              <li class="breadcrumb-item active text-primary">
                <a href="{{ route('asporto.dashboard') }}">Asporto</a>
              </li>
    </ol>
  </nav>
</div>
@endsection

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

<style>
  .asporto-board {
    --asp-prep: #f58220;
    --asp-call: #602d91;
    --asp-pick: #0d9488;
    --asp-time: #15265c;
    --asp-lane-h: calc(100vh - 14rem);
    --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);
    --asp-shadow: 0 6px 18px rgba(var(--bs-body-color-rgb, 21, 38, 92), .08);
  }

  [data-bs-theme="dark"] .asporto-board {
    --asp-time: #9db0e8;
    --asp-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  }

  .asporto-lane {
    background: var(--asp-surface);
    border: 1px solid var(--asp-border);
    border-radius: .9rem;
    min-height: 22rem;
    max-height: var(--asp-lane-h);
    display: flex;
    flex-direction: column;
    color: var(--asp-text);
  }

  .asporto-lane__head {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--asp-border);
    background: var(--asp-surface-2);
    border-radius: .9rem .9rem 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
  }

  .asporto-lane__head--prep { border-top: 3px solid var(--asp-prep); }
  .asporto-lane__head--call { border-top: 3px solid var(--asp-call); }
  .asporto-lane__head--pick { border-top: 3px solid var(--asp-pick); }
  .asporto-lane__head--time { border-top: 3px solid var(--asp-time); }

  .asporto-lane__body {
    padding: .75rem;
    overflow-y: auto;
    flex: 1;
  }

  .asporto-lane__foot {
    padding: .65rem .75rem;
    border-top: 1px solid var(--asp-border);
  }

  .asporto-card {
    border: 1px solid var(--asp-border);
    border-radius: .75rem;
    padding: .85rem .9rem;
    margin-bottom: .65rem;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
    background: var(--asp-surface-2);
    color: var(--asp-text);
  }

  .asporto-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--asp-shadow);
    border-color: rgba(var(--bs-primary-rgb), .45);
    background: var(--asp-surface);
  }

  .asporto-card__code {
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--asp-text);
  }

  .asporto-card__meta {
    font-size: .8rem;
    color: var(--asp-muted);
  }

  .asporto-timeline {
    position: relative;
    padding-left: 1.1rem;
  }

  .asporto-timeline::before {
    content: '';
    position: absolute;
    left: .35rem;
    top: .25rem;
    bottom: .25rem;
    width: 2px;
    background: linear-gradient(180deg, var(--asp-prep), var(--asp-call), var(--asp-time));
    opacity: .45;
  }

  .asporto-timeline__item {
    position: relative;
    padding: .55rem 0 .55rem .85rem;
    border-bottom: 1px dashed var(--asp-border);
    color: var(--asp-text);
  }

  .asporto-timeline__item:last-child { border-bottom: 0; }

  .asporto-timeline__dot {
    position: absolute;
    left: -.95rem;
    top: .85rem;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--asp-call);
    box-shadow: 0 0 0 3px rgba(96, 45, 145, .2);
  }

  .asporto-timeline__item[data-stato="preparazione"] .asporto-timeline__dot,
  .asporto-timeline__item[data-stato="da_preparare"] .asporto-timeline__dot {
    background: var(--asp-prep);
    box-shadow: 0 0 0 3px rgba(245, 130, 32, .22);
  }
  .asporto-timeline__item[data-stato="chiamata"] .asporto-timeline__dot,
  .asporto-timeline__item[data-stato="da_chiamare"] .asporto-timeline__dot {
    background: var(--asp-call);
    box-shadow: 0 0 0 3px rgba(96, 45, 145, .22);
  }
  .asporto-timeline__item[data-stato="ritiro"] .asporto-timeline__dot,
  .asporto-timeline__item[data-stato="da_ritirare"] .asporto-timeline__dot {
    background: var(--asp-pick);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, .22);
  }

  .asporto-timeline__item[data-stato="consegnato"] {
    opacity: .7;
  }

  .asporto-timeline__item[data-stato="consegnato"] .asporto-timeline__dot {
    background: #6c757d;
    box-shadow: 0 0 0 3px rgba(108, 117, 125, .22);
  }

  .asporto-check-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .65rem .75rem;
    border: 1px solid var(--asp-border);
    border-radius: .65rem;
    margin-bottom: .5rem;
    background: var(--asp-surface-2);
    color: var(--asp-text);
  }

  .asporto-check-item.is-done {
    opacity: .55;
    text-decoration: line-through;
  }

  .asporto-riepilogo-item {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--asp-border);
    color: var(--asp-text);
  }

  .asporto-riepilogo-item:last-child { border-bottom: 0; }

  #asportoOrdineModal .modal-content {
    background: var(--bs-modal-bg, var(--bs-card-bg));
    color: var(--asp-text);
    border-color: var(--asp-border);
  }

  #asportoOrdineModal .modal-header,
  #asportoOrdineModal .modal-footer {
    border-color: var(--asp-border);
  }

  @media (max-width: 1199.98px) {
    .asporto-board { --asp-lane-h: none; }
    .asporto-lane { max-height: none; }
  }

  .asporto-slot-link-card {
    border-color: var(--asp-border) !important;
    background: var(--asp-surface);
    color: var(--asp-text);
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  .asporto-slot-link-card:hover {
    border-color: color-mix(in srgb, var(--asp-time) 40%, var(--asp-border)) !important;
    box-shadow: var(--asp-shadow);
  }
</style>

<div class="mb-3">
  <a href="{{ route('asporto.dashboard.slot') }}" class="card text-decoration-none text-body border asporto-slot-link-card">
    <div class="card-body d-flex align-items-center justify-content-between gap-3 py-3">
      <div class="d-flex align-items-start gap-3">
        <span class="avatar avatar-md rounded bg-label-primary">
          <i class="bx bx-grid bx-sm"></i>
        </span>
        <div>
          <div class="fw-bold">Occupazione slot</div>
          <div class="small text-muted">Griglia oraria con posti reali occupati e liberi</div>
        </div>
      </div>
      <i class="bx bx-chevron-right fs-4 text-muted"></i>
    </div>
  </a>
</div>

<div class="row g-3 asporto-board" id="asportoBoard">
  @include('asporto._partials.dashboard.preparazione', ['mostraLinkPostazione' => true])
  @include('asporto._partials.dashboard.chiamata', ['mostraLinkPostazione' => true])
  @include('asporto._partials.dashboard.ritiro', ['mostraLinkPostazione' => true])
  @include('asporto._partials.timeline')
</div>

@include('asporto._partials.modal.da_preparare')
@include('asporto._partials.modal.da_chiamare')
@include('asporto._partials.modal.da_ritirare')
@endsection
