@extends('layouts.app')

@section('title', 'عمال 3 أشهر - إقامة 3 أشهر')

@push('styles')
<style>
    .page-header-sm {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 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;
    }
    .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: #11998e;
        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: 130px;
        max-width: 160px;
    }
    .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;
    }
    .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;
    }
    .btn-xs { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
    .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(17, 153, 142, 0.04);
    }
    .user-cell {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .user-avatar {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 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: #11998e;
        border-color: #11998e;
        color: white;
    }
    .pagination-wrapper .page-item.active .page-link {
        background: #11998e;
        border-color: #11998e;
        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-link i {
        font-size: 1.1rem;
        line-height: 1;
    }
    .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;
    }
    .company-badge {
        background: rgba(17, 153, 142, 0.1);
        color: #11998e;
        padding: 0.25rem 0.5rem;
        border-radius: 0.375rem;
        font-size: 0.75rem;
        font-weight: 500;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }
    @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-buildings'></i> عمال 3 أشهر - إقامة 3 أشهر</h5>
                <div class="stats-mini">
                    <div class="stat-item">
                        <div class="stat-value">{{ $workers->total() }}</div>
                        <div class="stat-label">عامل</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{ $companies->count() }}</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('company-workers-3m.create') }}" class="btn btn-light btn-sm">
                    <i class='bx bx-plus'></i> إضافة
                </a>
                <a href="{{ route('company-workers-3m.import') }}" class="btn btn-light btn-sm">
                    <i class='bx bx-upload'></i> استيراد
                </a>
                @endif
            </div>
        </div>
    </div>

    <!-- Compact Filter 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('company-workers-3m.index') }}" method="GET" id="filterForm">
                <div class="filter-body-compact">
                    <div class="filter-inline">
                        <!-- Search -->
                        <div class="filter-item search-item">
                            <label>بحث</label>
                            <input type="text" name="search" class="form-control" placeholder="اسم، رقم إقامة..." value="{{ request('search') }}">
                        </div>
                        <!-- Company -->
                        <div class="filter-item">
                            <label>الشركة</label>
                            <select name="company_name" class="form-select">
                                <option value="">الكل</option>
                                @foreach($companies as $company)
                                    <option value="{{ $company }}" {{ request('company_name') == $company ? 'selected' : '' }}>{{ $company }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!-- Nationality -->
                        <div class="filter-item">
                            <label>الجنسية</label>
                            <select name="nationality" class="form-select">
                                <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 name="sponsor" class="form-select">
                                <option value="">الكل</option>
                                @foreach($sponsors as $sponsor)
                                    <option value="{{ $sponsor }}" {{ request('sponsor') == $sponsor ? 'selected' : '' }}>{{ $sponsor }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!-- Expiry Year -->
                        <div class="filter-item">
                            <label>سنة الانتهاء</label>
                            <select name="expiry_year" class="form-select">
                                <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 name="expiry_month" class="form-select">
                                <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-success btn-sm">
                        <i class='bx bx-search'></i> بحث
                    </button>
                    <a href="{{ route('company-workers-3m.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('company-workers-3m.export.excel', request()->all()) }}" class="btn btn-label-success btn-sm" title="Excel">
                            <i class='bx bxs-file-export'></i>
                        </a>
                        <a href="{{ route('company-workers-3m.export.pdf', request()->all()) }}" class="btn btn-label-danger btn-sm" title="PDF">
                            <i class='bx bxs-file-pdf'></i>
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>
                    </div>

    <!-- Data Card -->
    <div class="card data-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: #11998e;"></i>
                قائمة العمال
            </h6>
        </div>
        <div class="table-container">
            <div class="table-responsive">
                <table class="table data-table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>العامل</th>
                            <th>الشركة</th>
                            <th>الجنسية</th>
                            <th>السمسار</th>
                            <th>المهنة</th>
                            <th>رقم السجل</th>
                            <th>ملاحظات</th>
                            <th>تاريخ الانتهاء</th>
                            <th>الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($workers as $worker)
                            <tr>
                                <td>{{ $loop->iteration + ($workers->currentPage() - 1) * $workers->perPage() }}</td>
                                <td>
                                    <div class="user-cell">
                                        <div class="user-avatar">
                                            {{ mb_substr($worker->name, 0, 1) }}
                                        </div>
                                        <div class="user-info">
                                            <div class="name">{{ $worker->name }}</div>
                                            <div class="iqama-num">{{ $worker->iqama_number }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="company-badge" title="{{ $worker->company_name }}">{{ $worker->company_name }}</span>
                                </td>
                                <td>
                                    @if($worker->nationality)
                                        <span class="badge bg-info text-white">{{ $worker->nationality }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>{{ $worker->sponsor ?? '-' }}</td>
                                <td>{{ $worker->profession ?? '-' }}</td>
                                <td>{{ $worker->registry_number ?? '-' }}</td>
                                <td>
                                    @if($worker->notes)
                                        <span title="{{ $worker->notes }}" style="cursor:default;">{{ Str::limit($worker->notes, 30) }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    @if($worker->expiry_year_hijri)
                                        <span class="expiry-badge bg-label-warning">
                                            <i class='bx bx-calendar'></i>
                                            {{ $worker->formatted_hijri_date }}
                                        </span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="action-btns">
                                        <a href="{{ route('company-workers-3m.show', $worker) }}" 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('company-workers-3m.edit', $worker) }}" 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-worker-{{ $worker->id }}" action="{{ route('company-workers-3m.destroy', $worker) }}" method="POST" class="d-inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="button" class="btn btn-label-danger" title="حذف" onclick="confirmDelete('delete-worker-{{ $worker->id }}', '{{ $worker->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>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

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