@extends('layouts.master')

@section('content')
@php
    $rola    = auth()->user()->rola->nazwa;
    $prefix  = match ($rola) {
        'Administrator' => 'admin',
        'Moderator'     => 'moderator',
        'Serwisant'     => 'serwisant',
        default         => 'admin'
    };
    $current    = request()->route()->getName();
    $priorities = ['' => '— wszystkie —', 'Normalny' => 'Normalny', 'Wysoki' => 'Wysoki', 'Krytyczny' => 'Krytyczny'];
@endphp

@push('styles')
<style>
  :root{ --brand-1:#1a237e; --brand-2:#90caf9; --danger:#c62828; }

  /* tło (jasny/ciemny) */
  body.light-mode { background: radial-gradient(1200px 600px at 10% 0%, #e8f0ff 0%, #fff 60%) fixed; color:#212529; }
  body.dark-mode  { background: radial-gradient(1200px 600px at 10% 0%, #161827 0%, #232636 60%) fixed; color:#eef1f5; }

  /* karta */
  .glass-box{
    backdrop-filter: blur(12px);
    border-radius: 16px;
    transition: transform .2s, box-shadow .2s, background .3s, border-color .3s;
    box-shadow: 0 8px 30px rgba(0,0,0,.10);
    border:1px solid;
  }
  body.light-mode .glass-box{ background: rgba(255,255,255,.75); border-color: rgba(255,255,255,.45); }
  body.dark-mode  .glass-box{ background: rgba(30,30,40,.65);  border-color: rgba(255,255,255,.12); }
  .glass-box:hover{ transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0,0,0,.14); }

  /* toolbar */
  .toolbar .btn-group .btn.active{ background:var(--brand-1); color:#fff; border-color:var(--brand-1); }
  body.dark-mode .toolbar .btn-group .btn.active{ background:var(--brand-2); color:#000; border-color:var(--brand-2); }

  /* filtry */
  .filters .form-select, .filters .form-control{ border-radius:.6rem }
  .filters .auto-submit{ min-width: 160px; }

  /* tabela – bez wewnętrznych scrollbarów/sticky header */
  .table{ margin:0; width:100%; }
  .table thead th{ background:#eaf2ff; color:#0d47a1; }
  body.dark-mode .table thead th{ background:#2a2a2a; color:#bbdefb; }
  .table-hover tbody tr:hover{ background:#f5f9ff; }
  body.dark-mode .table-hover tbody tr:hover{ background:#2c3e50; }
  .row-link{ cursor:pointer; }

  /* responsywne ukrywanie kolumn */
  @media (max-width: 992px){ .col-hide-lg{ display:none } }
  @media (max-width: 768px){ .col-hide-md{ display:none } }

  /* chipy */
  .chip{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.25rem .6rem; border-radius:999px; font-size:.8rem; font-weight:600;
    border:1px solid transparent; white-space:nowrap;
  }
  .chip-status{ color:#fff; }
  .chip-prio-normal{ background:#f4f7fb; border-color:#cfd6e4; color:#1e2a3a; }
  .chip-prio-high{ background:#fff3cd; border-color:#ffe08a; color:#8d6e00; }
  .chip-prio-critical{ background:#ffebee; border-color:#ef9a9a; color:#b71c1c; }
</style>
@endpush

<main class="d-flex flex-column" style="flex:1">
  <div class="container py-4 d-flex flex-column" style="flex:1">
    <div class="glass-box p-4 d-flex flex-column" style="flex:1">
      {{-- Toolbar --}}
      <div class="toolbar d-flex gap-3 justify-content-between align-items-center flex-wrap mb-3">
        <h2 class="fw-bold m-0">Lista zgłoszeń</h2>
        <div class="d-flex gap-2 align-items-center flex-wrap">
          <div class="btn-group">
            <a href="{{ route($prefix.'.tickets') }}"
               class="btn btn-outline-primary {{ $current === $prefix.'.tickets' ? 'active' : '' }}">Otwarte</a>
            <a href="{{ route($prefix.'.tickets.closed') }}"
               class="btn btn-outline-primary {{ $current === $prefix.'.tickets.closed' ? 'active' : '' }}">Zamknięte</a>
            <a href="{{ route($prefix.'.tickets.deleted') }}"
               class="btn btn-outline-danger  {{ $current === $prefix.'.tickets.deleted' ? 'active' : '' }}">Usunięte</a>
          </div>
        </div>
      </div>

      {{-- FILTRY (GET) --}}
      <form method="GET" action="{{ url()->current() }}" id="filtersForm" class="filters row g-2 align-items-end mb-3">
        <div class="col-12 col-md-4">
          <label class="form-label">Szukaj</label>
          <input type="text" name="q" value="{{ request('q') }}" class="form-control"
                 placeholder="firma / temat / zgłaszający">
        </div>
        <div class="col-6 col-md-3">
          <label class="form-label">Status</label>
          <select name="status_id" class="form-select auto-submit">
            <option value="">— wszystkie —</option>
            @isset($statuses)
              @foreach($statuses as $st)
                <option value="{{ $st->id_status }}" @selected((string)request('status_id')===(string)$st->id_status)>
                  {{ $st->nazwa }}
                </option>
              @endforeach
            @endisset
          </select>
        </div>
        <div class="col-6 col-md-2">
          <label class="form-label">Priorytet</label>
          <select name="priority" class="form-select auto-submit">
            @foreach($priorities as $val => $label)
              <option value="{{ $val }}" @selected(request('priority')===$val)>{{ $label }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-6 col-md-3">
          <label class="form-label">Pracownik</label>
          <select name="user_id" class="form-select auto-submit">
            <option value="">— wszyscy —</option>
            @foreach($users as $u)
              <option value="{{ $u->id }}" @selected((string)request('user_id')===(string)$u->id)>
                {{ $u->name }} {{ $u->surname }}
              </option>
            @endforeach
          </select>
        </div>
        <div class="col-6 col-md-auto">
          <button class="btn btn-primary w-100">Filtruj</button>
        </div>
        @if(request()->hasAny(['q','status_id','priority','user_id']))
          <div class="col-6 col-md-auto">
            <a href="{{ url()->current() }}" class="btn btn-outline-secondary w-100">Wyczyść</a>
          </div>
        @endif
      </form>

      {{-- TABELA (bez wewnętrznego scrolla) --}}
      <table class="table table-hover align-middle text-center mb-0">
        <thead>
          <tr>
            <th class="col-hide-md" style="width:80px">Nr</th>
            <th style="width:120px">Data</th>
            <th class="col-hide-md" style="width:220px">Firma</th>
            <th>Temat</th>
            <th style="width:170px">Status</th>
            <th class="col-hide-lg" style="width:140px">Priorytet</th>
            <th class="col-hide-md" style="width:190px">Od</th>
            <th class="col-hide-lg" style="width:190px">Pracownik</th>
            @if(in_array($rola, ['Administrator','Moderator']))
              <th style="width:170px">Akcje</th>
            @endif
          </tr>
        </thead>
        <tbody>
          @forelse($tickets as $ticket)
            @php
              $statusName = $ticket->status->nazwa ?? 'Brak';
              $statusColor= $ticket->status->kolor ?? '#9e9e9e';
              $prio       = $ticket->priority;
              $prioClass  = match($prio){
                'Krytyczny' => 'chip-prio-critical',
                'Wysoki'    => 'chip-prio-high',
                default     => 'chip-prio-normal',
              };
            @endphp
            <tr class="row-link" onclick="window.location='{{ route($prefix.'.tickets.show', $ticket) }}'">
              <td class="col-hide-md">#{{ $ticket->id }}</td>
              <td>{{ $ticket->created_at->format('Y-m-d') }}</td>
              <td class="text-truncate col-hide-md" style="max-width:180px;" title="{{ $ticket->company }}">
                {{ $ticket->company ?? 'Nieznana' }}
              </td>
              <td class="text-truncate" style="max-width:360px;" title="{{ $ticket->subject }}">
                {{ $ticket->subject }}
              </td>
              <td>
                @if($ticket->status)
                  <span class="chip chip-status" style="background: {{ $statusColor }};">{{ $statusName }}</span>
                @else
                  <span class="chip chip-prio-normal">Brak</span>
                @endif
              </td>
              <td class="col-hide-lg">
                <span class="chip {{ $prioClass }}">{{ $ticket->priority }}</span>
              </td>
              <td class="text-truncate col-hide-md" style="max-width:170px;" title="{{ $ticket->name }}">
                {{ $ticket->name }}
              </td>
              <td class="text-truncate col-hide-lg" style="max-width:180px;"
                  title="{{ $ticket->assignedUser?->name }} {{ $ticket->assignedUser?->surname }}">
                @if($ticket->assignedUser)
                  {{ $ticket->assignedUser->name }} {{ $ticket->assignedUser->surname }}
                @else
                  <span class="text-muted">Brak</span>
                @endif
              </td>

              @if(in_array($rola, ['Administrator','Moderator']))
                <td class="text-nowrap">
                  <div class="d-flex justify-content-center gap-2" onclick="event.stopPropagation()">
                    <button class="btn btn-info btn-sm"
                            data-bs-toggle="modal"
                            data-bs-target="#assignModal{{ $ticket->id }}">
                      Przypisz
                    </button>

                    @if($ticket->zamkniety || $ticket->usuniety)
                      <form action="{{ route($prefix.'.tickets.restore', $ticket) }}" method="POST"
                            onsubmit="return confirm('Przywrócić zgłoszenie?')">
                        @csrf
                        <button class="btn btn-success btn-sm">Przywróć</button>
                      </form>
                    @else
                      <form action="{{ route($prefix.'.tickets.destroy', $ticket) }}" method="POST"
                            onsubmit="return confirm('Usunąć zgłoszenie?')">
                        @csrf @method('DELETE')
                        <button class="btn btn-danger btn-sm">Usuń</button>
                      </form>
                    @endif
                  </div>
                </td>
              @endif
            </tr>
          @empty
            <tr>
              <td colspan="{{ in_array($rola, ['Administrator','Moderator']) ? 9 : 8 }}" class="text-muted py-4">
                Brak zgłoszeń do wyświetlenia.
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>

      {{-- paginacja 10/stronę (parametry filtrów zostają) --}}
      <div class="d-flex justify-content-center mt-4">
  {!! $tickets->withQueryString()->onEachSide(1)->links('vendor.pagination.egasoft') !!}

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

{{-- Modale przypisania --}}
@foreach($tickets as $ticket)
  <div class="modal fade" id="assignModal{{ $ticket->id }}" tabindex="-1"
       aria-labelledby="assignModalLabel{{ $ticket->id }}" aria-hidden="true"
       data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
      <form method="POST" action="{{ route($prefix.'.tickets.assign', $ticket) }}" class="modal-content">
        @csrf
        <div class="modal-header">
          <h5 class="modal-title" id="assignModalLabel{{ $ticket->id }}">Przypisz pracownika</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="user_id_{{ $ticket->id }}" class="form-label">Wybierz pracownika:</label>
            <select name="user_id" id="user_id_{{ $ticket->id }}" class="form-select" required>
              <option value="" disabled selected>-- wybierz --</option>
              @foreach($users as $u)
                <option value="{{ $u->id }}">{{ $u->name }} {{ $u->surname }} ({{ $u->email }})</option>
              @endforeach
            </select>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="send_email" value="1"
                   id="sendEmail{{ $ticket->id }}" checked>
            <label class="form-check-label" for="sendEmail{{ $ticket->id }}">Wyślij e-mail z powiadomieniem</label>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-success" type="submit">Zapisz</button>
          <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Anuluj</button>
        </div>
      </form>
    </div>
  </div>
@endforeach
@endsection

@push('scripts')
<script>
  // auto-submit przy zmianie selectów
  document.addEventListener('DOMContentLoaded', function(){
    document.querySelectorAll('#filtersForm .auto-submit').forEach(function(el){
      el.addEventListener('change', function(){
        document.getElementById('filtersForm').submit();
      });
    });
  });
</script>
@endpush