<?php

use Illuminate\Support\Facades\Auth;
use App\Models\Config;
?>

@extends('layouts/layoutMaster')

@section('title', 'Segnalazione')

@section('vendor-script')
@vite([
'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
'resources/assets/vendor/libs/quill/katex.js',
'resources/assets/vendor/libs/quill/quill.js'
])
@endsection

@section('vendor-style')
@vite([
'resources/assets/vendor/libs/datatables-rowgroup-bs5/rowgroup.bootstrap5.scss',
'resources/assets/vendor/libs/quill/typography.scss',
'resources/assets/vendor/libs/quill/katex.scss',
'resources/assets/vendor/libs/quill/editor.scss'
])

@endsection

@section('pageTitle')
<div class="d-flex flex-column">
  <h4 class="mb-1">Segnalazione #{{ $segnalazione->id }}</h4>
</div>
@endsection

@section('content')
<div class="row justify-content-center mt-3">
  <div class="col-lg-12">

    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      <i class="bx bx-check-circle me-2"></i>
      {{ session('success') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      <i class="bx bx-error-circle me-2"></i>
      {{ session('error') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    @if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      <i class="bx bx-error-circle me-2"></i>
      <ul class="mb-0">
        @foreach($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
      </ul>
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    @php
    $configStato = $segnalazione->getConfiguraStato();
    $puoModificareStato = Auth::user()->can('edit-segnalazione');
    $configPriorita = $segnalazione->getConfiguraPriorita();
    $configTipo = $segnalazione->getConfiguraTipo();

    // Calcola statistiche
    $tempoTotale = $segnalazione->getTempoImpiegato(asLabel: true);
    $costoTotale = $segnalazione->getCostoSegnalazione(asLabel: true);
    $numAnnotazioni = $segnalazione->annotazioni->count();
    $numAllegati = $segnalazione->annotazioni->sum(function($annotazione) {
      return $annotazione->allegatiAnnotazione->count() ?? 0;
    });
    $firstAllegatoId = \App\Models\AllegatoAnnotazione::whereIn('annotazione_id', $segnalazione->annotazioni->pluck('id'))
      ->orderBy('created_at')
      ->value('id');

    // Crea timeline unificata con tutti gli eventi
    $eventi = collect();

    // Eventi: Annotazioni
    $isFirst = true;
    foreach($segnalazione->annotazioni()->orderBy('id', 'asc')->get() as $annotazione) {
      $hasText = $annotazione->text && trim($annotazione->text) !== '';
      $hasCosto = $annotazione->costo !== null && $annotazione->costo != 0;
      $hasTempo = $annotazione->tempo_minuti !== null && $annotazione->tempo_minuti > 0;

      if (!($hasText || $hasCosto || $hasTempo)) {
        continue;
      }

      $eventi->push([
      'tipo' => $isFirst ? 'creazione' : 'annotazione',
      'data' => $annotazione->created_at,
      'titolo' => $isFirst ? 'Segnalazione creata' : 'Annotazione',
      'descrizione' => $annotazione->text,
      'icona' => $isFirst ? 'bx-flag' : 'bx-comment-dots',
      'colore' => $isFirst ? 'primary' : 'info',
      'dati' => [
      'annotazione' => $annotazione,
      'user' => [
      'isUser' => $annotazione->user ? true : false,
      'nome' => $annotazione->user ? $annotazione->user->full_name : $annotazione->riferimento,
      'email' => $annotazione->user ? $annotazione->user->email : $annotazione->email,
      'telefono' => $annotazione->user ? $annotazione->user->telefono : $annotazione->telefono,
      ],
      ]
      ]);
      $isFirst = false;
    }

    // Eventi: Audit cambiamenti di stato
    $audits = $segnalazione->audits()->where('event', 'updated')->orderBy('created_at', 'desc')->get();
    foreach($audits as $audit) {
      // Gestisce sia array che stringhe JSON
      $oldValues = [];
      if($audit->old_values) {
        $oldValues = is_array($audit->old_values) ? $audit->old_values : (json_decode($audit->old_values, true) ?: []);
      }

      $newValues = [];
      if($audit->new_values) {
        $newValues = is_array($audit->new_values) ? $audit->new_values : (json_decode($audit->new_values, true) ?: []);
      }

      // Controlla se lo stato è stato modificato
      if(isset($oldValues['stato']) || isset($newValues['stato'])) {
        $statoVecchio = $oldValues['stato'] ?? null;
        $statoNuovo = $newValues['stato'] ?? null;

        // Se lo stato è cambiato (non solo creato)
        if($statoVecchio !== $statoNuovo && $statoNuovo !== null) {
          // Recupera le configurazioni degli stati
          $configStatoVecchio = $statoVecchio ? \App\Models\ConfiguraSegnalazione::where('gruppo', 'stato')->where('value', $statoVecchio)->first() : null;
          $configStatoNuovo = \App\Models\ConfiguraSegnalazione::where('gruppo', 'stato')->where('value', $statoNuovo)->first();

          // Recupera l'utente che ha fatto la modifica
          $utente = null;
          if($audit->user_id && $audit->user_type) {
            try {
              $userModel = $audit->user_type;
              $utente = $userModel::find($audit->user_id);
            } catch(\Exception $e) {
              // Ignora errori
            }
          }

          $eventi->push([
          'tipo' => 'stato',
          'data' => $audit->created_at,
          'titolo' => 'Cambio stato',
          'descrizione' => ($configStatoVecchio ? $configStatoVecchio->label : 'N/A') . ' → ' . ($configStatoNuovo ? $configStatoNuovo->label : 'N/A'),
          'icona' => $configStatoNuovo ? $configStatoNuovo->icona : 'bx-transfer',
          'colore' => $configStatoNuovo ? $configStatoNuovo->colore : 'secondary',
          'dati' => [
          'stato_vecchio' => $statoVecchio,
          'stato_vecchio_label' => $configStatoVecchio ? $configStatoVecchio->label : null,
          'stato_vecchio_colore' => $configStatoVecchio ? $configStatoVecchio->colore : null,
          'stato_nuovo' => $statoNuovo,
          'stato_nuovo_label' => $configStatoNuovo ? $configStatoNuovo->label : null,
          'stato_nuovo_colore' => $configStatoNuovo ? $configStatoNuovo->colore : null,
          'user' => [
          'isUser' => $utente ? true : false,
          'nome' => $utente ? $utente->full_name : 'Sistema',
          'email' => $utente ? $utente->email : null,
          'telefono' => $utente ? $utente->telefono : null,
          ],
          'ip_address' => $audit->ip_address
          ]
          ]);
        }
      }
    }

    // Ordina per data (dal più recente al più vecchio per la timeline)
    $eventi = $eventi->sortByDesc('data')->values();
    @endphp

    <!-- Card KPI in Alto -->
    <div class="row g-3 mb-4">
      <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm h-100 cursor-pointer" role="button" onclick="openModalTempoImpiegato({{ $segnalazione->id }})">
          <div class="card-body text-center p-3">
            <div class="avatar mx-auto mb-2" style="width: 48px; height: 48px;">
              <div class="avatar-initial bg-label-success rounded-circle d-flex align-items-center justify-content-center">
                <i class="bx bx-time-five fs-5"></i>
              </div>
            </div>
            <h5 class="mb-0 fw-bold">{{ $tempoTotale }}</h5>
            <small class="text-muted">Tempo Totale</small>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm h-100" role="button" onclick="openModalCostoSegnalazione({{ $segnalazione->id }})">
          <div class="card-body text-center p-3">
            <div class="avatar mx-auto mb-2" style="width: 48px; height: 48px;">
              <div class="avatar-initial bg-label-warning rounded-circle d-flex align-items-center justify-content-center">
                <i class="bx bx-money fs-5"></i>
              </div>
            </div>
            <h5 class="mb-0 fw-bold">{{ $costoTotale }}</h5>
            <small class="text-muted">Costo Totale</small>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-body text-center p-3">
            <div class="avatar mx-auto mb-2" style="width: 48px; height: 48px;">
              <div class="avatar-initial bg-label-info rounded-circle d-flex align-items-center justify-content-center">
                <i class="bx bx-comment-dots fs-5"></i>
              </div>
            </div>
            <h5 class="mb-0 fw-bold">{{ $numAnnotazioni }}</h5>
            <small class="text-muted">Annotazioni</small>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm h-100 @if($numAllegati > 0 && $firstAllegatoId) cursor-pointer @endif"
          @if($numAllegati > 0 && $firstAllegatoId)
          role="button"
          onclick="openModalAllegato({{ $firstAllegatoId }})"
          @endif>
          <div class="card-body text-center p-3">
            <div class="avatar mx-auto mb-2" style="width: 48px; height: 48px;">
              <div class="avatar-initial bg-label-primary rounded-circle d-flex align-items-center justify-content-center">
                <i class="bx bx-folder-open fs-5"></i>
              </div>
            </div>
            <h5 class="mb-0 fw-bold">{{ $numAllegati }}</h5>
            <small class="text-muted">Allegati</small>
          </div>
        </div>
      </div>
    </div>

    <!-- Header Card con Titolo e Stato -->
    <div class="card mb-4" id="cardSegnalazionePrincipale">
      <div class="card-header">
        <div class="row g-3 align-items-start">
          <div class="col-12 col-lg-6">
            <h4 class="card-title mb-2">
              <i class="bx bx-flag me-2"></i>{{ $segnalazione->titolo }}
            </h4>
            <div class="d-flex flex-wrap gap-2">
              @if($configStato)
              <span class="badge bg-label-{{ $configStato->colore }}">
                <b>Stato:</b> <i class="bx icon-base {{ $configStato->icona }} me-1"></i>{{ $configStato->label }}
              </span>
              @endif
              @if($configPriorita)
              <span class="badge bg-label-{{ $configPriorita->colore }}">
                <b>Priorità:</b> <i class="bx icon-base {{ $configPriorita->icona }} me-1"></i>{{ $configPriorita->label }}
              </span>
              @endif
              @if($configTipo)
              <span class="badge bg-label-{{ $configTipo->colore ?? 'primary' }}">
                <b>Tipo:</b> <i class="bx {{ $configTipo->icona }} me-1"></i>{{ $configTipo->label }}
              </span>
              @endif
            </div>
          </div>

          <div class="col-12 col-lg-3">
            <div class="small text-muted mb-1">Reparto</div>
            <div class="fw-semibold mb-2">
              <i class="bx bx-buildings me-1"></i>
              {{ $segnalazione->reparto ? $segnalazione->reparto->label : 'N/D' }}
            </div>
            <div class="small text-muted mb-1">Luogo</div>
            <div class="fw-semibold">
              <i class="bx bx-map-pin me-1"></i>
              {{ $segnalazione->luogo ? $segnalazione->luogo->label : 'N/D' }}
            </div>
          </div>

          <div class="col-12 col-lg-3">
            <div class="small text-muted mb-1">Assegnata a</div>
            <div class="fw-semibold mb-2">
              <i class="bx bx-user me-1"></i>
              {{ $segnalazione->user ? $segnalazione->user->full_name : '---' }}
            </div>

          </div>
        </div>
      </div>
    </div>

    <!-- Timeline Unificata con Filtri -->
    <div class="card mb-4">
      <div class="card-header">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
          <h5 class="card-title mb-0">
            <i class="bx bx-time me-2"></i>Timeline Completa
          </h5>
          <div class="d-flex gap-2 flex-wrap">
            <button type="button" class="btn btn-primary btn-sm" onclick="showCardModificaSegnalazione()">
              <i class="bx bx-edit me-1"></i>Modifica Segnalazione
            </button>

            <button type="button" class="btn btn-danger btn-sm" onclick="eliminaSegnalazione()">
              <i class="bx bx-trash me-1"></i>Elimina Segnalazione
            </button>
            <form id="formEliminaSegnalazione" action="{{ route('admin.segnalazione.delete', $segnalazione->id) }}" method="POST" class="d-none">
              @csrf
              @method('DELETE')
            </form>
          </div>
        </div>
      </div>
      <div class="card-body">

        <!-- Timeline Eventi -->
        @if($eventi->count() > 0)
        <ul class="timeline mb-0" id="timelineEventi">
          @foreach($eventi as $evento)
          <li class="timeline-item timeline-item-transparent evento-timeline" data-tipo="{{ $evento['tipo'] }}">
            <span class="timeline-point timeline-point-{{ $evento['colore'] }}"></span>
            <div class="timeline-event">
              <div class="timeline-header mb-2">
                <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                  <div>
                    <h6 class="mb-0">
                      <i class="bx {{ $evento['icona'] }} me-2 text-{{ $evento['colore'] }}"></i>
                      {{ $evento['titolo'] }}
                    </h6>
                    @if($evento['dati']['user'])
                    @php
                    $userNome = $evento['dati']['user']['nome'] ?? '';
                    $userTelefono = $evento['dati']['user']['telefono'] ?? '';
                    $userEmail = $evento['dati']['user']['email'] ?? '';
                    $userIsAdmin = (bool)($evento['dati']['user']['isUser'] ?? false);
                    $userIcon = $userIsAdmin ? 'bx-user-check' : 'bx-user';
                    $userIconClass = $userIsAdmin ? 'text-primary' : '';
                    $popoverContent = '<div class="small">';
                      $popoverContent .= '<div class="fw-semibold">' . e($userNome) . '</div>';
                      if ($userTelefono) {
                        $popoverContent .= '<div><i class="bx bx-phone me-1"></i>' . e($userTelefono) . '</div>';
                      }
                      if ($userEmail) {
                        $popoverContent .= '<div><i class="bx bx-envelope me-1"></i>' . e($userEmail) . '</div>';
                      }
                      $popoverContent .= '</div>';
                      @endphp
                      <small class="text-muted">
                        <span role="button"
                        tabindex="0"
                        class="user-popover-trigger"
                        data-bs-toggle="popover"
                        data-bs-html="true"
                        data-bs-trigger="focus"
                        data-bs-placement="bottom"
                        data-bs-content='{!! $popoverContent !!}'>
                        <i class="bx {{ $userIcon }} me-1 {{ $userIconClass }}"></i>{{ $userNome }}
                      </span>
                    </small>
                    @endif
                    <small class="text-body-secondary">
                      {{ $evento['data'] ? $evento['data']->diffForHumans() : '' }}
                      @if($evento['data'])
                      <span class="text-muted">({{ $evento['data']->format('d/m/Y H:i') }})</span>
                      @endif
                    </small>
                  </div>
                  <span class="badge bg-label-{{ $evento['colore'] }}">{{ ucfirst($evento['tipo']) }}</span>
                </div>
              </div>

              @if($evento['tipo'] == 'creazione')
              <div class="card border mb-2">
                <div class="card-body">
                  <p class="mb-2">{!! $evento['descrizione'] !!}</p>
                  <div class="row g-2">
                    @if($evento['dati']['annotazione'] && $evento['dati']['annotazione']->allegatiAnnotazione->count() > 0)
                    <div class="col-auto">
                      <small class="text-muted">Allegati:</small>
                      @foreach($evento['dati']['annotazione']->allegatiAnnotazione as $allegato)
                      <span class="badge bg-label-secondary ms-2" onclick="openModalAllegato({{ $allegato->id }})">
                        <i class="bx bx-paperclip me-1"></i>{{ $allegato->nome ?? 'Allegato' }}
                      </span>
                      @endforeach
                    </div>
                    @endif

                  </div>
                </div>
              </div>
              @elseif($evento['tipo'] == 'annotazione')
              <div class="card border mb-2">
                <div class="card-body">
                  <p class="mb-2">{!! $evento['descrizione'] !!}</p>
                  <div class="row g-2">
                    @if($evento['dati']['annotazione'] && $evento['dati']['annotazione']->costo != 0)
                    <div class="col-auto">
                      <small class="text-muted">Costo registrato:</small>
                      <span class="badge bg-label-secondary ms-2">
                        <i class="bx bx-money me-1"></i>{{ Config::formatCosto($evento['dati']['annotazione']->costo) }}
                        @if($evento['dati']['annotazione']->costo_descrizione)
                        <span class="text-muted"> | {{ $evento['dati']['annotazione']->costo_descrizione }}</span>
                        @endif
                      </span>
                    </div>
                    @endif

                    @if($evento['dati']['annotazione'] && $evento['dati']['annotazione']->tempo_minuti != 0)
                    <div class="col-auto">
                      <small class="text-muted">Tempo impiegato:</small>
                      <span class="badge bg-label-secondary ms-2">
                        <i class="bx bx-time me-1"></i>{{ Config::formatTempo($evento['dati']['annotazione']->tempo_minuti) }}
                      </span>
                    </div>
                    @endif

                    @if($evento['dati']['annotazione'] && $evento['dati']['annotazione']->allegatiAnnotazione->count() > 0)
                    <div class="col-auto">
                      <small class="text-muted">Allegati:</small>
                      @foreach($evento['dati']['annotazione']->allegatiAnnotazione as $allegato)
                      <span class="badge bg-label-secondary ms-2" onclick="openModalAllegato({{ $allegato->id }})">
                        <i class="bx bx-paperclip me-1"></i>{{ $allegato->nome ?? 'Allegato' }}
                      </span>
                      @endforeach
                    </div>
                    @endif

                  </div>
                </div>
              </div>
              @elseif($evento['tipo'] == 'allegato')
              <div class="card border mb-2">
                <div class="card-body">
                  <div class="d-flex align-items-start gap-3">
                    <div class="avatar flex-shrink-0">
                      <div class="avatar-initial bg-label-primary rounded">
                        <i class="bx {{ $evento['icona'] }}"></i>
                      </div>
                    </div>
                    <div class="flex-grow-1">
                      <h6 class="mb-1">{{ $evento['dati']['nome'] ?? 'Allegato' }}</h6>
                      @if($evento['dati']['descrizione'])
                      <p class="small text-muted mb-1">{!! $evento['dati']['descrizione'] !!}</p>
                      @endif
                      @if($evento['dati']['isImage'])
                      <button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="openModalImmagineAllegato('{{ $evento['dati']['url'] }}', '{{ $evento['dati']['nome'] ?? 'Immagine' }}')">
                        <i class="bx bx-image me-1"></i>Visualizza
                      </button>
                      @endif
                    </div>
                  </div>
                </div>
              </div>
              @elseif($evento['tipo'] == 'stato')
              <div class="card border mb-2">
                <div class="card-body">
                  <div class="d-flex align-items-center gap-3">
                    <div class="flex-grow-1">
                      <div class="d-flex align-items-center gap-2 mb-2">
                        @if($evento['dati']['stato_vecchio_label'])
                        <span class="badge bg-label-{{ $evento['dati']['stato_vecchio_colore'] ?? 'secondary' }}">
                          <i class="bx {{ $evento['icona'] }} me-1"></i>{{ $evento['dati']['stato_vecchio_label'] }}
                        </span>
                        @else
                        <span class="badge bg-label-secondary">N/A</span>
                        @endif
                        <i class="bx bx-right-arrow-alt text-muted"></i>
                        @if($evento['dati']['stato_nuovo_label'])
                        <span class="badge bg-label-{{ $evento['dati']['stato_nuovo_colore'] ?? 'primary' }}">
                          <i class="bx {{ $evento['icona'] }} me-1"></i>{{ $evento['dati']['stato_nuovo_label'] }}
                        </span>
                        @else
                        <span class="badge bg-label-secondary">N/A</span>
                        @endif
                      </div>
                    </div>
                    {{-- <div class="avatar">
                      <div class="avatar-initial bg-label-{{ $evento['colore'] }} rounded">
                        <i class="bx {{ $evento['icona'] }}"></i>
                      </div>
                    </div> --}}
                  </div>
                </div>
              </div>
              @endif
            </div>
          </li>
          @endforeach
        </ul>
        @else
        <div class="text-center py-5">
          <div class="avatar-initial bg-label-secondary rounded mx-auto mb-3" style="width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;">
            <i class="bx bx-time" style="font-size: 2.5rem;"></i>
          </div>
          <p class="text-muted mb-3">Nessun evento presente nella timeline</p>
        </div>
        @endif
      </div>
    </div>

    <div class="card mb-4 d-none" id="cardModificaSegnalazione">
      <div class="card-header">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
          <h5 class="card-title mb-0">
            <i class="bx bx-time me-2"></i>Modifica segnalazione
          </h5>

        </div>
      </div>
      <div class="card-body">
        <form id="formModificaSegnalazione" action="{{ route('admin.segnalazione.aggiorna', ['id' => $segnalazione->id]) }}" method="POST" enctype="multipart/form-data">
          @csrf
          <input type="hidden" name="segnalazione_id" id="segnalazione_id" value="{{ $segnalazione->id }}">

          <div class="row g-4">
            <div class="col-3">
              <div class="p-3 h-100">
                <div class="mb-0">
                  <label for="titolo_segnalazione" class="form-label">Titolo <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" id="titolo_segnalazione" name="titolo" value="{{ $segnalazione->titolo }}" required>
                </div>
              </div>
            </div>

            <div class="col-3">
              <div class="p-3 h-100">
                <div class="mb-0">
                  <label for="user_id" class="form-label">Utente Annotazione <span class="text-danger">*</span></label>
                  <select class="form-select" id="user_id" name="user_id">
                    @foreach(App\Models\User::all() as $user)
                    <option value="{{ $user->id }}">{{ $user->full_name }}</option>
                    @endforeach
                  </select>
                </div>
              </div>
            </div>

            <div class="col-3">
              <div class="p-3 h-100">
                <div class="mb-0">
                  <label for="segnalazione_user_id" class="form-label">Segnalazione Assegnata a</label>
                  <select class="form-select" id="segnalazione_user_id" name="segnalazione_user_id">
                    @foreach(App\Models\User::all() as $user)
                    <option value="{{ $user->id }}">{{ $user->full_name }}</option>
                    @endforeach
                  </select>
                </div>
              </div>
            </div>

            <div class="col-3 col-lg-3">
              <div class="p-3 h-100">
                <div class="mb-0">
                  <div class="form-check form-switch">
                    <input type="hidden" name="annotazione_riservata" value="0" id="annotazione_riservata">
                    <input class="form-check-input" type="checkbox" name="annotazione_riservata" id="annotazione_riservata" value="1" checked>
                    <label class="form-check-label" for="annotazione_riservata">Annotazione Riservata/Interna/Privata</label>
                  </div>

                </div>
              </div>
            </div>

            <div class="col-3 col-lg-3">
              <div class="p-3 h-100">
                <div class="mb-0">
                  <label for="segnalazione_stato" class="form-label">Stato</label>
                  <select class="form-select" id="segnalazione_stato" name="stato">
                    @foreach(\App\Models\ConfiguraSegnalazione::where('gruppo', 'stato')->orderBy('order')->get() as $statoOption)
                    <option value="{{ $statoOption->value }}" @if($segnalazione->stato == $statoOption->value) selected @endif>
                      {{ $statoOption->label }}
                    </option>
                    @endforeach
                  </select>
                </div>
              </div>
            </div>

            <div class="col-3 col-lg-3">
              <div class="p-3 h-100">
                <div class="mb-0">
                  <label for="segnalazione_priorita" class="form-label">Priorità</label>
                  <select class="form-select" id="segnalazione_priorita" name="priorita">
                    @foreach(\App\Models\ConfiguraSegnalazione::where('gruppo', 'Priorità')->orderBy('order')->get() as $prioritaOption)
                    <option value="{{ $prioritaOption->value }}" @if($segnalazione->priorita == $prioritaOption->value) selected @endif>
                      {{ $prioritaOption->label }}
                    </option>
                    @endforeach
                  </select>
                </div>
              </div>
            </div>

            <div class="col-3 col-lg-3">
              <div class="p-3 h-100">
                <div class="mb-0">
                  <label for="segnalazione_tipo" class="form-label">Tipo</label>
                  <select class="form-select" id="segnalazione_tipo" name="tipo">
                    @foreach(\App\Models\ConfiguraSegnalazione::where('gruppo', 'Tipo')->orderBy('order')->get() as $tipoOption)
                    <option value="{{ $tipoOption->value }}" @if($segnalazione->tipo == $tipoOption->value) selected @endif>
                      {{ $tipoOption->label }}
                    </option>
                    @endforeach
                  </select>
                </div>
              </div>
            </div>

            <div class="col-3 col-lg-3">
              <div class="p-3 h-100">
                <div class="mb-0">
                  @php
                    $tipoConfigs = \App\Models\ConfiguraSegnalazione::where('gruppo', 'Tipo')
                      ->orderBy('order')
                      ->get();
                    $tipoOptionsMap = $tipoConfigs->mapWithKeys(function ($item) {
                      return [$item->value => ($item->opzioni ?? [])];
                    });
                    $tipoIdMap = $tipoConfigs->mapWithKeys(function ($item) {
                      return [$item->value => $item->id];
                    });
                    $categoriaSicurezzaValue = null;
                    $categoriaSicurezzaMap = is_array($segnalazione->categoria_sicurezza ?? null)
                      ? $segnalazione->categoria_sicurezza
                      : [];
                    $currentTipoId = $tipoIdMap[$segnalazione->tipo] ?? null;
                    if ($currentTipoId !== null && array_key_exists($currentTipoId, $categoriaSicurezzaMap)) {
                      $categoriaSicurezzaValue = $categoriaSicurezzaMap[$currentTipoId];
                    }
                    $categoriaSicurezzaOptions = $tipoOptionsMap[$segnalazione->tipo] ?? [];
                  @endphp
                  <div id="categoria_sicurezza_container" style="{{ empty($categoriaSicurezzaOptions) ? 'display:none;' : '' }}">
                    <label for="segnalazione_categoria_sicurezza" class="form-label">Categoria sicurezza</label>
                    <select class="form-select" id="segnalazione_categoria_sicurezza" name="categoria_sicurezza">
                      @foreach($categoriaSicurezzaOptions as $categoriaSicurezzaOption)
                        @php
                          $optionValue = is_array($categoriaSicurezzaOption)
                            ? ($categoriaSicurezzaOption['value'] ?? $categoriaSicurezzaOption['label'] ?? $categoriaSicurezzaOption['name'] ?? null)
                            : $categoriaSicurezzaOption;
                          $optionLabel = is_array($categoriaSicurezzaOption)
                            ? ($categoriaSicurezzaOption['label'] ?? $categoriaSicurezzaOption['value'] ?? $categoriaSicurezzaOption['name'] ?? $optionValue)
                            : $categoriaSicurezzaOption;
                        @endphp
                        @if($optionValue !== null)
                          <option value="{{ $optionValue }}" @if($categoriaSicurezzaValue == $optionValue) selected @endif>
                            {{ $optionLabel }}
                          </option>
                        @endif
                      @endforeach
                    </select>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-12">
              <div class="p-3 h-100">
                <div class="mb-0">
                  <label for="text" class="form-label">Annotazione <span class="text-danger">*</span></label>
                  <input type="hidden" id="text" name="text">
                  <div id="quill_annotazione_toolbar">
                    @include('content.form-elements.quill_toolbar')
                  </div>
                  <div id="quill_annotazione"></div>
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-4">
              <div class="border rounded p-3 h-100">
                <h6 class="fw-semibold mb-3">
                  <i class="bx bx-time-five me-1"></i>Registra tempo
                </h6>
                <div class="mb-3">
                  <label for="ore_tempo_card" class="form-label">Ore</label>
                  <input type="text" class="form-control" id="ore_tempo_card" name="tempo_ore" placeholder="Es. 1,5 o 1h30m">
                </div>

                <div class="mb-0">
                  <label for="tempo_data" class="form-label">Data e ora</label>
                  <input type="text" class="form-control flatpickr-input form-control" id="tempo_data" name="tempo_data" value="{{ \Carbon\Carbon::now()->format('d/m/Y H:i') }}">
                </div>
              </div>
            </div>

            <div class="col-12 col-lg-4">
              <div class="border rounded p-3 h-100">
                <h6 class="fw-semibold mb-3">
                  <i class="bx bx-money me-1"></i>Registra costo
                </h6>
                <div class="mb-3">
                  <label for="costo_importo_card" class="form-label">Costo (€)</label>
                  <input type="number" class="form-control" id="costo_importo_card" name="costo" step="0.01" min="0">
                </div>
                <div class="mb-3">
                  <label for="descrizione_costo_card" class="form-label">Descrizione</label>
                  <textarea class="form-control" id="descrizione_costo_card" name="costo_descrizione" rows="2"></textarea>
                </div>
              </div>
            </div>



            <div class="col-12 col-lg-4">
              <div class="border rounded p-3 h-100">
                <h6 class="fw-semibold mb-3">
                  <i class="bx bx-upload me-1"></i>Aggiungi allegato
                </h6>
                <div class="mb-3">
                  <label for="file_allegato_card" class="form-label">File</label>
                  <div id="allegatoDropzoneAdmin" class="dropzone-box border border-dashed rounded p-3 text-center">
                    <div class="dz-message">
                      Trascina qui i file o clicca per caricare
                      <span class="note">Dimensione massima: 10MB per file. Formati accettati: PDF, immagini, documenti.</span>
                    </div>
                  </div>
                  <input type="file" class="d-none" id="file_allegato_card" name="allegato[]" multiple
                    accept=".pdf,.jpg,.jpeg,.png,.gif,.webp,.doc,.docx,.xls,.xlsx">
                  <div id="allegatoDropzoneInfoAdmin" class="small text-muted mt-2"></div>
                  <div id="allegatoPreviewAdmin" class="row g-2 mt-2"></div>
                </div>
              </div>
            </div>
          </div>

          <div class="d-flex justify-content-end mt-4">
            <button type="submit" class="btn btn-primary">
              <i class="bx bx-check me-1"></i>SALVA
            </button>
          </div>
        </form>
      </div>
    </div>


    <!-- Pulsante Torna all'elenco -->
    <div class="d-flex justify-content-between align-items-center mb-4">
      <a href="{{ route('admin.segnalazione.index') }}" class="btn btn-label-secondary">
        <i class="bx bx-left-arrow-alt me-1"></i>Torna all'elenco
      </a>
    </div>

  </div>
</div>




@endsection

@section('page-style')
<style>
  .user-popover-trigger {
    cursor: pointer;
    text-decoration: none;
  }
  .user-popover-trigger:hover {
    text-decoration: underline;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .dropzone-box {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(105, 108, 255, 0.06);
    border-width: 2px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }
  .dropzone-box .dz-message {
    margin: 0;
    font-size: 0.95rem;
    color: #6c757d;
  }
  .dropzone-box .note {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
  }
  .dropzone-box.border-primary {
    background-color: rgba(105, 108, 255, 0.12);
  }
</style>
@endsection

@section('page-script')
<script type="module">

  $(document).ready(function(){
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': '{{csrf_token()}}'
      }
    });

    // Flatpickr per le date
    flatpickr("#tempo_data", {
      dateFormat: "d/m/Y H:i",
      enableTime: true,
      time_24hr: true,
      locale: "it"
    });

    // Funzione helper per inizializzare Quill
    function initQuillEditor(editorId, toolbarId, hiddenInputId) {
      const editor = new Quill('#' + editorId, {
        bounds: '#' + editorId,
        modules: {
          toolbar: '#' + toolbarId
        },
        theme: 'snow'
      });

      // Carica il contenuto esistente
      const value = $('#' + hiddenInputId).val();
      if (value) {
        const delta = editor.clipboard.convert(value);
        editor.setContents(delta, 'silent');
      }

      // Salva il contenuto quando cambia
      editor.on('text-change', function() {
        const html = editor.root.innerHTML;
        $('#' + hiddenInputId).val(html);
      });

      return editor;
    }

    // Inizializza tutti gli editor Quill
    const quill_annotazione = initQuillEditor('quill_annotazione', 'quill_annotazione_toolbar', 'text');

    if (window.bootstrap && window.bootstrap.Popover) {
      const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
      popoverTriggerList.forEach((popoverTriggerEl) => {
        new bootstrap.Popover(popoverTriggerEl, { html: true, sanitize: false, trigger: 'focus' });
      });
    }

    const dropzone = document.getElementById('allegatoDropzoneAdmin');
    const inputAllegato = document.getElementById('file_allegato_card');
    const dropzoneInfo = document.getElementById('allegatoDropzoneInfoAdmin');
    const dropzonePreview = document.getElementById('allegatoPreviewAdmin');
    const allowedExtensions = ['pdf', 'jpg', 'jpeg', 'png', 'gif', 'webp', 'doc', 'docx', 'xls', 'xlsx'];
    const objectUrls = [];

    if (dropzone && inputAllegato) {
      const clearPreviews = () => {
        objectUrls.splice(0).forEach((url) => URL.revokeObjectURL(url));
        if (dropzonePreview) {
          dropzonePreview.innerHTML = '';
        }
      };

      const renderPreviews = (files) => {
        clearPreviews();
        if (!dropzonePreview) return;

        Array.from(files).forEach((file) => {
          const isImage = file.type.startsWith('image/');
          const col = document.createElement('div');
          col.className = 'col-12 col-sm-6 col-lg-4';

          const card = document.createElement('div');
          card.className = 'border rounded p-2 h-100 d-flex align-items-center gap-2';

          if (isImage) {
            const img = document.createElement('img');
            const url = URL.createObjectURL(file);
            objectUrls.push(url);
            img.src = url;
            img.alt = file.name;
            img.className = 'rounded';
            img.style.width = '48px';
            img.style.height = '48px';
            img.style.objectFit = 'cover';
            card.appendChild(img);
          } else {
            const icon = document.createElement('i');
            icon.className = 'bx bx-file fs-3 text-primary';
            card.appendChild(icon);
          }

          const info = document.createElement('div');
          info.className = 'flex-grow-1';
          const name = document.createElement('div');
          name.className = 'small fw-semibold text-truncate';
          name.textContent = file.name;
          const size = document.createElement('div');
          size.className = 'small text-muted';
          const sizeMb = (file.size / (1024 * 1024)).toFixed(2);
          size.textContent = `${sizeMb} MB`;
          info.appendChild(name);
          info.appendChild(size);
          card.appendChild(info);

          col.appendChild(card);
          dropzonePreview.appendChild(col);
        });
      };

      const filterFiles = (fileList) => {
        const validFiles = [];
        Array.from(fileList || []).forEach((file) => {
          const extension = file.name.split('.').pop().toLowerCase();
          if (allowedExtensions.includes(extension)) {
            validFiles.push(file);
          }
        });
        return validFiles;
      };

      const updateInfo = (files) => {
        if (!dropzoneInfo) return;
        if (!files || files.length === 0) {
          dropzoneInfo.textContent = '';
          return;
        }
        const lines = Array.from(files).map((file) => {
          const sizeMb = (file.size / (1024 * 1024)).toFixed(2);
          return `${file.name} (${sizeMb} MB)`;
        });
        dropzoneInfo.innerHTML = lines.join('<br>');
      };

      dropzone.addEventListener('click', () => inputAllegato.click());

      inputAllegato.addEventListener('change', () => {
        const validFiles = filterFiles(inputAllegato.files);
        const dataTransfer = new DataTransfer();
        validFiles.forEach((file) => dataTransfer.items.add(file));
        inputAllegato.files = dataTransfer.files;
        updateInfo(inputAllegato.files);
        renderPreviews(inputAllegato.files);
      });

      dropzone.addEventListener('dragover', (event) => {
        event.preventDefault();
        dropzone.classList.add('border-primary');
      });

      dropzone.addEventListener('dragleave', () => {
        dropzone.classList.remove('border-primary');
      });

      dropzone.addEventListener('drop', (event) => {
        event.preventDefault();
        dropzone.classList.remove('border-primary');
        const files = filterFiles(event.dataTransfer.files);
        if (!files || files.length === 0) return;
        const dataTransfer = new DataTransfer();
        files.forEach((file) => {
          dataTransfer.items.add(file);
        });
        inputAllegato.files = dataTransfer.files;
        updateInfo(inputAllegato.files);
        renderPreviews(inputAllegato.files);
      });
    }

    const categoriaSicurezzaContainer = document.getElementById('categoria_sicurezza_container');
    const categoriaSicurezzaSelect = document.getElementById('segnalazione_categoria_sicurezza');
    const tipoSelect = document.getElementById('segnalazione_tipo');
    const categoriaSicurezzaOptionsByTipo = @json($tipoOptionsMap);
    const initialCategoriaValue = @json($categoriaSicurezzaValue);

    function normalizeOption(option) {
      if (option && typeof option === 'object') {
        const value = option.value ?? option.label ?? option.name ?? null;
        const label = option.label ?? option.value ?? option.name ?? value;
        if (value === null) return null;
        return { value, label };
      }
      if (option === null || option === undefined) return null;
      return { value: option, label: option };
    }

    function renderCategoriaSicurezzaOptions(tipoValue) {
      if (!categoriaSicurezzaContainer || !categoriaSicurezzaSelect) return;
      const options = categoriaSicurezzaOptionsByTipo[tipoValue] || [];

      categoriaSicurezzaSelect.innerHTML = '';
      if (!options || options.length === 0) {
        categoriaSicurezzaSelect.value = '';
        categoriaSicurezzaContainer.style.display = 'none';
        return;
      }

      const selectedValue = categoriaSicurezzaSelect.value || initialCategoriaValue;
      options.forEach((option) => {
        const normalized = normalizeOption(option);
        if (!normalized) return;
        const opt = document.createElement('option');
        opt.value = normalized.value;
        opt.textContent = normalized.label;
        if (selectedValue && String(selectedValue) === String(normalized.value)) {
          opt.selected = true;
        }
        categoriaSicurezzaSelect.appendChild(opt);
      });

      categoriaSicurezzaContainer.style.display = '';
    }

    if (tipoSelect) {
      tipoSelect.addEventListener('change', function(e){
        renderCategoriaSicurezzaOptions(e.target.value);
      });
      renderCategoriaSicurezzaOptions(tipoSelect.value);
    }

  });


</script>

<script>
  function showCardModificaSegnalazione() {
    var card = document.getElementById('cardModificaSegnalazione');
    if (!card) return;
    card.classList.remove('d-none');
    card.style.display = '';
    card.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }

  function eliminaSegnalazione() {
    Swal.fire({
      title: 'Eliminare la segnalazione?',
      text: 'Questa operazione è irreversibile.',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Elimina',
      cancelButtonText: 'Annulla',
      customClass: {
        confirmButton: 'btn btn-danger',
        cancelButton: 'btn btn-label-secondary'
      },
      buttonsStyling: false
    }).then(function (result) {
      if (result.isConfirmed) {
        var form = document.getElementById('formEliminaSegnalazione');
        if (form) {
          form.submit();
        }
      }
    });
  }

  function openModalAllegato(allegatoId) {
    $('#extraLargeModal .modal-content').load('{{ route("allegato_annotazione.show") }}?allegato_annotazione_id=' + allegatoId);
    $('#extraLargeModal').modal('show');
  }

  function openModalTempoImpiegato(segnalazioneId) {
    $('#extraLargeModal .modal-content').load('{{ route("admin.tempo_impiegato.index") }}?segnalazione_id=' + segnalazioneId);
    $('#extraLargeModal').modal('show');
  }

  function openModalCostoSegnalazione(segnalazioneId) {
    $('#extraLargeModal .modal-content').load('{{ route("admin.costo_segnalazione.index") }}?segnalazione_id=' + segnalazioneId);
    $('#extraLargeModal').modal('show');
  }
</script>
@endsection
