@extends('layouts.master')

@section('content')
@push('styles')
<style>
  /* --- Glass container --- */
  .glass-container {
    max-width: 1200px;
    margin: 1.5rem auto;
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 16px;
    padding: 1.5rem;
    transition: background .3s, border-color .3s;
  }
  body.dark-mode .glass-container {
    background: rgba(30,30,40,0.7);
    border-color: rgba(255,255,255,0.15);
  }

  /* --- Compact form controls & buttons --- */
  .glass-container .form-control,
  .glass-container .form-select {
    padding: .4rem .6rem;
    font-size: .9rem;
  }
  .glass-container .btn {
    padding: .4rem .8rem;
    font-size: .9rem;
  }

  /* --- Card headers (charts & KPI) --- */
  .glass-container .card-header {
    padding: .6rem 1rem;
    font-size: .95rem;
    backdrop-filter: blur(8px);
    transition: background .3s, border-color .3s;
  }
  body.light-mode .glass-container .card-header {
    background: rgba(255,255,255,0.85);
    border-bottom: 1px solid rgba(0,0,0,0.1);
  }
  body.dark-mode .glass-container .card-header {
    background: rgba(40,40,40,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  /* --- KPI cards --- */
  .glass-container .card.text-center {
    margin-bottom: 1rem;
  }
  .glass-container .card-body h6 {
    font-size: .85rem;
    margin-bottom: .5rem;
  }
  .glass-container .card-body p.display-6 {
    font-size: 1.5rem;
  }

  /* --- Chart cards --- */
  .glass-container .card {
    margin-bottom: 1rem;
  }
  .glass-container .card-body {
    padding: .75rem;
  }

  /* --- Table responsive wrapper (filters) --- */
  .glass-container form.row {
    margin-bottom: 1.5rem;
  }

  /* --- Dark mode tweaks for inputs --- */
  body.dark-mode .glass-container .form-control,
  body.dark-mode .glass-container .form-select {
    background-color: #2b2b2b;
    border-color: #444;
    color: #e0e0e0;
  }
  body.dark-mode .glass-container .form-control::placeholder {
    color: #777;
  }
</style>
@endpush

<div class="glass-container">
  <h1 class="h4 mb-4">Zaawansowane statystyki zgłoszeń</h1>

  {{-- Filtry --}}
  <form method="GET" class="row g-3 mb-4" id="filterForm">
    <div class="col-12 col-md-3">
      <label for="group" class="form-label small">Grupowanie</label>
      <select id="group" name="group" class="form-select form-select-sm">
        <option value="day"   {{ $group=='day'   ? 'selected' : '' }}>Dzień</option>
        <option value="month" {{ $group=='month' ? 'selected' : '' }}>Miesiąc</option>
        <option value="year"  {{ $group=='year'  ? 'selected' : '' }}>Rok</option>
      </select>
    </div>
    <div class="col-6 col-md-2 filter-day">
      <label for="from" class="form-label small">Data od</label>
      <input type="date" id="from" name="from" value="{{ $from }}" class="form-control form-control-sm">
    </div>
    <div class="col-6 col-md-2 filter-day">
      <label for="to" class="form-label small">Data do</label>
      <input type="date" id="to" name="to" value="{{ $to }}" class="form-control form-control-sm">
    </div>
    <div class="col-6 col-md-2 filter-month d-none">
      <label for="from_month" class="form-label small">Miesiąc od</label>
      <input type="month" id="from_month" name="from_month" value="{{ $from }}" class="form-control form-control-sm">
    </div>
    <div class="col-6 col-md-2 filter-month d-none">
      <label for="to_month" class="form-label small">Miesiąc do</label>
      <input type="month" id="to_month" name="to_month" value="{{ $to }}" class="form-control form-control-sm">
    </div>
    <div class="col-6 col-md-2 filter-year d-none">
      <label for="year" class="form-label small">Rok</label>
      <select id="year" name="year" class="form-select form-select-sm">
        @php
          $currentYear = now()->year;
          $startYear = $currentYear - 10;
        @endphp
        @for($y = $currentYear; $y >= $startYear; $y--)
          <option value="{{ $y }}" {{ $group=='year' && $from==(string)$y ? 'selected' : '' }}>
            {{ $y }}
          </option>
        @endfor
      </select>
    </div>
    <div class="col-12 col-md-1 d-flex align-items-end">
      <button type="submit" class="btn btn-primary btn-sm w-100">Pokaż</button>
    </div>
  </form>

  {{-- KPI --}}
  <div class="row gy-3 mb-4">
    @foreach([
      ['Łącznie zgłoszeń', array_sum($ticketsTime->toArray())],
      ['Zamknięte', $closedCount],
      ['Usunięte', $deletedCount],
      ['Śr. czas zamknięcia', number_format($avgClose ?? 0,2).' dni'],
      ['Śr. wiad./zgl.', number_format($avgMsgs ?? 0,2)],
    ] as [$title,$value])
      <div class="col-6 col-md-2">
        <div class="card text-center shadow-sm">
          <div class="card-body p-2">
            <h6 class="small mb-1">{{ $title }}</h6>
            <p class="mb-0">{{ $value }}</p>
          </div>
        </div>
      </div>
    @endforeach
  </div>

  {{-- Wykresy --}}
  <div class="row gy-4">
    <div class="col-md-6">
      <div class="card shadow-sm">
        <div class="card-header">Zgłoszenia ({{ ucfirst($group) }})</div>
        <div class="card-body p-2"><canvas id="chartTicketsTime"></canvas></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card shadow-sm">
        <div class="card-header">Tematy pomocy</div>
        <div class="card-body p-2"><canvas id="chartTopicDist"></canvas></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card shadow-sm">
        <div class="card-header">Statusy</div>
        <div class="card-body p-2"><canvas id="chartStatusDist"></canvas></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card shadow-sm">
        <div class="card-header">Priorytety</div>
        <div class="card-body p-2"><canvas id="chartPriorityDist"></canvas></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card shadow-sm">
        <div class="card-header">Firmy</div>
        <div class="card-body p-2"><canvas id="chartCompanyDist"></canvas></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card shadow-sm">
        <div class="card-header">Wiadomości: admin vs user</div>
        <div class="card-body p-2"><canvas id="chartMsgDist"></canvas></div>
      </div>
    </div>
  </div>
</div>

<script>
  function toggleFilters() {
    const g = document.getElementById('group').value;
    document.querySelectorAll('.filter-day').forEach(el => el.classList.toggle('d-none', g!=='day'));
    document.querySelectorAll('.filter-month').forEach(el => el.classList.toggle('d-none', g!=='month'));
    document.querySelectorAll('.filter-year').forEach(el => el.classList.toggle('d-none', g!=='year'));
  }
  document.getElementById('group').addEventListener('change', toggleFilters);
  toggleFilters();
</script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ticketsLabels   = @json(array_keys($ticketsTime->toArray())),
        ticketsData     = @json(array_values($ticketsTime->toArray())),
        statusLabels    = @json(array_keys($statusDist->toArray())),
        statusData      = @json(array_values($statusDist->toArray())),
        priorityLabels  = @json(array_keys($priorityDist->toArray())),
        priorityData    = @json(array_values($priorityDist->toArray())),
        topicLabels     = @json(array_keys($topicDist->toArray())),
        topicData       = @json(array_values($topicDist->toArray())),
        companyLabels   = @json(array_keys($companyDist->toArray())),
        companyData     = @json(array_values($companyDist->toArray())),
        msgLabels       = ['Użytkownicy','Admini'],
        msgData         = [ @json($msgDist->get(false,0)), @json($msgDist->get(true,0)) ];

  new Chart(document.getElementById('chartTicketsTime'), { type:'line',
    data:{ labels:ticketsLabels,
      datasets:[{ label:'Zgłoszenia', data:ticketsData, fill:false, tension:0.3 }] },
    options:{ scales:{ y:{ beginAtZero:true } } }
  });
  new Chart(document.getElementById('chartStatusDist'),  { type:'pie',
    data:{ labels:statusLabels, datasets:[{ data:statusData }] }
  });
  new Chart(document.getElementById('chartPriorityDist'),{ type:'doughnut',
    data:{ labels:priorityLabels, datasets:[{ data:priorityData }] }
  });
  new Chart(document.getElementById('chartTopicDist'),   { type:'bar',
    data:{ labels:topicLabels, datasets:[{ label:'Ilość zgłoszeń', data:topicData }] },
    options:{ scales:{ y:{ beginAtZero:true } } }
  });
  new Chart(document.getElementById('chartCompanyDist'), { type:'pie',
    data:{ labels:companyLabels, datasets:[{ data:companyData }] }
  });
  new Chart(document.getElementById('chartMsgDist'),     { type:'pie',
    data:{ labels:msgLabels, datasets:[{ data:msgData }] }
  });
</script>
@endsection