@extends('layouts.app')

@section('title', 'قائمة الإقامات')

@push('styles')
<style>
    .page-header-sm {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 0.75rem;
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
    }
    .page-header-sm h5 {
        color: white;
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
    }
    .page-header-sm p {
        color: rgba(255,255,255,0.8);
        margin: 0;
        font-size: 0.8rem;
    }
    .stats-mini {
        display: flex;
        gap: 0.75rem;
        margin-top: 0.5rem;
    }
    .stats-mini .stat-item {
        background: rgba(255,255,255,0.15);
        padding: 0.35rem 0.75rem;
        border-radius: 0.375rem;
    }
    .stats-mini .stat-value {
        font-size: 1rem;
        font-weight: bold;
    }
    .stats-mini .stat-label {
        font-size: 0.7rem;
        opacity: 0.9;
    }
    .filter-card-compact {
        border: none;
        border-radius: 0.75rem;
        box-shadow: 0 2px 12px rgba(0,0,0,0.04);
        margin-bottom: 1rem;
    }
    .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: var(--bs-primary);
        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: 200px;
        max-width: 280px;
    }
    .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;
    }
    .date-filter-group {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        background: #f8f9fa;
        padding: 0.35rem 0.5rem;
        border-radius: 0.375rem;
        border: 1px solid #e9ecef;
    }
    .date-filter-group label {
        font-size: 0.7rem;
        color: #697a8d;
        white-space: nowrap;
    }
    .date-filter-group input {
        font-size: 0.75rem;
        padding: 0.25rem 0.4rem;
        border: 1px solid #ddd;
        border-radius: 0.25rem;
        width: 115px;
    }
    .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;
    }
    .data-card {
        border: none;
        border-radius: 1rem;
        box-shadow: 0 4px 24px rgba(0,0,0,0.06);
        overflow: hidden;
    }
    .data-card .card-header {
        background: white;
        border-bottom: 1px solid #e9ecef;
        padding: 1rem 1.5rem;
    }
    .export-buttons {
        display: flex;
        gap: 0.5rem;
    }
    .table-container {
        padding: 0;
    }
    .data-table {
        margin-bottom: 0;
    }
    .data-table thead th {
        background: #f8f9fa;
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #566a7f;
        padding: 1rem;
        border-bottom: 2px solid #e9ecef;
        white-space: nowrap;
    }
    .data-table tbody td {
        padding: 1rem;
        vertical-align: middle;
        border-color: #f1f1f1;
    }
    .data-table tbody tr:hover {
        background: rgba(105, 108, 255, 0.04);
    }
    .user-cell {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .user-avatar {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
    }
    .user-info .name {
        font-weight: 600;
        color: #333;
        margin-bottom: 0.125rem;
    }
    .user-info .iqama-num {
        font-size: 0.75rem;
        color: #697a8d;
    }
    .action-btns {
        display: flex;
        gap: 0.375rem;
    }
    .action-btns .btn {
        width: 32px;
        height: 32px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.375rem;
    }
    .expiry-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.75rem;
        border-radius: 2rem;
        font-size: 0.8rem;
        font-weight: 500;
    }
    .pagination-wrapper {
        padding: 1rem 1.5rem;
        background: #f8f9fa;
        border-top: 1px solid #e9ecef;
    }
    .pagination-wrapper nav {
        display: flex;
        justify-content: center;
    }
    .pagination-wrapper .pagination {
        margin: 0;
        gap: 0.25rem;
    }
    .pagination-wrapper .page-item .page-link {
        border: 1px solid #e9ecef;
        color: #697a8d;
        padding: 0.5rem 0.85rem;
        border-radius: 0.5rem !important;
        font-size: 0.875rem;
        transition: all 0.2s ease;
        background: white;
        min-width: 38px;
        text-align: center;
    }
    .pagination-wrapper .page-item .page-link:hover {
        background: var(--bs-primary);
        border-color: var(--bs-primary);
        color: white;
    }
    .pagination-wrapper .page-item.active .page-link {
        background: var(--bs-primary);
        border-color: var(--bs-primary);
        color: white;
        font-weight: 600;
    }
    .pagination-wrapper .page-item.disabled .page-link {
        background: #f8f9fa;
        color: #c4c4c4;
        border-color: #e9ecef;
        cursor: not-allowed;
    }
    .pagination-wrapper .page-item.disabled .page-link:hover {
        background: #f8f9fa;
        color: #c4c4c4;
        border-color: #e9ecef;
    }
    .pagination-wrapper .page-item:first-child .page-link,
    .pagination-wrapper .page-item:last-child .page-link {
        font-size: 1rem;
    }
    .pagination-wrapper .page-link i {
        font-size: 1.1rem;
        line-height: 1;
    }
    /* Hide default SVG icons and show text instead */
    .pagination-wrapper .page-link svg {
        display: none;
    }
    .empty-state {
        padding: 4rem 2rem;
        text-align: center;
    }
    .empty-state i {
        font-size: 4rem;
        color: #d1d5db;
        margin-bottom: 1rem;
    }
    .empty-state h5 {
        color: #6b7280;
        margin-bottom: 0.5rem;
    }
    .empty-state p {
        color: #9ca3af;
    }
    .btn-xs { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
    @media (max-width: 768px) {
        .filter-inline {
            flex-direction: column;
            align-items: stretch;
        }
        .filter-item {
            max-width: 100%;
        }
        .date-filter-group {
            flex-wrap: wrap;
        }
    }
</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-id-card'></i> إدارة الإقامات</h5>
                <div class="stats-mini">
                    <div class="stat-item">
                        <div class="stat-value">{{ $iqamas->total() }}</div>
                        <div class="stat-label">سجل</div>
                    </div>
                </div>
            </div>
            <div class="d-flex gap-2">
                @if(auth()->check() && auth()->user()->hasPermission(\App\Models\Permission::CREATE_IQAMAS))
                <a href="{{ route('iqamas.import') }}" class="btn btn-light btn-sm">
                    <i class='bx bx-upload'></i> استيراد
                </a>
                <a href="{{ route('iqamas.create') }}" class="btn btn-light btn-sm">
                    <i class='bx bx-plus'></i> إضافة
                </a>
                @endif
            </div>
        </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="#filtersCollapse">
                    <i class='bx bx-chevron-down'></i>
                </button>
            </div>
        </div>
        <div class="collapse show" id="filtersCollapse">
            <form method="GET" action="{{ route('iqamas.index') }}" id="filterForm">
                <div class="filter-body-compact">
                    <div class="filter-inline">
                        <!-- Search -->
                        <div class="filter-item search-item">
                            <label>بحث</label>
                            <input type="text" class="form-control" name="search" value="{{ request('search') }}" placeholder="الاسم، رقم الإقامة...">
                        </div>
                        <!-- Nationality -->
                        <div class="filter-item">
                            <label>الجنسية</label>
                            <select class="form-select" name="nationality">
                                <option value="">الكل</option>
                                @foreach($nationalities as $nationality)
                                    <option value="{{ $nationality }}" {{ request('nationality') == $nationality ? 'selected' : '' }}>{{ $nationality }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!-- Sponsor -->
                        <div class="filter-item">
                            <label>السمسار</label>
                            <select class="form-select" name="sponsor">
                                <option value="">الكل</option>
                                @foreach($sponsors as $sponsor)
                                    <option value="{{ $sponsor }}" {{ request('sponsor') == $sponsor ? 'selected' : '' }}>{{ $sponsor }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!-- Profession -->
                        <div class="filter-item">
                            <label>المهنة</label>
                            <select class="form-select" name="profession">
                                <option value="">الكل</option>
                                @foreach($professions as $profession)
                                    <option value="{{ $profession }}" {{ request('profession') == $profession ? 'selected' : '' }}>{{ $profession }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!-- Expiry Year -->
                        <div class="filter-item">
                            <label>سنة الانتهاء</label>
                            <select class="form-select" name="expiry_year">
                                <option value="">الكل</option>
                                @foreach($years as $year)
                                    <option value="{{ $year }}" {{ request('expiry_year') == $year ? 'selected' : '' }}>{{ $year }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!-- Expiry Month -->
                        <div class="filter-item">
                            <label>شهر الانتهاء</label>
                            <select class="form-select" name="expiry_month">
                                <option value="">الكل</option>
                                @foreach($hijriMonths as $num => $name)
                                    <option value="{{ $num }}" {{ request('expiry_month') == $num ? 'selected' : '' }}>{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!-- Date Range -->
                        <div class="date-filter-group">
                            <label>من:</label>
                            <input type="date" name="date_from" value="{{ request('date_from') }}">
                            <label>إلى:</label>
                            <input type="date" name="date_to" value="{{ request('date_to') }}">
                        </div>
                    </div>
                </div>

                <!-- Compact Action Bar -->
                <div class="action-bar-compact">
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class='bx bx-search'></i> بحث
                    </button>
                    <a href="{{ route('iqamas.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('iqamas.export.pdf', request()->all()) }}" class="btn btn-label-danger btn-sm" title="PDF">
                            <i class='bx bxs-file-pdf'></i>
                        </a>
                        <a href="{{ route('iqamas.export.excel', request()->all()) }}" class="btn btn-label-success btn-sm" title="Excel">
                            <i class='bx bxs-file-export'></i>
                        </a>
                        <button type="button" onclick="window.print()" class="btn btn-label-info btn-sm" title="طباعة">
                            <i class='bx bx-printer'></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Data Table Card -->
    <div class="card data-card">
        <div class="table-container">
            <div class="table-responsive">
                <table class="table data-table">
                    <thead>
                        <tr>
                            <th style="width: 50px;">#</th>
                            <th>الموظف</th>
                            <th>الجنسية</th>
                            <th>السمسار</th>
                            <th>المهنة</th>
                            <th>اسم المصنع</th>
                            <th>ملاحظات</th>
                            <th>تاريخ الانتهاء</th>
                            <th>تاريخ الإضافة</th>
                            <th class="no-print text-center" style="width: 130px;">الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($iqamas as $index => $iqama)
                            <tr>
                                <td>
                                    <span class="text-muted">{{ $iqamas->firstItem() + $index }}</span>
                                </td>
                                <td>
                                    <div class="user-cell">
                                        <div class="user-avatar">
                                            {{ mb_substr($iqama->name, 0, 1) }}
                                        </div>
                                        <div class="user-info">
                                            <div class="name">{{ $iqama->name }}</div>
                                            <div class="iqama-num">
                                                <i class='bx bx-id-card'></i> {{ $iqama->iqama_number }}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    @if($iqama->nationality)
                                        <span class="badge bg-info text-white">{{ $iqama->nationality }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>{{ $iqama->sponsor ?? '-' }}</td>
                                <td>{{ $iqama->profession ?? '-' }}</td>
                                <td>{{ $iqama->factory_name ?? '-' }}</td>
                                <td>
                                    @if($iqama->notes)
                                        <span title="{{ $iqama->notes }}" style="cursor:default;">{{ Str::limit($iqama->notes, 30) }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    @if($iqama->expiry_year_hijri)
                                        <span class="expiry-badge bg-label-warning">
                                            <i class='bx bx-calendar'></i>
                                            {{ $iqama->formatted_hijri_date }}
                                        </span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    <small class="text-muted">
                                        <i class='bx bx-time-five'></i>
                                        {{ $iqama->created_at->format('Y-m-d') }}
                                    </small>
                                </td>
                                <td class="no-print">
                                    <div class="action-btns">
                                        <a href="{{ route('iqamas.show', $iqama) }}" class="btn btn-label-info" title="عرض">
                                            <i class='bx bx-show'></i>
                                        </a>
                                        @if(auth()->check() && auth()->user()->hasPermission(\App\Models\Permission::EDIT_IQAMAS))
                                        <a href="{{ route('iqamas.edit', $iqama) }}" class="btn btn-label-primary" title="تعديل">
                                            <i class='bx bx-edit'></i>
                                        </a>
                                        @endif
                                        @if(auth()->check() && auth()->user()->hasPermission(\App\Models\Permission::DELETE_IQAMAS))
                                        <form id="delete-iqama-{{ $iqama->id }}" action="{{ route('iqamas.destroy', $iqama) }}" method="POST" class="d-inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="button" class="btn btn-label-danger" title="حذف" onclick="confirmDelete('delete-iqama-{{ $iqama->id }}', 'إقامة {{ $iqama->name }}')">
                                                <i class='bx bx-trash'></i>
                                            </button>
                                        </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8">
                                    <div class="empty-state">
                                        <i class='bx bx-folder-open'></i>
                                        <h5>لا توجد سجلات</h5>
                                        <p>لم يتم العثور على أي إقامات مطابقة للبحث</p>
                                        @if(auth()->check() && auth()->user()->hasPermission(\App\Models\Permission::CREATE_IQAMAS))
                                        <a href="{{ route('iqamas.create') }}" class="btn btn-primary mt-2">
                                            <i class='bx bx-plus'></i> إضافة إقامة جديدة
                                        </a>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if($iqamas->hasPages())
            <div class="pagination-wrapper">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <small class="text-muted">
                        عرض {{ $iqamas->firstItem() }} - {{ $iqamas->lastItem() }} من {{ $iqamas->total() }} سجل
                    </small>
                    {{ $iqamas->appends(request()->all())->links() }}
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Auto-submit on filter change (optional)
    // $('.filter-card select').on('change', function() {
    //     $('#filterForm').submit();
    // });
});
</script>
@endpush