{{-- Header Section --}}
<div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-3">
    <div class="main-title mb-0 me-auto me-xl-0">
        <div class="small">الرئيسية</div>
        <div class="large">العملاء</div>
    </div>

    {{-- Filter Options --}}
    <div class="filter-options d-flex flex-wrap align-items-center gap-1">
        <div class="input-group w-auto">
            <span class="input-group-text fs-13px">من</span>
            <input type="date" class="form-control" wire:model.live="filter_date_from">
        </div>
        <div class="input-group w-auto">
            <span class="input-group-text fs-13px">إلى</span>
            <input type="date" class="form-control" wire:model.live="filter_date_to">
        </div>
        <div class="inp-holder">
            <select wire:model.live="filter_city" class="form-select">
                <option value="">اختر المدينة</option>
                @foreach ($cities ?? [] as $city)
                    <option value="{{ $city->id }}">{{ $city->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="inp-holder">
            <select wire:model.live='filter_program' class="form-select">
                <option value="">اختر الخدمة</option>
                @foreach ($programs ?? [] as $program)
                    <option value="{{ $program->id }}">{{ $program->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="inp-holder">
            <select wire:model.live="filter_user" class="form-select">
                <option value="">اختر الموظف</option>
                @foreach ($users as $user)
                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="inp-holder">
            <select wire:model.live="filter_client_type" class="form-select">
                <option value="">اختر نوع العميل</option>
                <option value="b2b">B2B (شركات)</option>
                <option value="b2c">B2C (أفراد)</option>
            </select>
        </div>
    </div>

    {{-- Search Box --}}
    <div class="box-search">
        <img src="{{ asset('admin-asset/img/icons/search.png') }}" alt="icon"/>
        <input type="search" wire:model.live.500ms="search" placeholder="بحث بالاسم او رقم الجوال"/>
    </div>
</div>