@extends('layouts.app')

@section('title', 'المستخدمون')

@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
    <style>
        .sticky-head thead th {
            position: sticky;
            top: 0;
            background: #fff;
            z-index: 2;
        }

        .hero-card .fa-4x {
            opacity: .12;
            position: absolute;
            right: 1rem;
            bottom: .5rem;
        }

        .truncate {
            max-width: 220px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid" dir="ltr">
        {{-- Header + Breadcrumb --}}
        <div class="d-flex align-items-center justify-content-between mb-3">
            <div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-1">
                        <li class="breadcrumb-item"><a href="/">Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Users</li>
                    </ol>
                </nav>
                <h3 class="mb-0">إدارة المستخدمين</h3>
            </div>
            <div class="d-flex gap-2">
                @can('create', App\Models\User::class)
                    <button class="btn btn-primary" data-modal-url="{{ route('users.create', ['modal' => 1]) }}"
                        data-bs-toggle="modal" data-bs-target="#dynamicModal">
                        <i class="fa fa-plus me-1"></i> إضافة مستخدم
                    </button>
                @endcan
                <a class="btn btn-outline-secondary" href="{{ route('users.export', request()->query()) }}">
                    <i class="fa fa-file-csv me-1"></i> تصدير CSV
                </a>
                <button class="btn btn-outline-dark" data-bs-toggle="offcanvas" data-bs-target="#filtersOffcanvas"
                    aria-controls="filtersOffcanvas">
                    <i class="fa fa-filter me-1"></i> فلاتر
                </button>
            </div>
        </div>

        {{-- Hero Stats --}}
        <div class="row g-3 mb-4">
            <x-stat-card title="جميع المستخدمين" :count="$total" icon="fa-users" />
            <x-stat-card title="مستخدمون نشطون" :count="$active" color="success" icon="fa-user-check" />
            <x-stat-card title="مستخدمون غير نشطين" :count="$inactive" color="danger" icon="fa-user-slash" />
        </div>

        {{-- Toolbar: Search + Tabs --}}
        <form id="toolbarForm" class="d-flex flex-wrap align-items-center gap-2 mb-3" method="GET">
            <div class="input-group" style="max-width: 360px;">
                <span class="input-group-text"><i class="fa fa-search"></i></span>
                <input type="text" name="search" id="searchInput" value="{{ $search }}" class="form-control"
                    placeholder="ابحث بالاسم/البريد/الهاتف..." autocomplete="off">
            </div>

            <input type="hidden" name="sort" value="{{ $sort }}">
            <input type="hidden" name="direction" value="{{ $direction }}">
            <input type="hidden" name="status" value="{{ request('status', 'all') }}">
            <input type="hidden" name="role" value="{{ request('role', 'all') }}">
            <input type="hidden" name="onlyTrashed" value="{{ $onlyTrashed ? 1 : 0 }}">
        </form>

        {{-- Tabs by role --}}
        <ul class="nav nav-tabs mb-3">
            <li class="nav-item">
                <a class="nav-link {{ request('role') == 'all' || !request()->has('role') ? 'active' : '' }}"
                    href="{{ request()->fullUrlWithQuery(['role' => 'all', 'page' => 1]) }}">الكل <span
                        class="badge bg-secondary ms-1">{{ $tabsCounts['all'] ?? 0 }}</span></a>
            </li>
            @foreach ($roles as $r)
                <li class="nav-item">
                    <a class="nav-link {{ request('role') == $r ? 'active' : '' }}"
                        href="{{ request()->fullUrlWithQuery(['role' => $r, 'page' => 1]) }}">
                        {{ $r }} <span class="badge bg-secondary ms-1">{{ $tabsCounts[$r] ?? 0 }}</span>
                    </a>
                </li>
            @endforeach
        </ul>

        {{-- Table --}}
        <div class="card shadow-sm">
            <div class="table-responsive sticky-head">
                @include('dashboard.users.partials.table', ['users' => $users])
            </div>
            @if ($users->hasPages())
                <div class="card-footer">{{ $users->onEachSide(1)->links() }}</div>
            @endif
        </div>

        {{-- Offcanvas Filters --}}
        <div class="offcanvas offcanvas-end" tabindex="-1" id="filtersOffcanvas" aria-labelledby="filtersLabel">
            <div class="offcanvas-header">
                <h5 id="filtersLabel">فلاتر متقدمة</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <form method="GET">
                    <div class="mb-3">
                        <label class="form-label">الحالة</label>
                        <select class="form-select" name="status">
                            <option value="all" @selected(request('status', 'all') === 'all')>الكل</option>
                            <option value="1" @selected(request('status') === '1')>نشط</option>
                            <option value="0" @selected(request('status') === '0')>غير نشط</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">الدور</label>
                        <select class="form-select" name="role">
                            <option value="all" @selected(request('role', 'all') === 'all')>الكل</option>
                            @foreach ($roles as $r)
                                <option value="{{ $r }}" @selected(request('role') === $r)>{{ $r }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="onlyTrashed" name="onlyTrashed"
                            value="1" @checked($onlyTrashed)>
                        <label class="form-check-label" for="onlyTrashed">عرض المحذوفة فقط</label>
                    </div>
                    <div class="d-flex gap-2">
                        <button class="btn btn-primary" type="submit"><i class="fa fa-check me-1"></i> تطبيق</button>
                        <a class="btn btn-outline-secondary" href="{{ route('users.index') }}"><i
                                class="fa fa-eraser me-1"></i> تفريغ</a>
                    </div>
                </form>
            </div>
        </div>

        {{-- Dynamic Modal --}}
        <div class="modal fade" id="dynamicModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-body p-5 text-center text-muted">جار التحميل...</div>
                </div>
            </div>
        </div>

        {{-- Toast --}}
        @if (session('toast'))
            <div class="position-fixed top-0 end-0 p-3" style="z-index: 1080">
                <div class="toast align-items-center text-bg-{{ session('toast.type') === 'success' ? 'success' : 'danger' }} show"
                    role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="d-flex">
                        <div class="toast-body">{{ session('toast.message') }}</div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                            aria-label="Close"></button>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

@push('scripts')
    <script>
        (function() {
            const modalEl = document.getElementById('dynamicModal');
            const bsModal = new bootstrap.Modal(modalEl);

            // open modal from any button with data-modal-url
            document.addEventListener('click', async (e) => {
                const btn = e.target.closest('[data-modal-url]');
                if (!btn) return;
                const url = btn.getAttribute('data-modal-url');
                const content = modalEl.querySelector('.modal-content');
                content.innerHTML =
                    '<div class="modal-body p-5 text-center text-muted">جار التحميل...</div>';
                bsModal.show();
                const res = await fetch(url, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });
                content.innerHTML = await res.text();
            });

            // debounce search
            const search = document.getElementById('searchInput');
            let t;
            search && search.addEventListener('input', () => {
                clearTimeout(t);
                t = setTimeout(() => {
                    document.getElementById('toolbarForm').submit();
                }, 400);
            });

            // handle sort links
            document.addEventListener('click', (e) => {
                const sortBtn = e.target.closest('[data-sort]');
                if (!sortBtn) return;
                e.preventDefault();
                const f = document.getElementById('toolbarForm');
                f.querySelector('[name="sort"]').value = sortBtn.dataset.sort;
                f.querySelector('[name="direction"]').value = sortBtn.dataset.direction;
                f.submit();
            });

            // submit modal forms with normal POST then reload (أبسط موثوقية)
            document.addEventListener('submit', (e) => {
                const form = e.target;
                if (!form.closest('#dynamicModal')) return;
                // اسمح للمتصفح يرسل الطلب عادي ثم يعود بـ back()->with()
            });
        })();
    </script>
@endpush