@extends('layouts.app')
@section('title', __('dashboard.sidebar_moderators'))
@section('page_heading', __('dashboard.sidebar_moderators'))


@section('content')
<div style="display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:1.25rem">
    @can('create moderators')
    <a href="{{ route('dashboard.moderators.create') }}" class="app-btn app-btn--primary app-btn--sm">
        <i class="fa-solid fa-plus me-1"></i>{{ __('dashboard.Add New Moderator') }}
    </a>
    @endcan
</div>

<style>
.page-th { padding: .65rem 1.1rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); text-align: start; border-bottom: 1px solid var(--border); white-space: nowrap; }
.page-table tbody tr { border-bottom: 1px solid var(--border-subtle); transition: background .12s; }
.page-table tbody tr:hover { background: var(--surface-50); }
.page-table td { padding: .75rem 1.1rem; vertical-align: middle; }
</style>

@php
    $total   = \App\Models\User::where('type','admin')->count();
    $active  = \App\Models\User::where('type','admin')->where('is_active',true)->count();
    $inactive = $total - $active;
@endphp

{{-- KPIs --}}
<div class="kpi-grid-3">
    @foreach([
        ['fa-solid fa-users-gear',   '#eff6ff','#2563eb', $total,    __('dashboard.All Moderators')],
        ['fa-solid fa-circle-check', '#f0fdf4','#16a34a', $active,   __('dashboard.active')],
        ['fa-solid fa-circle-pause', '#fef2f2','#dc2626', $inactive, 'معطلون'],
    ] as [$ic,$bg,$cl,$val,$lbl])
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1rem 1.15rem;display:flex;align-items:center;gap:.875rem;box-shadow:var(--shadow-card)">
        <div style="width:40px;height:40px;border-radius:10px;background:{{ $bg }};color:{{ $cl }};display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0"><i class="{{ $ic }}"></i></div>
        <div>
            <div style="font-size:1.2rem;font-weight:900;color:var(--text-primary);line-height:1">{{ $val }}</div>
            <div style="font-size:.73rem;font-weight:700;color:var(--text-muted);margin-top:.15rem">{{ $lbl }}</div>
        </div>
    </div>
    @endforeach
</div>

