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

@extends('layouts/layoutMaster')

@section('title', 'Code di stampa')

@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/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/@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"> 
    <i class="bx bx-printer"></i> Coda di stampa #{{ $print_job->id }}
    <small class="text-muted">{{ view('prenotazione._partials.stato-prenotazione', ['stato' => $print_job->stato]) }}</small>
</h4>
</div>
@endsection

@section('content')
<style>
  div.upload button:first-child{
    display: none !important;
  }

.bx-chef-hat{
  --svg: url("data:image/svg+xml,%3csvg width='24' height='24' fill='currentColor' viewBox='0 0 24 24' transform='' xmlns='http://www.w3.org/2000/svg'%3e%3c!--Boxicons v3.0.8 https://boxicons.com %7c License https://docs.boxicons.com/free--%3e%3cpath d='M17.13 5.54C16.33 3.42 14.32 2 12 2S7.67 3.42 6.87 5.54A5.506 5.506 0 0 0 2 11c0 2.07 1.18 3.95 3 4.88V18c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-2.12c1.82-.93 3-2.81 3-4.88 0-2.82-2.13-5.15-4.87-5.46m.53 8.75c-.4.14-.67.52-.67.94v1.78H7v-1.78c0-.42-.27-.8-.67-.94-1.4-.5-2.33-1.82-2.33-3.28 0-1.93 1.57-3.5 3.42-3.5.04 0 .14.01.18.02.49 0 .9-.31 1-.78.36-1.61 1.76-2.73 3.41-2.73s3.05 1.12 3.41 2.73c.1.47.51.81 1 .78.06 0 .12 0 .09-.01 1.93 0 3.5 1.57 3.5 3.5 0 1.47-.94 2.79-2.33 3.28ZM5 20h14v2H5z'%3e%3c/path%3e%3c/svg%3e");
}

.report-list-item-li:hover{
    transition: box-shadow 0.3s;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    cursor: pointer;
}


</style>

@include('_partials.status')

<!-- @include('ordine._partials.card_statistiche') -->

