@extends('layouts.app')

@section('content')
<div class="container-xxl px-0">
    <div class="module-shell">

        {{-- HEADER --}}
        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3 mb-4">
            <div class="d-flex align-items-start gap-3">
                <div class="d-inline-flex align-items-center justify-content-center rounded-circle"
                     style="width:48px;height:48px;background:rgba(37,99,235,.12);color:#1d4ed8;box-shadow:0 12px 26px rgba(15,23,42,.08);">
                    <i class="bi bi-calendar2-week fs-4"></i>
                </div>

                <div>
                    <h1 class="h4 mb-1 fw-semibold">Terminarz</h1>
                    <div class="text-muted small">
                        Wpisy prywatne, działowe (z drzewa) i globalne — w jednym miejscu.
                    </div>

                    {{-- legenda --}}
                    <div class="d-flex flex-wrap gap-2 mt-2">
                        <span class="badge bg-soft-primary">
                            <i class="bi bi-person me-1"></i> Prywatne
                        </span>
                        <span class="badge" style="background: rgba(79,70,229,.12); color:#4f46e5;">
                            <i class="bi bi-diagram-3 me-1"></i> Dział (drzewo)
                        </span>
                        <span class="badge" style="background: rgba(34,197,94,.12); color:#16a34a;">
                            <i class="bi bi-globe2 me-1"></i> Globalne
                        </span>
                    </div>
                </div>
            </div>

            <div class="d-flex flex-wrap gap-2 align-items-center">
                <button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#calendarFilters" aria-expanded="false">
                    <i class="bi bi-funnel me-1"></i> Filtry
                </button>

                <div class="btn-group" role="group" aria-label="Widok">
                    <button type="button" class="btn btn-outline-primary" id="viewMonth">
                        <i class="bi bi-calendar3 me-1"></i> Miesiąc
                    </button>
                    <button type="button" class="btn btn-outline-primary" id="viewWeek">
                        <i class="bi bi-calendar-week me-1"></i> Tydzień
                    </button>
                    <button type="button" class="btn btn-outline-primary" id="viewDay">
                        <i class="bi bi-calendar-day me-1"></i> Dzień
                    </button>
                </div>

                <button id="btnNewEvent" class="btn btn-primary">
                    <i class="bi bi-plus-circle me-1"></i> Dodaj wpis
                </button>
            </div>
        </div>

        {{-- FILTRY --}}
        <div class="collapse mb-3" id="calendarFilters">
            <div class="erp-soft-box">
                <div class="row g-3 align-items-end">
                    <div class="col-md-4">
                        <label class="form-label">Szukaj w tytułach</label>
                        <input type="text" class="form-control" id="filter_q" placeholder="np. spotkanie, serwis, płatność...">
                        <div class="form-text">Działa po stronie UI (dla aktualnie wczytanych wpisów).</div>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Typ</label>
                        <select class="form-select" id="filter_type">
                            <option value="">Wszystkie</option>
                            <option value="meeting">Spotkanie</option>
                            <option value="reminder">Przypomnienie</option>
                            <option value="task">Zadanie</option>
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Status</label>
                        <select class="form-select" id="filter_status">
                            <option value="">Wszystkie</option>
                            <option value="planned">Plan</option>
                            <option value="done">Wykonane</option>
                            <option value="canceled">Anulowane</option>
                        </select>
                    </div>

                    <div class="col-md-2 d-flex gap-2">
                        <button class="btn btn-outline-secondary w-100" type="button" id="btnFiltersClear">
                            <i class="bi bi-x-lg me-1"></i> Wyczyść
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- KALENDARZ --}}
        <div class="card erp-content-card border-0">
            <div class="card-body">
                <div id="calendar" class="erp-calendar-wrap"></div>
            </div>
        </div>

    </div>
</div>

