@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    @php
        $activeFiltersCount = collect([
            request('staff_id'),
            request('reason_of_request'),
            request('letter_language'),
            request('per_page'),
        ])
            ->filter(fn($value) => filled($value))
            ->count();
    @endphp

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title title="Experience Letter Requests"
                    description="Manage experience letter requests, review request details, and filter records by employee, reason, and language.">
                    <a href="{{ route('experience_letter.create') }}" class="asset-btn asset-btn--primary">
                        + Add New Experience Letter Request
                    </a>
                </x-page-title>




                <div class="ui-card ui-card--table">
                    <div class="ui-card ui-card--table">
                        <div class="ui-card__header">
                            <div class="d-flex align-items-center gap-3 flex-nowrap">
                                <h6 class="mb-0 font-semibold text-gray-800 mb-0 whitespace-nowrap"
                                    style="margin-right:auto;">
                                    Filters
                                </h6>
                                <x-table-controls :action="route('experience_letter.index')" searchName="search" searchPlaceholder="search ..."
                                    :export="true" :exportRoute="route('experience_letter.export')" :saveRoute="route('experience_letter.saveFilteredTable')" :filters="[
                                        'staff_current_position' => $staffs
                                            ->mapWithKeys(function ($staff) {
                                                return [
                                                    $staff->id => trim(
                                                        ($staff->first_name ?? '') . ' ' . ($staff->last_name ?? ''),
                                                    ),
                                                ];
                                            })
                                            ->toArray(),
                                        'reason_of_request' => [
                                            'bank' => 'Bank',
                                            'visa' => 'Visa',
                                            'others' => 'Others',
                                        ],
                                        'letter_language' => [
                                            'en' => 'English',
                                            'ar' => 'Arabic',
                                        ],
                                    ]"
                                    :filterLabels="[
                                        'staff_current_position' => 'Employee',
                                        'reason_of_request' => 'Reason',
                                        'letter_language' => 'Language',
                                    ]" />
                            </div>
                        </div>
                    </div>

                    <x-table :headers="['Employee Name', 'Reason of Request', 'Date of Request', 'Letter Language', 'Actions']" :paginator="$requests"
                        emptyMessage="No experience letter requests found matching the current filters."
                        emptyActionText="+ Add New Experience Letter Request" :emptyActionUrl="route('experience_letter.create')">
                        @forelse ($requests as $request)
                            <tr class="ui-row-click"
                                onclick="window.location='{{ route('experience_letter.show', $request->id) }}'"
                                id="experience-letter-row-{{ $request->id }}">

                                <td class="text-center">
                                    @if (optional($request->staff))
                                        <div class="task-staff-wrap">
                                            <div class="task-staff-avatar">
                                                {{ strtoupper(substr(optional($request->staff)->first_name ?? '', 0, 1) . substr(optional($request->staff)->last_name ?? '', 0, 1)) }}
                                            </div>
                                            <div class="ui-title">
                                                {{ optional($request->staff)->first_name ?? '' }}
                                                {{ optional($request->staff)->last_name ?? '' }}
                                            </div>
                                        </div>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    @php
                                        $reasonVariant =
                                            $request->reason_of_request === 'bank'
                                                ? 'info'
                                                : ($request->reason_of_request === 'visa'
                                                    ? 'warn'
                                                    : 'neutral');
                                    @endphp

                                    @if ($request->reason_of_request)
                                        <span class="ui-pill ui-pill--{{ $reasonVariant }}">
                                            {{ ucfirst($request->reason_of_request) }}
                                        </span>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    @if ($request->date_of_request)
                                        <div class="ui-muted">
                                            {{ \Carbon\Carbon::parse($request->date_of_request)->format('Y-m-d') }}
                                        </div>
                                        <small class="d-block text-muted">
                                            {{ \Carbon\Carbon::parse($request->date_of_request)->diffForHumans() }}
                                        </small>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    @if ($request->letter_language === 'en')
                                        <span class="ui-pill ui-pill--info">English</span>
                                    @elseif ($request->letter_language === 'ar')
                                        <span class="ui-pill ui-pill--success">Arabic</span>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center" onclick="event.stopPropagation()">
                                    <div class="ui-actions justify-content-center">
                                        <x-table-action type="view" :url="route('hr_letter.show', $request->id)" />

                                        <x-table-action type="edit" :url="route('hr_letter.edit', $request->id)" />
                                    </div>
                                </td>
                            </tr>
                        @empty
                        @endforelse
                    </x-table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .ui-card {
            width: 100%;
            border-radius: 20px 20px 0px 0px !important;
            overflow: hidden;
        }

        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
        }

        .form-section__sub {
            color: #6b7280;
            font-size: 0.92rem;
        }

        .filter-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .filter-head__meta {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .staff-filter-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .staff-filter-col {
            grid-column: span 3 / span 3;
        }

        .staff-filter-col--search {
            grid-column: span 6 / span 6;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 600;
            color: #374151;
            font-size: 0.92rem;
        }

        .asset-input,
        .asset-select {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            padding: 0.7rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
        }

        .asset-input:focus,
        .asset-select:focus {
            outline: none;
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }

        .task-staff-wrap {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .task-staff-avatar {
            width: 34px;
            height: 34px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #f3f4f6;
            border: 1px solid #e5e7eb;
            color: #374151;
            font-size: 12px;
            font-weight: 700;
            flex-shrink: 0;
        }

        .table-action {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #374151;
            transition: 0.2s ease;
            font-size: 18px;
            text-decoration: none;
        }

        .table-action:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
        }

        @media (max-width: 1199.98px) {

            .staff-filter-col,
            .staff-filter-col--search {
                grid-column: span 6 / span 6;
            }
        }

        @media (max-width: 767.98px) {

            .staff-filter-col,
            .staff-filter-col--search {
                grid-column: span 12 / span 12;
            }

            .filter-head {
                align-items: stretch;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            $('.select2-page-filter').select2({
                width: '100%'
            });
        });

        setTimeout(() => {
            let alert = document.getElementById('successAlert');
            if (alert) {
                let bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            }
        }, 10000);
    </script>
@endpush