@extends('layouts.app')
@section('title', 'Alerts & Notifications')

@section('content')
<div class="p-4 sm:p-6 lg:p-7">
  <div class="flex flex-col xl:flex-row xl:items-start xl:justify-between gap-4 mb-5">
    <div>
      <p class="text-[17px] font-bold text-slate-900"><i class="fa-solid fa-bell text-blue-600 mr-2"></i>Alerts &amp; Notifications</p>
      <p class="text-slate-400 text-[11px] mt-0.5">Items requiring your attention</p>
    </div>
    <div class="flex flex-wrap gap-2">
      @if(auth()->user()->canGenerateAlerts())
        <form action="{{ route('alerts.generate') }}" method="post" class="inline">@csrf
          <button type="submit" class="bs">Refresh Alerts</button>
        </form>
      @endif
      <form method="post" action="{{ route('alerts.read-all') }}" class="inline" id="alertMarkAllRead" onsubmit="return confirm('Mark all visible alerts as read?');">@csrf @method('PUT')
        <input type="hidden" name="severity" value="{{ $filters['severity'] }}">
        <input type="hidden" name="status" value="{{ $filters['status'] }}">
        <input type="hidden" name="module" value="{{ $filters['module'] ?? '' }}">
        <input type="hidden" name="q" value="{{ $filters['q'] }}">
        <input type="hidden" name="date_from" value="{{ $filters['date_from'] }}">
        <input type="hidden" name="date_to" value="{{ $filters['date_to'] }}">
        <input type="hidden" name="sort" value="{{ $filters['sort'] }}">
        <input type="hidden" name="direction" value="{{ $filters['direction'] }}">
        <button type="submit" class="bs">Mark All Read</button>
      </form>
      <a href="{{ route('alerts.export.excel', request()->query()) }}" class="bs no-underline inline-flex items-center justify-center"><i class="fa-solid fa-file-excel text-emerald-600 mr-1"></i>Export Excel</a>
      <a href="{{ route('alerts.export.pdf', request()->query()) }}" class="bs no-underline inline-flex items-center justify-center"><i class="fa-solid fa-file-pdf text-red-600 mr-1"></i>Export PDF</a>
    </div>
  </div>

  <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-5">
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Critical</p><p class="text-[22px] font-bold text-red-500 mt-2">{{ $criticalCount }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Warnings</p><p class="text-[22px] font-bold text-amber-600 mt-2">{{ $warningCount }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Info</p><p class="text-[22px] font-bold text-blue-600 mt-2">{{ $infoCount }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Unread</p><p class="text-[22px] font-bold text-slate-800 mt-2">{{ $unreadCount }}</p></div>
  </div>

  <form method="get" action="{{ route('alerts.index') }}" class="dp mb-5">
    <div class="flex flex-wrap items-end gap-3">
      <div class="min-w-[180px] flex-1">
        <label class="fl">Search</label>
        <input type="search" name="q" value="{{ $filters['q'] }}" class="fi" placeholder="Search alerts…">
      </div>
      <div class="min-w-[120px]">
        <label class="fl">Severity</label>
        <select name="severity" class="fi">
          @foreach(['all'=>'All','critical'=>'Critical','warning'=>'Warning','info'=>'Info'] as $v=>$l)
            <option value="{{ $v }}" @selected($filters['severity']==$v)>{{ $l }}</option>
          @endforeach
        </select>
      </div>
      <div class="min-w-[130px]">
        <label class="fl">Status</label>
        <select name="status" class="fi">
          <option value="" @selected($filters['status']==='')>Active</option>
          <option value="all" @selected($filters['status']==='all')>All active</option>
          <option value="Unread" @selected($filters['status']==='Unread')>Unread</option>
          <option value="Read" @selected($filters['status']==='Read')>Read</option>
          <option value="Dismissed" @selected($filters['status']==='Dismissed')>Dismissed</option>
          <option value="Resolved" @selected($filters['status']==='Resolved')>Resolved</option>
        </select>
      </div>
      <div class="min-w-[130px]">
        <label class="fl">Module</label>
        <select name="module" class="fi">
          <option value="">All</option>
          @foreach($modules as $m)
            <option value="{{ $m }}" @selected($filters['module']==$m)>{{ $m }}</option>
          @endforeach
        </select>
      </div>
      <div class="min-w-[120px]">
        <label class="fl">From</label>
        <input type="date" name="date_from" class="fi" value="{{ $filters['date_from'] }}">
      </div>
      <div class="min-w-[120px]">
        <label class="fl">To</label>
        <input type="date" name="date_to" class="fi" value="{{ $filters['date_to'] }}">
      </div>
      <div class="min-w-[120px]">
        <label class="fl">Sort</label>
        <select name="sort" class="fi">
          @foreach(['triggered_at'=>'Triggered','severity'=>'Severity','related_module'=>'Module','status'=>'Status','created_at'=>'Created'] as $v=>$l)
            <option value="{{ $v }}" @selected(($filters['sort']??'')==$v)>{{ $l }}</option>
          @endforeach
        </select>
      </div>
      <div class="min-w-[100px]">
        <label class="fl">Dir</label>
        <select name="direction" class="fi">
          <option value="desc" @selected(($filters['direction']??'')==='desc')>Desc</option>
          <option value="asc" @selected(($filters['direction']??'')==='asc')>Asc</option>
        </select>
      </div>
      <button type="submit" class="bp mt-5">Apply</button>
      <a href="{{ route('alerts.index') }}" class="bs mt-5 inline-flex items-center justify-center no-underline">Clear</a>
    </div>
  </form>

  <div class="space-y-3">
    @forelse($alerts as $a)
      @include('alerts.partials.alert-card', ['alert' => $a])
    @empty
      <div class="dp text-center py-14">
        <div class="w-14 h-14 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center mx-auto mb-3"><i class="fa-solid fa-circle-check text-2xl"></i></div>
        <p class="font-bold text-slate-800">No alerts requiring attention</p>
        <p class="text-slate-500 text-[13px] mt-1">The system will notify you when important items need action.</p>
        @if(auth()->user()->canGenerateAlerts())
          <form action="{{ route('alerts.generate') }}" method="post" class="mt-4">@csrf
            <button type="submit" class="bp">Refresh Alerts</button>
          </form>
        @endif
      </div>
    @endforelse
  </div>

  @if($alerts instanceof \Illuminate\Pagination\LengthAwarePaginator && $alerts->hasPages())
    <div class="mt-6">{{ $alerts->links() }}</div>
  @endif
</div>
@endsection