@extends('dashboard.layouts.app')
<style>
    .filters-bar {
        /* background: #f3f3f4; */
        border-radius: 18px;
        /* padding: 12px 14px; */
        overflow-x: auto;
    }

    .filters-bar form {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        width: 100%;
    }

    .filters-bar .form-select {
        width: auto !important;
        min-width: 90px;
        max-width: 140px;
    }

    .filters-bar .input-group {
        flex: 1;
        min-width: 220px;
        max-width: 350px;
    }


    .filters-bar .input-group .form-control {
        border-right: 0;
    }


    .filters-bar .input-group .btn {
        border-left: 0;
        background: #fff;
    }



    /* clear */
    .filters-bar .btn-outline-danger {
        border: none;
        color: #ea580c;
        font-weight: 600;
        background: transparent;
    }

    .form-select.form-select-sm {
        width: 125px !important;
    }
</style>

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

    @php
        $isMarketing = optional($authStaff?->department)->slug === 'marketing';
        $isHr = optional($authStaff?->department)->slug === 'hr';
        $canCreateRequest = !(request('priority') === 'high' && $isMarketing);
        $isSuperAdminRole = isSuperAdminOrCeo(Auth::user());

        $activeFiltersCount = collect([request('department_id'), request('type_id'), request('priority')])
            ->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="Requests"
                    description="Track internal HR requests, monitor priorities and statuses, and review related applicants in one place.">
                    @if ($activeFiltersCount > 0)
                        <span class="ui-pill ui-pill--warn">
                            {{ $activeFiltersCount }} Active Filter(s)
                        </span>
                    @endif

                    @if ($isHr)
                        <a href="{{ route('applicants.myAssigned') }}" class="asset-btn asset-btn--secondary p-3">
                            My Assigned Applicants
                        </a>
                    @endif


                    @if ($canCreateRequest)
                        <a href="{{ route('requests.create') }}" class="asset-btn asset-btn--primary p-3">
                            + Add New Request
                        </a>
                    @endif

                </x-page-title>



                <div class="ui-card ui-card--table">

                    @php
                        $tableFilters = [];

                        if ($isSuperAdminRole) {
                            $tableFilters['department_id'] = $departments->pluck('name', 'id')->toArray();
                        }

                        if (!$isMarketing) {
                            // $tableFilters['type_id'] = request()->get('type')
                            //     ? ['Recruitment']
                            //     : $requestTypes->pluck('name', 'id')->toArray();

                            $tableFilters['priority'] = [
                                'low' => 'Low',
                                'medium' => 'Medium',
                                'high' => 'High',
                            ];
                        }

                        $filterLabels = [
                            'department' => 'All Departments',
                            'type' => 'All Request Types',
                            'priority' => 'All Priorities',
                        ];
                    @endphp

                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-wrap">

                            <h6 class="mb-0 font-semibold text-gray-800 mb-0 whitespace-nowrap" style="margin-right:auto; ">
                                Filters</h6>
                            <x-table-controls :action="route('requests.index')" :export="true"
                                :exportRoute="route('requests.export')" :saveRoute="route('requests.saveFilteredTable')"
                                :filters="$tableFilters" :filterLabels="$filterLabels" formId="requests-table-controls"
                                searchName="search" searchPlaceholder="Search requests..." />

                        </div>
                    </div>

                    @php
                        $tableEmptyActionText = $canCreateRequest ? '+ Add First Request' : null;
                        $tableEmptyActionUrl = $canCreateRequest ? route('requests.create') : null;
                    @endphp
                    <x-table :headers="[
            'Department',
            'Created By',
            'Request For',
            'Request Type',
            'Priority',
            // 'Deadline',
            'Status',
            'Actions',
        ]" :paginator="$requests"
                        emptyMessage="No HR Requests found matching the current filters."
                        :emptyActionText="$tableEmptyActionText" :emptyActionUrl="$tableEmptyActionUrl">
                        @foreach ($requests as $request)
                            @php
                                $priorityVariant = match ($request->priority) {
                                    'high' => 'danger',
                                    'medium' => 'warn',
                                    default => 'success',
                                };

                                $statusVariant = match ($request->status) {
                                    'rejected' => 'danger',
                                    'pending' => 'warn',
                                    'approved' => 'success',
                                    default => 'neutral',
                                };

                                $canEditRequest =
                                    $request->created_by == $staff_id &&
                                    (isSuperAdminOrCeo(auth()->user()) ||
                                        !in_array($authStaff?->jobTitle?->slug, [
                                            'teacher',
                                            'tester',
                                        ]));

                                $hasApplicants = $request->requestRecruitments->count() > 0;
                                $creatorName = trim(
                                    ($request->creator->first_name ?? '') .
                                    ' ' .
                                    ($request->creator?->getRawOriginal('last_name') ?? ''),
                                );
                                $requestForName = trim(
                                    ($request->requestFor->first_name ?? '') .
                                    ' ' .
                                    ($request->requestFor?->getRawOriginal('last_name') ?? ''),
                                );
                            @endphp

                            <tr class="ui-row-click" onclick="window.location='{{ route('requests.show', $request->id) }}'">
                                <td class="ui-muted text-center">
                                    {{ $request->department->name ?? 'N/A' }}
                                </td>

                                <td class="ui-muted text-center">
                                    {{ $creatorName ?: '—' }}
                                </td>

                                <td class="ui-title text-center">
                                    {{ $requestForName ?: '—' }}
                                </td>

                                <td class="ui-muted text-center">
                                    {{ $request->type->name ?? 'N/A' }}
                                </td>

                                <td class="text-center">
                                    <span class="ui-pill ui-pill--{{ $priorityVariant }}">
                                        {{ ucfirst($request->priority) }}
                                    </span>
                                </td>

                                {{-- <td class="ui-muted text-center">
                                    {{ $request->deadline ?? '—' }}
                                </td> --}}

                                <td class="text-center">
                                    <span class="ui-pill ui-pill--{{ $statusVariant }}">
                                        {{ ucfirst($request->status) }}
                                    </span>
                                </td>

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

                                        @if ($canEditRequest)
                                            <x-table-action type="edit" :url="route('requests.edit', $request->id)" />
                                        @endif

                                        @can('hr_request_show_applicants')
                                            @if ($hasApplicants)
                                                <a href="{{ route('showApplicants', $request->id) }}" class="table-action"
                                                    title="Show Applicants">
                                                    <iconify-icon icon="lucide:file"></iconify-icon>
                                                </a>
                                            @else
                                                <span class="table-action table-action--disabled" title="No Applicants">
                                                    <iconify-icon icon="lucide:file"></iconify-icon>
                                                </span>
                                            @endif
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .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;
        }

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

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

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

        .requests-filter-col {
            grid-column: span 4 / span 4;
        }

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

        .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-select:focus {
            outline: none;
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .asset-actions {
            display: flex;
            justify-content: end;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .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);
            color: #374151;
        }

        .table-action--disabled {
            border-color: #e5e7eb;
            color: #9ca3af;
            background: #f9fafb;
            cursor: not-allowed;
        }

        @media (max-width: 991.98px) {
            .requests-filter-col {
                grid-column: span 6 / span 6;
            }
        }

        @media (max-width: 767.98px) {
            .requests-filter-col {
                grid-column: span 12 / span 12;
            }

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