<div class="row justify-content-center">

  <!-- Card 1: Informazioni Ordine -->
  <div class="col-12 col-md-4 col-xl-3 mb-4 mt-2">
    <div class="card h-100">
      <div class="card-header d-flex align-items-center justify-content-between">
        <h5 class="card-title m-0 me-2">Informazioni coda di stampa</h5>
      </div>
      <div class="card-body">
      <div class="mb-3">
          <p><strong>Dispositivo:</strong> {{ $print_job->dispositivo->nome ?? '-' }}</p>
        </div>
      <div class="mb-3">
          <p><strong>Data creazione:</strong> {{ $print_job->created_at->format('d/m/Y H:i') }}</p>
        </div>
        <div class="mb-3">
          <p><strong>Stato:</strong> 
            {!! view('prenotazione._partials.stato-prenotazione', ['stato' => $print_job->stato]) !!}
          </p>
        </div>
        <div class="mb-3">
          <p><strong>Tipo:</strong> {{ $print_job->tipo ?? '-' }}</p>
        </div>
       
        
        
      </div>
    </div>
  </div>

  <!-- Card 2: Piatti -->
  <div class="col-12 col-md-6 col-xl-5 mb-4 mt-2">
    <div class="card h-100">
      <div class="card-header d-flex align-items-center justify-content-between">
        <h5 class="card-title m-0 me-2">Payload</h5>
        <div class="dropdown">
          <button class="btn text-muted p-0" type="button" id="transactionID" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="bx bx-dots-vertical-rounded bx-lg"></i>
          </button>
          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="transactionID">
            <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
            <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
            <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
          </div>
        </div>
      </div>
      <div class="card-body pt-4">
        <ul class="p-0 m-0">
          @if(!is_array($print_job->payload))
          <li>Payload non valido</li>
          @else
            @foreach($print_job->payload as $key => $value)  
            <li class="d-flex align-items-center mb-6 w-100">
                <div class=" flex-shrink-0 me-3 w-100">
                    <h6 class="mb-0">{{ $key }}</h6>
                    <small class="d-block mb-2">{{ $value }}</small>
                  </div>
              </li>
            @endforeach
        @endif
        </ul>
      </div>
    </div>
  </div>

  <!-- Card 3: Riepilogo Prezzo ed Entità Collegate -->
  <div class="col-12 col-md-6 col-xl-4 mb-4 mt-2">
    <div class="card h-100">
      <div class="card-header d-flex align-items-center justify-content-between">
        <h5 class="card-title m-0 me-2">Anteprima Scontrino</h5>
      </div>
      <div class="card-body">
        
      <div class="preview-scontrino">
        <div class="border rounded p-3 bg-light" style="font-family: monospace; font-size: 15px;">
          @php
            // ATTENZIONE: qui usiamo i dati da $print_job->ordine invece che dal payload
            $ordine = $print_job->ordine ?? null;
          @endphp
          <div class="text-center mb-2">
            <strong>*** SCONTRINO ***</strong><br>
            <small>{{ $ordine?->created_at?->format('d/m/Y H:i') ?? $print_job->created_at?->format('d/m/Y H:i') ?? '' }}</small>
          </div>

          <hr>
          @if(isset($ordine) && isset($ordine->righe_ordine) && is_iterable($ordine->righe_ordine))
            @foreach($ordine->righe_ordine as $riga)
              <div>
                <span>{{ $riga->piatto->nome ?? '-' }}</span>
                @if(isset($riga->quantita))
                  <span class="float-end">x{{ $riga->quantita }}</span>
                @endif
              </div>
              @if(isset($riga->prezzo))
                <div class="text-end mb-1">
                  €{{ number_format($riga->prezzo, 2, ',', '.') }}
                </div>
              @endif
            @endforeach
            <hr>
          @endif
          @if(isset($ordine) && isset($ordine->articoli) && is_iterable($ordine->articoli))
            @foreach($ordine->articoli as $articolo)
              <div>
                <span>{{ $articolo->nome ?? '-' }}</span>
                @if(isset($articolo->quantita))
                  <span class="float-end">x{{ $articolo->quantita }}</span>
                @endif
              </div>
              @if(isset($articolo->prezzo))
                <div class="text-end mb-1">
                  €{{ number_format($articolo->prezzo, 2, ',', '.') }}
                </div>
              @endif
            @endforeach
            <hr>
          @endif
          @if(isset($ordine) && isset($ordine->totale))
            <div class="d-flex justify-content-between">
              <span class="fw-bold">Totale</span>
              <span class="fw-bold">€{{ number_format($ordine->totale, 2, ',', '.') }}</span>
            </div>
          @endif
          @if(isset($ordine) && isset($ordine->pagamenti) && count($ordine->pagamenti))
            <div class="mt-2">
              <span>Pagamento:</span>
              @foreach($ordine->pagamenti as $pagamento)
                <span>{{ $pagamento->metodo_pagamento->nome ?? $pagamento->metodo ?? '-' }}</span>
                @if(!$loop->last), @endif
              @endforeach
            </div>
          @endif
          @if(isset($ordine) && !empty($ordine->note))
            <div class="mt-2">
              <em>Note: {{ $ordine->note }}</em>
            </div>
          @endif
          <div class="text-center mt-3" style="font-size:12px;">
            --- Grazie! ---
          </div>
        </div>
      </div>
        
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="basicModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel1">Modal title</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <div class="row">
                    <div class="col mb-6">
                      <label for="nameBasic" class="form-label">Name</label>
                      <input type="text" id="nameBasic" class="form-control" placeholder="Enter Name">
                    </div>
                  </div>
                  <div class="row g-6">
                    <div class="col mb-0">
                      <label for="emailBasic" class="form-label">Email</label>
                      <input type="email" id="emailBasic" class="form-control" placeholder="xxxx@xxx.xx">
                    </div>
                    <div class="col mb-0">
                      <label for="dobBasic" class="form-label">DOB</label>
                      <input type="date" id="dobBasic" class="form-control">
                    </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>
                </div>
              </div>
            </div>
          </div>

@endsection

@section('page-script')


@endsection
