<?php

use Illuminate\Support\Facades\Auth;
?>

@extends('layouts/layoutMaster')

@section('title', 'Nuova 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">Nuova Segnalazione</h4>
</div>
@endsection

@section('content')

<div class="col-xxl mb-4 mt-2">
  <div class="card">
    @if(session('success'))
    <div class="m-2 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

    <div class="card-body">
      @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

      <form id="formNuovaSegnalazione" action="{{ route('admin.segnalazione.crea') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="row g-3 mb-4">
          <div class="col-md-6">
            <div class="card shadow-none bg-label-primary h-100">
              <div class="card-body">
                <label for="reparto_id" class="form-label text-primary fw-semibold">
                  <i class="bx bx-building me-1"></i>Reparto <span class="text-danger">*</span>
                </label>
                <select class="form-select" id="reparto_id" name="reparto_id">
                  <option value="">-- Seleziona un reparto --</option>
                  @foreach(\App\Models\Reparto::all() as $reparto)
                  <option value="{{ $reparto->id }}">
                    {{ $reparto->label }}
                  </option>
                  @endforeach
                </select>

                <small class="text-muted d-block mt-2">Seleziona un reparto per filtrare i luoghi disponibili</small>

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

          <div class="col-md-6">
            <div class="card shadow-none bg-label-info h-100">
              <div class="card-body">
                <label for="luogo_id" class="form-label text-info fw-semibold">
                  <i class="bx bx-map me-1"></i>Luogo <span class="text-danger">*</span>
                </label>
                <select class="form-select" id="luogo_id" name="luogo_id" required>
                  <option value="">-- Seleziona un luogo --</option>
                  @foreach(\App\Models\Luogo::where('reparto_id', request()->input('reparto_id'))->get() as $luogo)
                  <option value="{{ $luogo->id }}" {{ old('luogo_id') == $luogo->id ? 'selected' : '' }}>
                    {{ $luogo->label }}
                  </option>
                  @endforeach
                </select>
              </div>
            </div>
          </div>
        </div>

        <div class="row g-4 mb-3">
          <div class="col">
            <div class="mb-0">
              <label for="titolo" class="form-label">Oggetto <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="titolo" name="titolo" required placeholder="Inserisci il titolo della segnalazione" value="{{ old('titolo') }}">
            </div>
          </div>

          <div class="col-4 col-lg-4">
            <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">
                <option value="">-- Nessuna Assegnazione --</option>
                @foreach(App\Models\User::all() as $user)
                <option value="{{ $user->id }}">{{ $user->full_name }}</option>
                @endforeach
              </select>
            </div>
          </div>
        </div>


        <div class="row g-4">
          <div class="col-md-4 mb-3">
            <label for="stato" class="form-label">Stato</label>
            <select class="form-select" id="stato" name="stato">

              @foreach(\App\Models\ConfiguraSegnalazione::where('gruppo', 'stato')->orderBy('order')->get() as $stato)
              <option value="{{ $stato->value }}">{{ $stato->label }}</option>
              @endforeach
            </select>
          </div>

          <div class="col-md-4 mb-3">
            <label for="priorita" class="form-label">Priorità</label>
            <select class="form-select" id="priorita" name="priorita">
              @foreach(\App\Models\ConfiguraSegnalazione::where('gruppo', 'Priorità')->orderBy('order')->get() as $priorita)
              <option value="{{ $priorita->value }}">{{ $priorita->label }}</option>
              @endforeach
            </select>
          </div>

          <div class="col-md-4 mb-3">
            <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 }}">
                {{ $tipoOption->label }}
              </option>
              @endforeach
            </select>
          </div>
        </div>

        <div class="row g-4">

          <div class="mb-3">
            <label for="descrizione" class="form-label">Descrizione <span class="text-danger">*</span></label>
            <input type="hidden" id="descrizione" name="descrizione" value="{{ old('descrizione') }}">
            <div id="quill_descrizione_toolbar">
              @include('content.form-elements.quill_toolbar')
            </div>
            <div id="quill_descrizione"></div>
          </div>
        </div>

        @php
        $showRiferimento = old('show_riferimento', '1') === '1';
        @endphp
        <div class="d-flex align-items-center gap-3 mb-2">
          <h5 class="mb-0">Persona di riferimento</h5>
          <div class="form-check form-check-inline mb-0">
            <input class="form-check-input" type="radio" name="show_riferimento" id="show_riferimento_yes" value="1"
            {{ $showRiferimento ? 'checked' : '' }}>
            <label class="form-check-label" for="show_riferimento_yes">Sì</label>
          </div>
          <div class="form-check form-check-inline mb-0">
            <input class="form-check-input" type="radio" name="show_riferimento" id="show_riferimento_no" value="0"
            {{ !$showRiferimento ? 'checked' : '' }}>
            <label class="form-check-label" for="show_riferimento_no">No</label>
          </div>
        </div>

        <div id="riferimentoFields" class="row {{ $showRiferimento ? '' : 'd-none' }}">
          <div class="col-md-4 mb-3">
            <label for="riferimento" class="form-label">Nome e Cognome</label>
            <input type="text" class="form-control" id="riferimento" name="riferimento" placeholder="Inserisci il nome della persona di riferimento" value="{{ old('riferimento') }}">
          </div>
          <div class="col-md-4 mb-3">
            <label for="telefono" class="form-label">Telefono</label>
            <input type="text" class="form-control" id="telefono" name="telefono" placeholder="Inserisci il telefono della persona di riferimento" value="{{ old('telefono') }}">
          </div>
          <div class="col-md-4 mb-3">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control" id="email" name="email" placeholder="" value="{{ old('email') }}">
          </div>
        </div>

        <div class="mb-3">
          <label for="allegato" class="form-label">Allega file (opzionale)</label>
          <div id="allegatoDropzoneAdminNuova" 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 class="d-none" type="file" id="allegato" name="allegato[]" multiple
          accept=".pdf,.jpg,.jpeg,.png,.gif,.webp,.doc,.docx,.xls,.xlsx">
          <div id="allegatoDropzoneInfoAdminNuova" class="small text-muted mt-2"></div>
          <div id="allegatoPreviewAdminNuova" class="row g-2 mt-2"></div>
        </div>

        <div class="mb-3 text-end p-5">
          <a href="{{ route('admin.segnalazione.index') }}" class="btn btn-label-secondary me-2">
            <i class="bx bx-x me-1"></i>Annulla
          </a>
          <button type="submit" class="btn btn-primary">
            <i class="bx bx-check me-1"></i>Invia Segnalazione
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