{{-- MODAL --}}
<div class="modal fade" id="eventModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content border-0 shadow" style="border-radius: 1.35rem; overflow:hidden;">
      <div class="modal-header" style="background: linear-gradient(135deg, rgba(219,234,254,.9), rgba(238,242,255,.9)); border-bottom: 1px solid rgba(226,232,240,.9);">
        <div class="d-flex align-items-center gap-2">
            <span class="d-inline-flex align-items-center justify-content-center rounded-circle"
                  style="width:34px;height:34px;background:#fff;box-shadow:0 10px 20px rgba(15,23,42,.10);">
                <i class="bi bi-pencil-square"></i>
            </span>
            <div>
                <h5 class="modal-title mb-0" id="eventModalTitle" style="font-size:.98rem;font-weight:700;">Nowy wpis</h5>
                <div class="text-muted small" id="eventModalSubtitle">Uzupełnij dane i zapisz.</div>
            </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
      </div>

      <div class="modal-body" style="padding: 1.15rem 1.35rem 1rem;">
        <div id="formErrors" class="alert alert-danger d-none">
            <div class="d-flex gap-2">
                <i class="bi bi-exclamation-triangle"></i>
                <div id="formErrorsInner" class="w-100"></div>
            </div>
        </div>

        <input type="hidden" id="event_id" value="">

        <div class="row g-3">

          {{-- tytuł + typ --}}
          <div class="col-md-8">
            <label class="form-label">Tytuł</label>
            <input type="text" class="form-control" id="title" placeholder="np. Spotkanie z klientem / Przegląd projektu">
          </div>

          <div class="col-md-4">
            <label class="form-label">Typ</label>
            <select class="form-select" id="type">
              <option value="meeting">Spotkanie</option>
              <option value="reminder">Przypomnienie</option>
              <option value="task">Zadanie</option>
            </select>
          </div>

          {{-- opis --}}
          <div class="col-md-12">
            <label class="form-label">Opis</label>
            <textarea class="form-control" id="description" rows="3" placeholder="Notatki, agenda, osoby, linki..."></textarea>
          </div>

          {{-- czas --}}
          <div class="col-md-6">
            <label class="form-label"><i class="bi bi-play-circle me-1"></i> Start</label>
            <input type="datetime-local" class="form-control" id="starts_at">
          </div>

          <div class="col-md-6">
            <label class="form-label"><i class="bi bi-stop-circle me-1"></i> Koniec</label>
            <input type="datetime-local" class="form-control" id="ends_at">
          </div>

          <div class="col-md-4">
            <label class="form-label">Cały dzień</label>
            <div class="form-check mt-2">
              <input class="form-check-input" type="checkbox" id="all_day">
              <label class="form-check-label" for="all_day">Tak</label>
            </div>
          </div>

          <div class="col-md-4">
            <label class="form-label">Status</label>
            <select class="form-select" id="status">
              <option value="planned">Plan</option>
              <option value="done">Wykonane</option>
              <option value="canceled">Anulowane</option>
            </select>
          </div>

          <div class="col-md-4">
            <label class="form-label">Kolor</label>
            <input type="text" class="form-control" id="color" placeholder="#2563eb">
            <div class="form-text">Opcjonalnie. Puste = domyślny.</div>
          </div>

          {{-- widoczność + dział/global --}}
          <div class="col-md-12">
            <div class="erp-soft-box" style="padding: 1rem 1.1rem;">
                <div class="row g-3 align-items-end">
                    <div class="col-md-6">
                        <label class="form-label">Dział (tylko z Twojego drzewa)</label>
                        <select class="form-select" id="department_id">
                          <option value="">— brak —</option>
                          @foreach($departments as $d)
                            <option value="{{ $d->id }}" @selected(($defaultDepartmentId ?? null) === $d->id)>{{ $d->name }}</option>
                          @endforeach
                        </select>
                        <div class="form-text">Jeśli zaznaczysz “Globalne”, dział zostanie wyczyszczony.</div>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Globalne</label>
                        <div class="d-flex align-items-center gap-2 mt-2">
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" id="is_global">
                              <label class="form-check-label" for="is_global">Pokaż wszystkim (firma)</label>
                            </div>
                            <span class="badge" style="background: rgba(34,197,94,.12); color:#16a34a;">
                                <i class="bi bi-globe2 me-1"></i> widoczne dla wszystkich
                            </span>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Widoczność (na przyszłość)</label>
                        <select class="form-select" id="visibility">
                          <option value="private">Prywatne</option>
                          <option value="department">Dział</option>
                          <option value="company">Firma</option>
                          <option value="team">Zespół</option>
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Lokalizacja</label>
                        <input type="text" class="form-control" id="location" placeholder="np. Sala A / Teams / teren">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Przypisane do (user_id) — na start</label>
                        <input type="number" class="form-control" id="assigned_to" placeholder="np. 1">
                        <div class="form-text">Potem podmienimy to na select z użytkownikami z Twojego drzewa.</div>
                    </div>
                </div>
            </div>
          </div>

          {{-- info o braku edycji --}}
          <div class="col-12">
              <div class="alert alert-warning d-none" id="noEditInfo" style="border-radius: 1rem;">
                  <div class="d-flex gap-2">
                      <i class="bi bi-shield-lock"></i>
                      <div class="small">
                          Ten wpis został utworzony przez innego użytkownika — możesz go zobaczyć, ale nie możesz edytować.
                      </div>
                  </div>
              </div>
          </div>

        </div>
      </div>

      <div class="modal-footer" style="padding: .85rem 1.35rem 1.05rem; border-top: 1px solid rgba(226,232,240,.9); background: rgba(249,250,251,.96);">
        <button type="button" class="btn btn-outline-danger d-none" id="btnDelete">
          <i class="bi bi-trash me-1"></i> Usuń
        </button>

        <div class="ms-auto d-flex gap-2">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Zamknij</button>
          <button type="button" class="btn btn-primary" id="btnSave">
            <i class="bi bi-check2 me-1"></i> Zapisz
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.css">
<style>
  /* FullCalendar – dopasowanie do Twojego "soft SaaS" UI */
  .erp-calendar-wrap .fc .fc-toolbar-title {
    font-weight: 700;
    letter-spacing: .02em;
  }
  .erp-calendar-wrap .fc .fc-button {
    border-radius: 999px !important;
    padding: .45rem .85rem !important;
    font-weight: 700;
    letter-spacing: .02em;
    border: 1px solid rgba(148,163,184,.45) !important;
    background: rgba(255,255,255,.96) !important;
    color: #111827 !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.08);
  }
  .erp-calendar-wrap .fc .fc-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(15,23,42,.12);
  }
  .erp-calendar-wrap .fc .fc-button-primary:not(:disabled).fc-button-active,
  .erp-calendar-wrap .fc .fc-button-primary:not(:disabled):active {
    background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 16px 32px rgba(37,99,235,.35);
  }
  .erp-calendar-wrap .fc .fc-col-header-cell-cushion {
    color: #6b7280;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  .erp-calendar-wrap .fc .fc-daygrid-day-frame,
  .erp-calendar-wrap .fc .fc-timegrid-slot {
    border-color: rgba(226,232,240,.85);
  }
  .erp-calendar-wrap .fc .fc-scrollgrid {
    border-radius: 1.15rem;
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.30);
    box-shadow: 0 18px 45px rgba(15,23,42,.10);
    background: rgba(255,255,255,.92);
  }
  .erp-calendar-wrap .fc .fc-day-today {
    background: rgba(37,99,235,.06) !important;
  }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const bs = window.bootstrap;
  if (!bs || !bs.Modal) {
    console.error('Bootstrap JS (window.bootstrap.Modal) nie jest dostępny. Sprawdź Vite/app.js.');
    return;
  }

  const csrf = @json(csrf_token());
  const listUrl    = @json(route('terminarz.events'));
  const storeUrl   = @json(route('terminarz.store'));
  const updateBase = @json(url('/terminarz/events'));
  const deleteBase = @json(url('/terminarz/events'));

  const modalEl = document.getElementById('eventModal');
  const modal   = new bs.Modal(modalEl);

  const el = (id) => document.getElementById(id);
  const errorsBox = el('formErrors');
  const errorsInner = el('formErrorsInner');
  const noEditInfo = el('noEditInfo');

  const filterQ = el('filter_q');
  const filterType = el('filter_type');
  const filterStatus = el('filter_status');

  function toLocalInputValue(isoOrDate) {
    if (!isoOrDate) return '';
    const d = (isoOrDate instanceof Date) ? isoOrDate : new Date(isoOrDate);
    const pad = (n) => String(n).padStart(2, '0');
    return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
  }

  function clearErrors() {
    errorsBox.classList.add('d-none');
    errorsInner.innerHTML = '';
  }

  function showErrors(msg) {
    errorsBox.classList.remove('d-none');
    errorsInner.innerHTML = msg;
  }

  function setEditable(canEdit) {
    // blokuj pola
    document.querySelectorAll('#eventModal input, #eventModal textarea, #eventModal select')
      .forEach(x => { x.disabled = !canEdit; });

    // zamykanie zawsze działa
    document.querySelectorAll('#eventModal button[data-bs-dismiss="modal"], #eventModal .btn-close')
      .forEach(x => { x.disabled = false; });

    if (canEdit) {
      el('btnSave').classList.remove('d-none');
      // delete pokażemy tylko dla edycji istniejącego
      noEditInfo.classList.add('d-none');
    } else {
      el('btnSave').classList.add('d-none');
      el('btnDelete').classList.add('d-none');
      noEditInfo.classList.remove('d-none');
    }
  }

  function resetForm() {
    clearErrors();
    el('eventModalTitle').textContent = 'Nowy wpis';
    el('eventModalSubtitle').textContent = 'Uzupełnij dane i zapisz.';
    el('event_id').value = '';

    el('title').value = '';
    el('description').value = '';
    el('location').value = '';
    el('starts_at').value = '';
    el('ends_at').value = '';
    el('all_day').checked = false;

    el('type').value = 'meeting';
    el('status').value = 'planned';
    el('visibility').value = 'private';

    el('department_id').value = '';
    el('is_global').checked = false;

    el('assigned_to').value = '';
    el('color').value = '';

    el('btnDelete').classList.add('d-none');
    el('btnSave').classList.remove('d-none');

    // nowy wpis zawsze edytowalny
    setEditable(true);
  }

  function fillFormFromEvent(fcEvent) {
    clearErrors();
    el('eventModalTitle').textContent = 'Szczegóły wpisu';
    el('eventModalSubtitle').textContent = 'Kliknij „Zapisz” tylko jeśli masz uprawnienia do edycji.';
    el('event_id').value = fcEvent.id;

    el('title').value = fcEvent.title || '';
    el('starts_at').value = toLocalInputValue(fcEvent.start);
    el('ends_at').value = toLocalInputValue(fcEvent.end);
    el('all_day').checked = !!fcEvent.allDay;

    const p = fcEvent.extendedProps || {};
    el('description').value = p.description || '';
    el('location').value = p.location || '';
    el('type').value = p.type || 'meeting';
    el('status').value = p.status || 'planned';
    el('visibility').value = p.visibility || 'private';
    el('department_id').value = (p.department_id ?? '');
    el('is_global').checked = !!p.is_global;
    el('assigned_to').value = (p.assigned_to ?? '');
    el('color').value = (fcEvent.backgroundColor && fcEvent.backgroundColor !== '') ? fcEvent.backgroundColor : '';

    const canEdit = (p.can_edit === undefined) ? true : !!p.can_edit;
    setEditable(canEdit);

    if (canEdit) {
      el('btnDelete').classList.remove('d-none');
    }
  }

  async function http(method, url, payload) {
    const res = await fetch(url, {
      method,
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': csrf,
        'Accept': 'application/json',
      },
      body: payload ? JSON.stringify(payload) : null,
      credentials: 'same-origin',
    });

    const data = await res.json().catch(() => ({}));

    if (!res.ok) {
      if (data?.errors) {
        const lines = Object.values(data.errors).flat().map(e => `<div>${e}</div>`).join('');
        throw new Error(lines || 'Błąd walidacji.');
      }
      throw new Error(data?.message || 'Błąd zapytania.');
    }

    return data;
  }

  // === FullCalendar ===
  const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    initialView: 'dayGridMonth',
    height: 'auto',
    locale: 'pl',
    firstDay: 1,
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    selectable: true,
    editable: true,
    eventDurationEditable: true,
    nowIndicator: true,

    events: async (info, success, failure) => {
      try {
        const url = new URL(listUrl);
        url.searchParams.set('start', info.startStr);
        url.searchParams.set('end', info.endStr);

        const res = await fetch(url, { credentials: 'same-origin', headers: { 'Accept': 'application/json' }});
        let data = await res.json();

        // UI filtry (na aktualnie pobranych danych)
        const q = (filterQ?.value || '').trim().toLowerCase();
        const t = filterType?.value || '';
        const s = filterStatus?.value || '';

        if (q || t || s) {
          data = (data || []).filter(ev => {
            const title = (ev.title || '').toLowerCase();
            const p = ev.extendedProps || {};
            if (q && !title.includes(q)) return false;
            if (t && (p.type || '') !== t) return false;
            if (s && (p.status || '') !== s) return false;
            return true;
          });
        }

        success(data);
      } catch (e) { failure(e); }
    },

    dateClick: (info) => {
      resetForm();
      const base = info.dateStr.includes('T') ? info.dateStr : (info.dateStr + 'T09:00');
      el('starts_at').value = base;
      el('ends_at').value = info.dateStr.includes('T') ? info.dateStr : (info.dateStr + 'T10:00');
      modal.show();
    },

    eventClick: (info) => {
      resetForm();
      fillFormFromEvent(info.event);
      modal.show();
    },

    eventDrop: async (info) => {
      try {
        const e = info.event;
        const canEdit = !!(e.extendedProps?.can_edit ?? true);
        if (!canEdit) {
          info.revert();
          return;
        }

        await http('PUT', `${updateBase}/${e.id}`, {
          title: e.title,
          starts_at: e.start?.toISOString(),
          ends_at: e.end?.toISOString(),
          all_day: e.allDay,
          description: e.extendedProps?.description ?? null,
          location: e.extendedProps?.location ?? null,
          type: e.extendedProps?.type ?? 'meeting',
          status: e.extendedProps?.status ?? 'planned',
          visibility: e.extendedProps?.visibility ?? 'private',
          department_id: e.extendedProps?.department_id ?? null,
          is_global: e.extendedProps?.is_global ?? false,
          assigned_to: e.extendedProps?.assigned_to ?? null,
          color: e.backgroundColor || null,
        });
      } catch (e) {
        info.revert();
        alert(e.message);
      }
    },

    eventResize: async (info) => {
      try {
        const e = info.event;
        const canEdit = !!(e.extendedProps?.can_edit ?? true);
        if (!canEdit) {
          info.revert();
          return;
        }

        await http('PUT', `${updateBase}/${e.id}`, {
          title: e.title,
          starts_at: e.start?.toISOString(),
          ends_at: e.end?.toISOString(),
          all_day: e.allDay,
          description: e.extendedProps?.description ?? null,
          location: e.extendedProps?.location ?? null,
          type: e.extendedProps?.type ?? 'meeting',
          status: e.extendedProps?.status ?? 'planned',
          visibility: e.extendedProps?.visibility ?? 'private',
          department_id: e.extendedProps?.department_id ?? null,
          is_global: e.extendedProps?.is_global ?? false,
          assigned_to: e.extendedProps?.assigned_to ?? null,
          color: e.backgroundColor || null,
        });
      } catch (e) {
        info.revert();
        alert(e.message);
      }
    },
  });

  calendar.render();

  // --- view buttons (spójne z Twoimi pill btn) ---
  el('viewMonth')?.addEventListener('click', () => calendar.changeView('dayGridMonth'));
  el('viewWeek')?.addEventListener('click', () => calendar.changeView('timeGridWeek'));
  el('viewDay')?.addEventListener('click', () => calendar.changeView('timeGridDay'));

  // --- filters ---
  function refetch() { calendar.refetchEvents(); }
  filterQ?.addEventListener('input', () => refetch());
  filterType?.addEventListener('change', () => refetch());
  filterStatus?.addEventListener('change', () => refetch());

  el('btnFiltersClear')?.addEventListener('click', () => {
    if (filterQ) filterQ.value = '';
    if (filterType) filterType.value = '';
    if (filterStatus) filterStatus.value = '';
    refetch();
  });

  // --- new event ---
  el('btnNewEvent')?.addEventListener('click', () => {
    resetForm();
    modal.show();
  });

  // global toggle clears department
  el('is_global')?.addEventListener('change', () => {
    if (el('is_global').checked) el('department_id').value = '';
  });

  // save
  el('btnSave')?.addEventListener('click', async () => {
    clearErrors();

    const id = el('event_id').value || null;

    const payload = {
      title: el('title').value.trim(),
      description: el('description').value || null,
      location: el('location').value || null,

      starts_at: el('starts_at').value ? new Date(el('starts_at').value).toISOString() : null,
      ends_at: el('ends_at').value ? new Date(el('ends_at').value).toISOString() : null,
      all_day: el('all_day').checked,

      type: el('type').value,
      status: el('status').value,
      visibility: el('visibility').value,

      department_id: el('department_id').value ? parseInt(el('department_id').value, 10) : null,
      is_global: el('is_global').checked,

      assigned_to: el('assigned_to').value ? parseInt(el('assigned_to').value, 10) : null,
      color: el('color').value || null,
    };

    try {
      if (!payload.starts_at) throw new Error('Podaj datę startu.');
      if (!payload.title) throw new Error('Podaj tytuł.');
      if (payload.is_global && payload.department_id) throw new Error('Globalne: usuń przypisany dział.');

      if (!id) {
        await http('POST', storeUrl, payload);
      } else {
        await http('PUT', `${updateBase}/${id}`, payload);
      }

      modal.hide();
      calendar.refetchEvents();
    } catch (e) {
      showErrors(e.message);
    }
  });

  // delete
  el('btnDelete')?.addEventListener('click', async () => {
    clearErrors();
    const id = el('event_id').value;
    if (!id) return;

    if (!confirm('Usunąć ten wpis?')) return;

    try {
      await http('DELETE', `${deleteBase}/${id}`);
      modal.hide();
      calendar.refetchEvents();
    } catch (e) {
      showErrors(e.message);
    }
  });
});
</script>
@endpush