{{-- Table card --}}
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden">

    {{-- Head --}}
    <div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle);flex-wrap:wrap">
        <div style="display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:800;color:var(--text-primary)">
            <i class="fa-solid fa-users-gear" style="color:var(--c-primary)"></i>
            {{ __('dashboard.All Moderators') }}
            <span style="font-size:.7rem;font-weight:700;padding:.15rem .55rem;border-radius:999px;background:var(--c-primary-bg);color:var(--c-primary)">{{ $moderators->total() }}</span>
        </div>
        <form method="GET" action="{{ route('dashboard.moderators.index') }}" style="display:flex;gap:.5rem">
            <input type="text" name="search" class="app-input app-input--sm" style="max-width:220px" value="{{ request('search') }}" placeholder="{{ __('dashboard.Search') }}...">
            <button type="submit" class="app-btn app-btn--secondary app-btn--sm"><i class="fa-solid fa-magnifying-glass"></i></button>
            @if(request('search'))
            <a href="{{ route('dashboard.moderators.index') }}" class="app-btn app-btn--secondary app-btn--sm"><i class="fa-solid fa-xmark"></i></a>
            @endif
        </form>
    </div>

    @if($moderators->isEmpty())
        <div style="padding:3rem;text-align:center">
            @include('layouts.partials.index-empty-state', ['icon'=>'fa-solid fa-users-gear','title'=>__('dashboard.No moderators found.'),'message'=>''])
        </div>
    @else
    <div style="overflow-x:auto">
        <table class="page-table" style="width:100%;border-collapse:collapse;font-size:.83rem">
            <thead>
                <tr style="background:var(--surface-50)">
                    <th class="page-th">{{ __('dashboard.Name') }}</th>
                    <th class="page-th">{{ __('dashboard.Email') }}</th>
                    <th class="page-th">{{ __('dashboard.Phone') }}</th>
                    <th class="page-th">{{ __('dashboard.Roles') }}</th>
                    <th class="page-th">{{ __('dashboard.status_label') }}</th>
                    <th class="page-th">{{ __('dashboard.Created At') }}</th>
                    <th class="page-th" style="text-align:end">{{ __('dashboard.Actions') }}</th>
                </tr>
            </thead>
            <tbody>
                @foreach($moderators as $m)
                @php
                    $canEdit   = !($m->isSuperAdminAccount() && !auth()->user()->hasRole('support')) && !($m->isSupportAccount() && !auth()->user()->hasRole('admin'));
                    $canDelete = !$m->isProtectedSystemAccount();
                @endphp
                <tr>
                    {{-- Name --}}
                    <td>
                        <div style="display:flex;align-items:center;gap:.625rem">
                            @if($m->avatar)
                                <img src="{{ asset('storage/'.$m->avatar) }}" style="width:34px;height:34px;border-radius:8px;object-fit:cover;flex-shrink:0">
                            @else
                                <div style="width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.85rem;font-weight:900;background:var(--c-primary-bg);color:var(--c-primary)">{{ mb_substr($m->name,0,1) }}</div>
                            @endif
                            <div>
                                <div style="font-weight:800;color:var(--text-primary);white-space:nowrap">{{ $m->name }}</div>
                                <div style="font-size:.68rem;color:var(--text-muted)">#{{ $m->id }}</div>
                            </div>
                        </div>
                    </td>
                    {{-- Email --}}
                    <td style="color:var(--text-secondary);font-size:.8rem">{{ $m->email }}</td>
                    {{-- Phone --}}
                    <td style="color:var(--text-muted);font-size:.8rem">{{ $m->phone ?? '—' }}</td>
                    {{-- Roles --}}
                    <td>
                        <div style="display:flex;flex-wrap:wrap;gap:.25rem">
                            @forelse($m->roles as $role)
                                <span style="display:inline-flex;align-items:center;padding:.2rem .55rem;border-radius:999px;font-size:.68rem;font-weight:700;background:var(--c-primary-bg);color:var(--c-primary);white-space:nowrap">{{ \App\Support\PermissionRegistry::roleLabel($role->name) }}</span>
                            @empty
                                <span style="color:var(--text-muted)">—</span>
                            @endforelse
                        </div>
                    </td>
                    {{-- Status --}}
                    <td>
                        @if($m->is_active)
                            <span style="display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;background:#f0fdf4;color:#16a34a;white-space:nowrap"><i class="fa-solid fa-circle" style="font-size:.45rem"></i>{{ __('dashboard.active') }}</span>
                        @else
                            <span style="display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;background:#fef2f2;color:#dc2626;white-space:nowrap"><i class="fa-solid fa-circle" style="font-size:.45rem"></i>معطل</span>
                        @endif
                    </td>
                    {{-- Date --}}
                    <td style="font-size:.75rem;color:var(--text-muted);white-space:nowrap">{{ $m->created_at?->format('Y-m-d') ?? '—' }}</td>
                    {{-- Actions --}}
                    <td style="text-align:end;white-space:nowrap">
                        @canany(['view moderators','edit moderators','delete moderators'])
                        <div class="custom-dropdown">
                            <button class="custom-dropdown__toggle">{{ __('dashboard.Actions') }}</button>
                            <div class="custom-dropdown__menu custom-dropdown__menu--end">
                                @can('view moderators')
                                <a href="{{ route('dashboard.moderators.show', $m->id) }}" class="custom-dropdown__item">
                                    <i class="fa-solid fa-eye me-2"></i>{{ __('dashboard.Show') }}
                                </a>
                                @endcan
                                @can('edit moderators')
                                @if($canEdit)
                                <a href="{{ route('dashboard.moderators.edit', $m->id) }}" class="custom-dropdown__item">
                                    <i class="fa-solid fa-pen me-2"></i>{{ __('dashboard.Edit') }}
                                </a>
                                @endif
                                @if($m->id !== auth()->id())
                                <form action="{{ route('dashboard.moderators.toggle-status', $m->id) }}" method="POST">
                                    @csrf @method('PATCH')
                                    <button type="submit" class="custom-dropdown__item">
                                        <i class="{{ $m->is_active ? 'fa-solid fa-circle-pause' : 'fa-solid fa-circle-play' }} me-2"></i>
                                        {{ $m->is_active ? 'تعطيل' : 'تفعيل' }}
                                    </button>
                                </form>
                                @endif
                                @endcan
                                @can('delete moderators')
                                @if($canDelete)
                                <div class="custom-dropdown__divider"></div>
                                <form action="{{ route('dashboard.moderators.destroy', $m->id) }}" method="POST">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="custom-dropdown__item custom-dropdown__item--danger" data-confirm-delete="{{ __('dashboard.Are you sure you want to delete this moderator?') }}">
                                        <i class="fa-solid fa-trash me-2"></i>{{ __('dashboard.Delete') }}
                                    </button>
                                </form>
                                @endif
                                @endcan
                            </div>
                        </div>
                        @endcanany
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div style="padding:.75rem 1.25rem;border-top:1px solid var(--border-subtle)">
        {{ $moderators->appends(request()->query())->links() }}
    </div>
    @endif
</div>
@endsection