@endsection

@section('page-style')
<style>
  .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() {
    // Carica tutti i luoghi all'inizio (se non c'è reparto selezionato)
    // Carica i luoghi all'inizio
    loadLuoghi(null);

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

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

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

      return editor;
    }

    const quill_descrizione = initQuillEditor('quill_descrizione', 'quill_descrizione_toolbar', 'descrizione');

    function updateRiferimentoVisibility() {
      var show = $('input[name="show_riferimento"]:checked').val() === '1';
      var $fields = $('#riferimentoFields');
      $fields.toggleClass('d-none', !show);
      $fields.find('input').prop('disabled', !show);
    }
    updateRiferimentoVisibility();
    $('input[name="show_riferimento"]').on('change', updateRiferimentoVisibility);

    const dropzone = document.getElementById('allegatoDropzoneAdminNuova');
    const inputAllegato = document.getElementById('allegato');
    const dropzoneInfo = document.getElementById('allegatoDropzoneInfoAdminNuova');
    const dropzonePreview = document.getElementById('allegatoPreviewAdminNuova');
    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);
      });
    }

    // Gestione cambio reparto - carica i luoghi filtrati
    $('#reparto_id').on('change', function() {
      var repartoId = $(this).val();
      loadLuoghi(repartoId);
    });
  });

  function loadLuoghi(repartoId) {
    var $luogoSelect = $('#luogo_id');
    var $luogoHelp = $('#luogoHelp');

    $luogoSelect.html('<option value="">Caricamento...</option>');
    $luogoSelect.prop('disabled', true);

    var url = '{{ route("admin.luogo.list") }}';
    var data = {};

    if (repartoId) {
      data.reparto_id = repartoId;
    }

    $.ajax({
      url: url,
      method: 'GET',
      data: data,
      success: function(response) {
        if (response && response.trim() !== '') {
          $luogoSelect.html('<option value="">-- Seleziona un luogo --</option>' + response);
          $luogoHelp.text('Seleziona il luogo della segnalazione');
        } else {
          $luogoSelect.html('<option value="">Nessun luogo disponibile' + (repartoId ? ' per questo reparto' : '') + '</option>');
          $luogoHelp.text('Nessun luogo disponibile' + (repartoId ? ' per il reparto selezionato' : ''));
        }
        $luogoSelect.prop('disabled', false);
      },
      error: function() {
        $luogoSelect.html('<option value="">Errore nel caricamento dei luoghi</option>');
        $luogoSelect.prop('disabled', false);
        $luogoHelp.text('Errore nel caricamento dei luoghi');
      }
    });
  }
</script>
@endsection
