@extends('layouts.app')

@section('title', 'العمالة المنزلية')

@push('styles')
<style>
    .page-header-sm {
        background: linear-gradient(135deg, #9C27B0 0%, #E040FB 100%);
        border-radius: 0.75rem;
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
        color: white;
    }
    .page-header-sm h5 {
        font-weight: 600;
        margin: 0;
        font-size: 1.1rem;
    }
    .page-header-sm .stats-mini {
        display: flex;
        gap: 0.75rem;
        margin-top: 0.5rem;
    }
    .page-header-sm .stat-item {
        background: rgba(255,255,255,0.15);
        padding: 0.35rem 0.75rem;
        border-radius: 0.375rem;
    }
    .page-header-sm .stat-value {
        font-size: 1rem;
        font-weight: bold;
    }
    .page-header-sm .stat-label {
        font-size: 0.7rem;
        opacity: 0.9;
    }
    .filter-card-compact {
        background: white;
        border-radius: 0.75rem;
        margin-bottom: 1rem;
        box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    }
    .filter-card-compact .card-header {
        background: transparent;
        border-bottom: 1px solid #e9ecef;
        padding: 0.6rem 1rem;
    }
    .filter-header-title {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        font-weight: 600;
        font-size: 0.85rem;
        color: #333;
    }
    .filter-header-title i {
        color: #9C27B0;
        font-size: 1rem;
    }
    .filter-body-compact {
        padding: 0.75rem 1rem;
    }
    .filter-inline {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: flex-end;
    }
    .filter-item {
        flex: 1;
        min-width: 140px;
        max-width: 180px;
    }
    .filter-item.search-item {
        min-width: 180px;
        max-width: 220px;
    }
    .filter-item label {
        font-size: 0.7rem;
        font-weight: 600;
        color: #566a7f;
        margin-bottom: 0.2rem;
        display: block;
    }
    .filter-item .form-control,
    .filter-item .form-select {
        font-size: 0.8rem;
        padding: 0.35rem 0.6rem;
        height: auto;
    }
    .action-bar-compact {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.6rem 1rem;
        background: #f8f9fa;
        border-radius: 0 0 0.75rem 0.75rem;
        align-items: center;
    }
    .btn-xs { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
    .table-card {
        background: white;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .table-card .card-header {
        background: white;
        border-bottom: 1px solid #e9ecef;
        padding: 1rem 1.5rem;
    }
    .table thead th {
        background: #f8f9fa;
        border: none;
        font-weight: 600;
        color: #566a7f;
        font-size: 0.85rem;
        padding: 1rem;
    }
    .table tbody td {
        padding: 1rem;
        vertical-align: middle;
        border-color: #f1f1f1;
    }
    .employer-badge {
        background: rgba(156, 39, 176, 0.1);
        color: #9C27B0;
        padding: 0.375rem 0.75rem;
        border-radius: 0.5rem;
        font-size: 0.8rem;
        font-weight: 600;
    }
    .iqama-number {
        font-family: 'Courier New', monospace;
        font-weight: 600;
        color: #333;
        direction: ltr;
        display: inline-block;
    }
    .action-buttons .btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
    }
    .pagination-wrapper {
        padding: 1rem 1.5rem;
        border-top: 1px solid #e9ecef;
    }
    .btn-export {
        background: linear-gradient(135deg, #9C27B0 0%, #E040FB 100%);
        border: none;
        color: white;
    }
    .btn-export:hover {
        background: linear-gradient(135deg, #7B1FA2 0%, #CE93D8 100%);
        color: white;
    }
    @media (max-width: 768px) {
        .filter-inline {
            flex-direction: column;
            align-items: stretch;
        }
        .filter-item {
            max-width: 100%;
        }
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- Compact Page Header -->
    <div class="page-header-sm">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div>
                <h5><i class='bx bx-home-heart'></i> العمالة المنزلية</h5>
                <div class="stats-mini">
                    <div class="stat-item">
                        <div class="stat-value">{{ \App\Models\DomesticWorker::count() }}</div>
                        <div class="stat-label">عامل</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{ \App\Models\DomesticWorker::distinct('employer_name')->count('employer_name') }}</div>
                        <div class="stat-label">كفيل</div>
                    </div>
                </div>
            </div>
            @if(auth()->check() && auth()->user()->hasPermission(\App\Models\Permission::CREATE_IQAMAS))
            <a href="{{ route('domestic-workers.create') }}" class="btn btn-light btn-sm">
                <i class='bx bx-plus'></i> إضافة
            </a>
            @endif
        </div>
    </div>

    <!-- Compact Filters Card -->
    <div class="card filter-card-compact">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <div class="filter-header-title">
                    <i class='bx bx-filter-alt'></i>
                    <span>البحث والتصفية</span>
                </div>
                <button class="btn btn-xs btn-label-primary" type="button" data-bs-toggle="collapse" data-bs-target="#filterCollapse">
                    <i class='bx bx-chevron-down'></i>
                </button>
            </div>
        </div>
        <div class="collapse show" id="filterCollapse">
            <form action="{{ route('domestic-workers.index') }}" method="GET">
                <div class="filter-body-compact">
                    <div class="filter-inline">
                        <!-- Employer -->
                        <div class="filter-item search-item">
                            <label>الكفيل</label>
                            <input type="text" name="employer_name" class="form-control"
                                value="{{ request('employer_name') }}" placeholder="بحث..." list="employers">
                            <datalist id="employers">
                                @foreach($employers as $employer)
                                    <option value="{{ $employer }}">
                                @endforeach
                            </datalist>
                        </div>
                        <!-- Sponsor -->
                        <div class="filter-item">
                            <label>السمسار</label>
                            <input type="text" name="sponsor" class="form-control"
                                value="{{ request('sponsor') }}" placeholder="بحث..." list="sponsors">
                            <datalist id="sponsors">
                                @foreach($sponsors as $sponsor)
                                    <option value="{{ $sponsor }}">
                                @endforeach
                            </datalist>
                        </div>
                        <!-- Expiry Year -->
                        <div class="filter-item">
                            <label>سنة الانتهاء</label>
                            <select name="expiry_year_hijri" class="form-select">
                                <option value="">الكل</option>
                                @foreach($years as $year)
                                    <option value="{{ $year }}" {{ request('expiry_year_hijri') == $year ? 'selected' : '' }}>{{ $year }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!-- Expiry Month -->
                        <div class="filter-item">
                            <label>شهر الانتهاء</label>
                            <select name="expiry_month_hijri" class="form-select">
                                <option value="">الكل</option>
                                @foreach(\App\Models\DomesticWorker::$hijriMonths as $num => $name)
                                    <option value="{{ $num }}" {{ request('expiry_month_hijri') == $num ? 'selected' : '' }}>{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <!-- Compact Action Bar -->
                <div class="action-bar-compact">
                    <button type="submit" class="btn btn-sm" style="background: linear-gradient(135deg, #9C27B0, #E040FB); color: white;">
                        <i class='bx bx-search'></i> بحث
                    </button>
                    <a href="{{ route('domestic-workers.index') }}" class="btn btn-outline-secondary btn-sm">
                        <i class='bx bx-reset'></i> مسح
                    </a>
                    <div class="ms-auto d-flex gap-1">
                        <a href="{{ route('domestic-workers.import') }}" class="btn btn-label-primary btn-sm" title="استيراد من اكسيل">
                            <i class='bx bx-import'></i> استيراد من اكسيل
                        </a>
                        <a href="{{ route('domestic-workers.template') }}" class="btn btn-label-info btn-sm" title="تحميل نموذج Excel">
                            <i class='bx bx-download'></i> تحميل نموذج Excel
                        </a>
                        <a href="{{ route('domestic-workers.export.excel', request()->query()) }}" class="btn btn-label-success btn-sm" title="Excel">
                            <i class='bx bxs-file-export'></i>
                        </a>
                        <a href="{{ route('domestic-workers.export.pdf', request()->query()) }}" class="btn btn-label-danger btn-sm" title="PDF">
                            <i class='bx bxs-file-pdf'></i>
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>
    </div>

    <!-- Workers Table -->
    <div class="card table-card">
        <div class="card-header d-flex justify-content-between align-items-center py-2">
            <h6 class="mb-0" style="font-size: 0.85rem;"><i class='bx bx-list-ul me-1' style="color: #9C27B0;"></i> قائمة العمالة المنزلية</h6>
        </div>
        <div class="table-responsive">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>اسم العامل</th>
                        <th>الكفيل</th>
                        <th>السمسار</th>
                        <th>رقم الإقامة</th>
                        <th>تاريخ الانتهاء</th>
                        <th>ملاحظات</th>
                        <th>الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($workers as $index => $worker)
                    <tr>
                        <td>{{ $workers->firstItem() + $index }}</td>
                        <td>
                            <a href="{{ route('domestic-workers.show', $worker) }}" class="text-decoration-none fw-semibold">
                                {{ $worker->name }}
                            </a>
                        </td>
                        <td>
                            <span class="employer-badge">{{ $worker->employer_name ?? '-' }}</span>
                        </td>
                        <td>{{ $worker->sponsor ?? '-' }}</td>
                        <td><span class="iqama-number">{{ $worker->iqama_number }}</span></td>
                        <td>{{ $worker->formatted_hijri_date }}</td>
                        <td>{{ \Str::limit($worker->notes, 30) ?? '-' }}</td>
                        <td class="action-buttons">
                            <a href="{{ route('domestic-workers.show', $worker) }}" class="btn btn-sm btn-outline-info" title="عرض">
                                <i class='bx bx-show'></i>
                            </a>
                            @if(auth()->check() && auth()->user()->hasPermission(\App\Models\Permission::EDIT_IQAMAS))
                            <a href="{{ route('domestic-workers.edit', $worker) }}" class="btn btn-sm btn-outline-warning" title="تعديل">
                                <i class='bx bx-edit'></i>
                            </a>
                            @endif
                            @if(auth()->check() && auth()->user()->hasPermission(\App\Models\Permission::DELETE_IQAMAS))
                            <form action="{{ route('domestic-workers.destroy', $worker) }}" method="POST" class="d-inline" id="delete-form-{{ $worker->id }}">
                                @csrf
                                @method('DELETE')
                                <button type="button" class="btn btn-sm btn-outline-danger" title="حذف"
                                    onclick="confirmDelete('delete-form-{{ $worker->id }}', '{{ $worker->name }}')">
                                    <i class='bx bx-trash'></i>
                                </button>
                            </form>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center py-4 text-muted">
                            <i class='bx bx-info-circle' style="font-size: 2rem;"></i>
                            <p class="mb-0 mt-2">لا يوجد عمال</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($workers->hasPages())
        <div class="pagination-wrapper">
            {{ $workers->links() }}
        </div>
        @endif
    </div>
</div>
@endsection