<?php
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Str;
?>

@section('title', 'Reparto | ' . config('app.name'))

<x-guest-layout>
  <div class="container-xxl flex-grow-1 p-0">
    <div class="row justify-content-center mt-3">
      <div class="col-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


        <div class="row mb-4">
          <div class="col-12">
            <div class="d-flex align-items-center justify-content-between mb-3">
              <div>
                <h4 class="mb-0">{{ $reparto->label }}</h4>
                <p class="text-muted small mb-0">{{ $segnalazioni->count() }} segnalazioni</p>
              </div>
              <div class="d-flex gap-2">
                <a href="{{ route('segnalazione.nuova', ['token' => $reparto->token]) }}"
                  class="btn btn-primary">
                  <i class="bx bx-plus me-1"></i>Segnalazione
                </a>
              </div>
            </div>
          </div>
        </div>

        <!-- Filtri -->
        <div class="row mb-3">
          <div class="col-12">
            <div class="d-flex flex-wrap align-items-center gap-2">
              <div class="input-group input-group-merge" style="max-width: 300px;">
                <span class="input-group-text">
                  <i class="bx bx-search"></i>
                </span>
                <input type="text"
                class="form-control form-control-sm"
                id="searchSegnalazione"
                placeholder="Cerca...">
              </div>

              <select class="form-select form-select-sm" id="filterLuogo" style="width: auto; min-width: 150px;">
                <option value="">Tutti i luoghi</option>
                @foreach($luoghiUnici as $luogo)
                <option value="{{ $luogo->id }}">{{ $luogo->label }}</option>
                @endforeach
              </select>

              <select class="form-select form-select-sm" id="filterStato" style="width: auto; min-width: 150px;">
                <option value="">Tutti gli stati</option>
                @foreach($statiUnici as $stato)
                @php
                $config = $configStati[$stato] ?? null;
                $label = $config ? $config->label : $stato;
                @endphp
                <option value="{{ $stato }}">{{ $label }}</option>
                @endforeach
              </select>

              <select class="form-select form-select-sm" id="filterPriorita" style="width: auto; min-width: 150px;">
                <option value="">Tutte le priorità</option>
                @foreach($prioritaUniche as $priorita)
                @php
                $config = $configPriorita[$priorita] ?? null;
                $label = $config ? $config->label : $priorita;
                @endphp
                <option value="{{ $priorita }}">{{ $label }}</option>
                @endforeach
              </select>

              <div id="activeFiltersBadges" class="d-flex flex-wrap gap-1"></div>

              <button type="button" class="btn btn-label-secondary btn-sm" id="resetFilters">
                <i class="bx bx-x"></i>
              </button>

              <div class="ms-auto text-muted small">
                <span id="visibleCount">{{ $segnalazioni->count() }}</span> / <span id="totalCount">{{ $segnalazioni->count() }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="row g-3" id="segnalazioniContainer">
          @forelse($segnalazioni as $segnalazione)
          @php
          $configStato = $segnalazione->getConfiguraStato();
          $configPriorita = $segnalazione->getConfiguraPriorita();
          $configTipo = $segnalazione->getConfiguraTipo();
          @endphp
          <div class="col-lg-4 col-md-6 segnalazione-card"
          data-titolo="{{ strtolower($segnalazione->titolo) }}"
          data-descrizione="{{ strtolower($segnalazione->descrizione ?? '') }}"
          data-luogo-id="{{ $segnalazione->luogo_id ?? '' }}"
          data-stato="{{ $segnalazione->stato ?? '' }}"
          data-priorita="{{ $segnalazione->priorita ?? '' }}">
          <div class="card border h-100">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-start mb-2">
                <div>
                  <h6 class="mb-0 fw-semibold">#{{ $segnalazione->id }}</h6>
                  <small class="text-muted">{{ $segnalazione->created_at->format('d/m/Y') }}</small>
                </div>
                @if($configStato)
                <span class="badge bg-label-{{ $configStato->colore }}">
                  {{ $configStato->label }}
                </span>
                @endif
              </div>

              <h6 class="mb-2">{{ Str::limit($segnalazione->titolo, 60) }}</h6>

              @if($segnalazione->descrizione)
              <p class="text-muted small mb-2" style="font-size: 0.875rem;">
                {!! Str::limit($segnalazione->descrizione, 100) !!}
              </p>
              @endif

              <div class="d-flex flex-wrap gap-1 mb-2">
                @if($configPriorita)
                <span class="badge bg-label-{{ $configPriorita->colore }}">
                  {{ $configPriorita->label }}
                </span>
                @endif
                @if($configTipo)
                <span class="badge bg-label-{{ $configTipo->colore }}">
                  {{ $configTipo->label }}
                </span>
                @endif
              </div>

              <div class="d-flex flex-wrap gap-3 small text-muted mb-2">
                @if($segnalazione->luogo)
                <span><i class="bx bx-map me-1"></i>{{ Str::limit($segnalazione->luogo->label, 20) }}</span>
                @endif
                @if($segnalazione->riferimento)
                <span><i class="bx bx-user me-1"></i>{{ Str::limit($segnalazione->riferimento, 15) }}</span>
                @endif
              </div>
              <a href="{{ route('segnalazione.show', ['token' => $segnalazione->token]) }}"
                class="btn btn-sm btn-label-primary w-100">
                Dettagli
              </a>
            </div>
          </div>
        </div>
        @empty
        <div class="col-12">
          <div class="text-center py-5">
            <p class="text-muted mb-3">Nessuna segnalazione trovata</p>
            <a href="{{ route('segnalazione.nuova', ['token' => $reparto->token]) }}"
                  class="btn btn-primary">
                  <i class="bx bx-plus me-1"></i>Nuova Segnalazione
                </a>
          </div>
        </div>
        @endforelse
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var searchInput = document.getElementById('searchSegnalazione');
    var filterLuogo = document.getElementById('filterLuogo');
    var filterStato = document.getElementById('filterStato');
    var filterPriorita = document.getElementById('filterPriorita');
    var resetBtn = document.getElementById('resetFilters');
    var activeFiltersBadges = document.getElementById('activeFiltersBadges');

    // Configurazioni per i colori dei badge
    var filterConfigs = {};

    // Inizializza configurazioni stati
    @foreach($statiUnici as $stato)
    @php
    $config = $configStati[$stato] ?? null;
    $colore = $config ? $config->colore : 'secondary';
    $label = $config ? $config->label : $stato;
    $icona = $config && $config->icona ? $config->icona : 'bx-info-circle';
    @endphp
    filterConfigs['stato_{{ $stato }}'] = {
      color: '{{ $colore }}',
      label: '{{ $label }}',
      icon: '{{ $icona }}'
    };
    @endforeach

    // Inizializza configurazioni priorità
    @foreach($prioritaUniche as $priorita)
    @php
    $config = $configPriorita[$priorita] ?? null;
    $colore = $config ? $config->colore : 'secondary';
    $label = $config ? $config->label : $priorita;
    $icona = $config && $config->icona ? $config->icona : 'bx-info-circle';
    @endphp
    filterConfigs['priorita_{{ $priorita }}'] = {
      color: '{{ $colore }}',
      label: '{{ $label }}',
      icon: '{{ $icona }}'
    };
    @endforeach

    // Inizializza configurazioni luoghi
    @foreach($luoghiUnici as $luogo)
    filterConfigs['luogo_{{ $luogo->id }}'] = {
      color: 'info',
      label: '{{ $luogo->label }}',
      icon: 'bx-map'
    };
    @endforeach

    function updateActiveFiltersBadges() {
      activeFiltersBadges.innerHTML = '';

      var luogoValue = filterLuogo ? filterLuogo.value : '';
      var statoValue = filterStato ? filterStato.value : '';
      var prioritaValue = filterPriorita ? filterPriorita.value : '';

      if (luogoValue) {
        var config = filterConfigs['luogo_' + luogoValue];
        if (config) {
          var badge = createFilterBadge('luogo', luogoValue, config);
          activeFiltersBadges.appendChild(badge);
        }
      }

      if (statoValue) {
        var config = filterConfigs['stato_' + statoValue];
        if (config) {
          var badge = createFilterBadge('stato', statoValue, config);
          activeFiltersBadges.appendChild(badge);
        }
      }

      if (prioritaValue) {
        var config = filterConfigs['priorita_' + prioritaValue];
        if (config) {
          var badge = createFilterBadge('priorita', prioritaValue, config);
          activeFiltersBadges.appendChild(badge);
        }
      }
    }

    function createFilterBadge(type, value, config) {
      var badge = document.createElement('span');
      badge.className = 'badge bg-label-' + config.color;
      badge.style.cursor = 'pointer';
      badge.innerHTML = config.label +
      ' <i class="bx bx-x ms-1" onclick="event.stopPropagation(); removeFilter(\'' + type + '\')"></i>';
      badge.setAttribute('data-filter-type', type);
      badge.setAttribute('data-filter-value', value);
      return badge;
    }

    function removeFilter(type) {
      if (type === 'luogo' && filterLuogo) {
        filterLuogo.value = '';
      } else if (type === 'stato' && filterStato) {
        filterStato.value = '';
      } else if (type === 'priorita' && filterPriorita) {
        filterPriorita.value = '';
      }
      updateActiveFiltersBadges();
      applyFilters();
    }

    function applyFilters() {
      var searchTerm = (searchInput ? searchInput.value.toLowerCase() : '');
      var luogoId = (filterLuogo ? filterLuogo.value : '');
      var stato = (filterStato ? filterStato.value : '');
      var priorita = (filterPriorita ? filterPriorita.value : '');

      var cards = document.querySelectorAll('#segnalazioniContainer .segnalazione-card');
      var visibleCount = 0;

      cards.forEach(function(card) {
        var cardTitolo = card.getAttribute('data-titolo') || '';
        var cardDescrizione = card.getAttribute('data-descrizione') || '';
        var cardLuogoId = card.getAttribute('data-luogo-id') || '';
        var cardStato = card.getAttribute('data-stato') || '';
        var cardPriorita = card.getAttribute('data-priorita') || '';

        // Logica AND: tutti i filtri devono corrispondere
        var matchesSearch = !searchTerm ||
        cardTitolo.includes(searchTerm) ||
        cardDescrizione.includes(searchTerm);

        var matchesLuogo = !luogoId || cardLuogoId === luogoId;
        var matchesStato = !stato || cardStato === stato;
        var matchesPriorita = !priorita || cardPriorita === priorita;

        if (matchesSearch && matchesLuogo && matchesStato && matchesPriorita) {
          card.style.display = '';
          visibleCount++;
        } else {
          card.style.display = 'none';
        }
      });

      // Aggiorna contatore risultati
      var visibleCountEl = document.getElementById('visibleCount');
      if (visibleCountEl) {
        visibleCountEl.textContent = visibleCount;
      }

      // Mostra messaggio se non ci sono risultati
      var noResultsMsg = document.getElementById('noResultsMessage');
      var hasActiveFilters = searchTerm || luogoId || stato || priorita;

      if (visibleCount === 0 && hasActiveFilters) {
        if (!noResultsMsg) {
          var messageDiv = document.createElement('div');
          messageDiv.className = 'col-12';
          messageDiv.id = 'noResultsMessage';
          messageDiv.innerHTML =
          '<div class="text-center py-4">' +
            '<p class="text-muted mb-2">Nessun risultato trovato</p>' +
            '<button type="button" class="btn btn-sm btn-label-secondary" onclick="document.getElementById(\'resetFilters\').click();">' +
              'Reset filtri</button>' +
              '</div>';
              document.getElementById('segnalazioniContainer').appendChild(messageDiv);
            }
          } else {
            if (noResultsMsg) {
              noResultsMsg.remove();
            }
          }
        }

        // Event listeners
        if (searchInput) {
          searchInput.addEventListener('keyup', applyFilters);
        }
        if (filterLuogo) {
          filterLuogo.addEventListener('change', function() {
            updateActiveFiltersBadges();
            applyFilters();
          });
        }
        if (filterStato) {
          filterStato.addEventListener('change', function() {
            updateActiveFiltersBadges();
            applyFilters();
          });
        }
        if (filterPriorita) {
          filterPriorita.addEventListener('change', function() {
            updateActiveFiltersBadges();
            applyFilters();
          });
        }
        if (resetBtn) {
          resetBtn.addEventListener('click', function() {
            if (searchInput) searchInput.value = '';
            if (filterLuogo) filterLuogo.value = '';
            if (filterStato) filterStato.value = '';
            if (filterPriorita) filterPriorita.value = '';
            updateActiveFiltersBadges();
            applyFilters();
          });
        }

        // Esponi removeFilter globalmente per i badge
        window.removeFilter = removeFilter;
      });
    </script>
  </x-guest-layout>
