<?php

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

@extends('layouts/guest')

@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('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();
    $configPriorita = $segnalazione->getConfiguraPriorita();
    $configTipo = $segnalazione->getConfiguraTipo();

    // 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' => [
        'id' => $annotazione->id,
        '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,
        ],
        'allegati' => $annotazione->allegatiAnnotazione->count()
      ]
      ]);
      $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();

    // Tipi di eventi disponibili per i filtri
    $tipiEventi = $eventi->pluck('tipo')->unique()->values();
    @endphp


    <!-- 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-8">
            <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-4">
            <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>
      </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>
      </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">
                  {{-- <h6 class="fw-semibold mb-2">{{ $evento['titolo'] }}</h6> --}}
                  <p class="mb-2">{!! $evento['descrizione'] !!}</p>
                  <div class="row g-2">

                  </div>
                </div>
              </div>
              @elseif($evento['tipo'] == 'annotazione')
              <div class="card border mb-2">
                <div class="card-body">
                  <p class="mb-2">{!! $evento['descrizione'] !!}</p>
                  @if($evento['dati']['allegati'] > 0)
                  <span class="badge bg-label-secondary ms-2">
                    <i class="bx bx-paperclip me-1"></i>{{ $evento['dati']['allegati'] }} allegato/i
                  </span>
                  @endif
                </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>
</div>

<!-- Modale Visualizza Immagine -->
<div class="modal fade" id="modalImmagineAllegato" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content bg-dark">
      <div class="modal-header border-secondary">
        <h5 class="modal-title text-white" id="modalImmagineTitle">
          <i class="bx bx-image me-2"></i>Immagine
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-0 text-center">
        <img id="modalImmagineSrc" src="" alt="Immagine" class="img-fluid" style="max-height: 80vh; width: auto;">
      </div>
      <div class="modal-footer border-secondary justify-content-center">
        <a id="modalImmagineDownload" href="" download class="btn btn-primary">
          <i class="bx bx-download me-1"></i>Scarica Immagine
        </a>
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
          <i class="bx bx-x me-1"></i>Chiudi
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modale Visualizza/Modifica Annotazione -->


@endsection

@section('page-style')
<style>
  .user-popover-trigger {
    cursor: pointer;
    text-decoration: none;
  }
  .user-popover-trigger:hover {
    text-decoration: underline;
  }
</style>
@endsection

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

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

    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' });
      });
    }

  });

  function openModalImmagineAllegato(imageUrl, imageName) {
    var modalSrc = document.getElementById('modalImmagineSrc');
    var modalTitle = document.getElementById('modalImmagineTitle');
    var modalDownload = document.getElementById('modalImmagineDownload');

    if (modalSrc) modalSrc.src = imageUrl;
    if (modalTitle) modalTitle.innerHTML = '<i class="bx bx-image me-2"></i>' + imageName;
    if (modalDownload) {
      modalDownload.href = imageUrl;
      modalDownload.download = imageName;
    }
  }


</script>

<script>
</script>
@endsection
