@extends('layouts/guest')

@section('title', 'Dispositivi Associati')

@section('page-meta')
  <script>document.documentElement.classList.add('welcome-bacheca-page');</script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet" />
@endsection

@section('page-style')
  @vite(['resources/css/welcome.css'])
@endsection

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

<div class="welcome-bacheca__bg" data-bg="bold" aria-hidden="true">
  <div class="welcome-bacheca__bg-stripe"></div>
  <div class="welcome-bacheca__bg-pattern"></div>
  <div class="welcome-bacheca__bg-glow welcome-bacheca__bg-glow--orange"></div>
  <div class="welcome-bacheca__bg-glow welcome-bacheca__bg-glow--purple"></div>
  <div class="welcome-bacheca__bg-glow welcome-bacheca__bg-glow--navy"></div>
</div>

<div
  class="container-fluid min-vh-100 d-flex align-items-center justify-content-center px-3 py-4"
  style="--fest-orange:#f58220; --fest-orange-soft:#ff9a2e; --fest-purple:#602d91; --fest-navy:#15265c; --fest-text:#1a2744; --fest-text-muted:#4a5568;"
>
  <div class="welcome-bacheca__masthead w-100" style="max-width: 480px; margin-bottom: 0;">

    <div class="text-center mb-3">
      <img
        src="{{ asset('assets/img/logo_fest_L.png') }}"
        alt="{{ config('app.name') }}"
        class="img-fluid"
        style="max-height: 52px;"
      >
    </div>
    <div class="text-center mb-4">
      <p class="welcome-bacheca__eyebrow mb-2 justify-content-center">
        <span class="welcome-bacheca__live-dot" aria-hidden="true"></span>
        Dispositivi associati
      </p>
      <h1 class="welcome-bacheca__title mb-1" style="font-size: clamp(1.25rem, 3.6vw, 1.55rem);">
          Scegli il dispositivo
      </h1>
      <p class="welcome-bacheca__lead mb-0" style="font-size: 0.95rem;">
        Seleziona uno dei dispositivi associati al tuo account per continuare.
      </p>
    </div>
    @if(isset($dispositivi) && count($dispositivi))
    <div class="row g-3">
      @foreach($dispositivi as $dispositivo)
        <div class="col-12">
          <div class="card shadow-sm mb-0 text-start">
            <div class="card-body d-flex align-items-center justify-content-between">
              <div>
                <div class="fw-bold" style="font-size:1.15rem;">
                  {{ $dispositivo->nome ?? 'Nessun nome' }}
                </div>
                <div class="d-block text-muted" style="font-size:0.87rem;">
                  Tipo: {{ $dispositivo->tipo ? ucfirst(strtolower($dispositivo->tipo)) : '-' }}<br>
                  @if(!empty($dispositivo->descrizione))
                    <span>{{ $dispositivo->descrizione }}</span>
                  @endif
                </div>
              </div>
              <div>
                <form method="GET" action="{{ route('operatore.punto-vendita.show') }}">
                  <input type="hidden" name="punto_vendita_id" value="{{ $dispositivo->id }}"/>
                  <button type="submit" class="welcome-bacheca__btn welcome-bacheca__btn--primary ms-2">
                    Entra
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      @endforeach
    </div>
    @else
      <div class="alert alert-warning text-center mt-4">
        Nessun dispositivo associato al tuo account.
        <br>Contatta l'amministratore per maggiori informazioni.
      </div>
    @endif

    <div class="text-center mt-4">
      <a href="{{ route('operatore.logout') }}" class="btn btn-link text-muted small">
        Esci
      </a>
    </div>
  </div>
</div>
@endsection