@extends('dashboard.layouts.app')

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

    @php
        $recordCount = method_exists($records, 'total') ? $records->total() : $records->count();
        $currentType = request('type', 'all_my_request');
    @endphp

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

                <x-page-title
                    title="Regularization & Permissions"
                    description="Manage, review, and track all regularization and permission requests across manager and HR approval stages."
                >
                    <a href="{{ route('regularizations_permissions.create') }}" class="asset-btn asset-btn--primary">
                        + New Request
                    </a>
                </x-page-title>

                <div class="ui-card">
                    <div class="form-section">
                        <div class="form-section__head">
                            <div class="requests-topbar">
                                <div>
                                    <h5 class="form-section__title mb-1">Overview</h5>
                                    <p class="form-section__sub mb-0">
                                        Switch between request queues and monitor pending, approved, and rejected items.
                                    </p>
                                </div>

                                <div class="requests-topbar__meta">
                                    <span class="ui-pill ui-pill--neutral">
                                        {{ $recordCount }} Request(s)
                                    </span>

                                    @if ($records->isNotEmpty())
                                        <span class="ui-pill ui-pill--info">
                                            {{ $records->firstItem() ?? 0 }} - {{ $records->lastItem() ?? 0 }}
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="current-user-box">
                            <div class="current-user-box__icon">
                                <iconify-icon icon="mdi:account-circle"></iconify-icon>
                            </div>

                            <div>
                                <div class="current-user-box__label">Current User</div>
                                <div class="current-user-box__name">
                                    {{ $currentUserName ?: 'Guest' }}
                                </div>
                            </div>
                        </div>

                        <div class="request-tabs-wrap">
                            <div class="request-tabs-header">
                                <h6 class="request-tabs-title">Filter by Request Type</h6>
                                <span class="ui-pill ui-pill--primary">{{ $records->count() }} Visible</span>
                            </div>

                            <div class="request-tabs-scroll">
                                <div class="request-tabs">
                                    <a href="{{ route('regularizations_permissions.index', array_merge(request()->except('page'), ['type' => 'all_my_request'])) }}"
                                        class="request-tab {{ $currentType === 'all_my_request' || !request()->has('type') ? 'request-tab--active' : '' }}">
                                        <iconify-icon icon="mdi:clipboard-list-outline"></iconify-icon>
                                        <span>My Requests</span>
                                    </a>

                                    @can('hr_regularizations_need_hr_approve')
                                        <a href="{{ route('regularizations_permissions.index', array_merge(request()->except('page'), ['type' => 'regularizations_need_hr_approve'])) }}"
                                            class="request-tab {{ $currentType === 'regularizations_need_hr_approve' ? 'request-tab--active' : '' }}">
                                            <iconify-icon icon="mdi:calendar-clock"></iconify-icon>
                                            <span>HR Regularizations</span>
                                        </a>
                                    @endcan

                                    @can('hr_permissions_need_hr_approve')
                                        <a href="{{ route('regularizations_permissions.index', array_merge(request()->except('page'), ['type' => 'permissions_need_hr_approve'])) }}"
                                            class="request-tab {{ $currentType === 'permissions_need_hr_approve' ? 'request-tab--active' : '' }}">
                                            <iconify-icon icon="mdi:timer-sand"></iconify-icon>
                                            <span>HR Permissions</span>
                                        </a>
                                    @endcan

                                    @can('hr_regularizations_need_manager_approve')
                                        <a href="{{ route('regularizations_permissions.index', array_merge(request()->except('page'), ['type' => 'regularizations_need_manager_approve'])) }}"
                                            class="request-tab {{ $currentType === 'regularizations_need_manager_approve' ? 'request-tab--active' : '' }}">
                                            <iconify-icon icon="mdi:account-clock"></iconify-icon>
                                            <span>Manager Regularizations</span>
                                        </a>
                                    @endcan

                                    @can('hr_permissions_need_manager_approve')
                                        <a href="{{ route('regularizations_permissions.index', array_merge(request()->except('page'), ['type' => 'permissions_need_manager_approve'])) }}"
                                            class="request-tab {{ $currentType === 'permissions_need_manager_approve' ? 'request-tab--active' : '' }}">
                                            <iconify-icon icon="mdi:account-clock-outline"></iconify-icon>
                                            <span>Manager Permissions</span>
                                        </a>
                                    @endcan

                                    @can('hr_regularizations_permissions_all_approved')
                                        <a href="{{ route('regularizations_permissions.index', array_merge(request()->except('page'), ['type' => 'all_approved'])) }}"
                                            class="request-tab {{ $currentType === 'all_approved' ? 'request-tab--active' : '' }}">
                                            <iconify-icon icon="mdi:check-circle-outline"></iconify-icon>
                                            <span>All Approved</span>
                                        </a>
                                    @endcan

                                    @can('hr_regularizations_permissions_all_rejected')
                                        <a href="{{ route('regularizations_permissions.index', array_merge(request()->except('page'), ['type' => 'all_rejected'])) }}"
                                            class="request-tab {{ $currentType === 'all_rejected' ? 'request-tab--active' : '' }}">
                                            <iconify-icon icon="mdi:close-circle-outline"></iconify-icon>
                                            <span>All Rejected</span>
                                        </a>
                                    @endcan
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="flex flex-wrap items-center justify-between gap-2">
                            <p class="assesstHint whitespace-nowrap mb-0">
                                Review employee requests, approval stages, and final status from one place.
                            </p>

                            <span class="ui-pill ui-pill--neutral">
                                {{ ucfirst(str_replace('_', ' ', $currentType)) }}
                            </span>
                        </div>
                    </div>

                    <x-table
                        :headers="['Employee', 'Type', 'Date', 'Reason', 'Status', 'Manager', 'HR', 'Approved At', 'Actions']"
                        :paginator="$records"
                        emptyMessage="No regularization or permission requests found."
                        emptyActionText="+ Create New Request"
                        :emptyActionUrl="route('regularizations_permissions.create')"
                    >
                        @foreach ($records as $record)
                            @php
                                $isManager = $record->staff->manager_id == $staffId;

                                $employeeName =
                                    $record->staff?->getRawOriginal('full_name') ?:
                                    trim(($record->staff->first_name ?? '') . ' ' . ($record->staff?->getRawOriginal('last_name') ?? '')) ?:
                                    'N/A';
                                $employeeNo = $record->staff->staff_no ?? '';
                                $recordType = ucfirst($record->type);
                                $recordTypeIcon = $record->type == 'regularization' ? 'mdi:calendar-check' : 'mdi:timer-outline';

                                if (!is_null($record->approved_by) && !is_null($record->approved_hr_by)) {
                                    $statusLabel = $record->approval_status == 2 ? 'Approved' : 'Rejected';
                                    $statusVariant = $record->approval_status == 2 ? 'success' : 'danger';
                                } elseif ($record->approval_status == '0') {
                                    $statusLabel = 'Rejected';
                                    $statusVariant = 'danger';
                                } elseif (!isset($record->approved_by)) {
                                    $statusLabel = 'Awaiting Manager';
                                    $statusVariant = 'warn';
                                } elseif (isset($record->approved_by) && !isset($record->approved_hr_by)) {
                                    $statusLabel = 'Awaiting HR';
                                    $statusVariant = 'info';
                                } else {
                                    $statusLabel = 'Pending';
                                    $statusVariant = 'neutral';
                                }

                                $canEdit = is_null($record->approved_by);
                            @endphp

                            <tr id="record-row-{{ $record->id }}">
                                <td class="text-center">
                                    <div class="request-employee">
                                        <div class="request-employee__avatar">
                                            <iconify-icon icon="mdi:account"></iconify-icon>
                                        </div>
                                        <div>
                                            <div class="ui-title">{{ $employeeName }}</div>
                                            <div class="ui-muted request-employee__sub">{{ $employeeNo }}</div>
                                        </div>
                                    </div>
                                </td>

                                <td class="text-center">
                                    <span class="ui-pill ui-pill--neutral">
                                        <iconify-icon icon="{{ $recordTypeIcon }}"></iconify-icon>
                                        {{ $recordType }}
                                    </span>
                                </td>

                                <td class="ui-muted text-center">
                                    {{ \Carbon\Carbon::parse($record->date)->format('d M, Y') }}
                                </td>

                                <td class="ui-muted text-center">
                                    <span class="request-reason" title="{{ $record->reason ?? '' }}">
                                        {{ $record->reason ?? '-' }}
                                    </span>
                                </td>

                                <td class="text-center">
                                    <div class="d-flex flex-wrap align-items-center justify-content-center gap-2">
                                        <span class="ui-pill ui-pill--{{ $statusVariant }}">
                                            {{ $statusLabel }}
                                        </span>

                                        @if (!isset($record->approved_by) && $isManager)
                                            <button type="button"
                                                class="table-action table-action--success"
                                                data-bs-toggle="modal"
                                                data-bs-target="#approveManager{{ $record->id }}"
                                                title="Approve as Manager">
                                                <iconify-icon icon="mdi:check"></iconify-icon>
                                            </button>

                                            <button type="button"
                                                class="table-action table-action--danger"
                                                data-bs-toggle="modal"
                                                data-bs-target="#rejectManager{{ $record->id }}"
                                                title="Reject as Manager">
                                                <iconify-icon icon="mdi:close"></iconify-icon>
                                            </button>
                                        @elseif (isset($record->approved_by) && !isset($record->approved_hr_by) && $isHr)
                                            <button type="button"
                                                class="table-action table-action--success"
                                                data-bs-toggle="modal"
                                                data-bs-target="#approveHr{{ $record->id }}"
                                                title="Approve as HR">
                                                <iconify-icon icon="mdi:check"></iconify-icon>
                                            </button>

                                            <button type="button"
                                                class="table-action table-action--danger"
                                                data-bs-toggle="modal"
                                                data-bs-target="#rejectHr{{ $record->id }}"
                                                title="Reject as HR">
                                                <iconify-icon icon="mdi:close"></iconify-icon>
                                            </button>
                                        @endif
                                    </div>
                                </td>

                                <td class="text-center">
                                    <div class="approval-person">
                                        <span class="approval-person__dot {{ $record->approved_by ? 'approval-person__dot--done' : '' }}"></span>
                                        <span class="ui-muted">{{ $record->approvedByName ?? 'Pending' }}</span>
                                    </div>
                                </td>

                                <td class="text-center">
                                    <div class="approval-person">
                                        <span class="approval-person__dot {{ $record->approved_hr_by ? 'approval-person__dot--done' : '' }}"></span>
                                        <span class="ui-muted">{{ $record->approvedHrByName ?? 'Pending' }}</span>
                                    </div>
                                </td>

                                <td class="ui-muted text-center">
                                    @if ($record->approved_at)
                                        {{ \Carbon\Carbon::parse($record->approved_at)->format('d M, Y h:i A') }}
                                    @else
                                        —
                                    @endif
                                </td>

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

                                        @if ($canEdit)
                                            <x-table-action type="edit" :url="route('regularizations_permissions.edit', $record->id)" />
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>
            </div>
        </div>
    </div>

    @foreach ($records as $record)
        @php
            $employeeName =
                $record->staff?->getRawOriginal('full_name') ?:
                trim(($record->staff->first_name ?? '') . ' ' . ($record->staff?->getRawOriginal('last_name') ?? '')) ?:
                'Employee';
            $recordDate = \Carbon\Carbon::parse($record->date)->format('d M, Y');
        @endphp

        <div class="modal fade" id="approveManager{{ $record->id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-0 shadow-lg rounded-4">
                    <form action="{{ route('regularizations_permissions.approve_by_manager', $record->id) }}" method="POST">
                        @csrf
                        <input type="hidden" name="approval_status" value="1">

                        <div class="modal-header border-bottom-0 pb-0">
                            <h5 class="modal-title">Approve Request</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body pt-3">
                            <p class="mb-3">Are you sure you want to approve this request?</p>

                            <div class="modal-request-box">
                                <div class="modal-request-box__name">{{ $employeeName }}</div>
                                <div class="modal-request-box__date">{{ $recordDate }}</div>
                            </div>
                        </div>

                        <div class="modal-footer border-top-0 pt-0">
                            <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="asset-btn asset-btn--primary">Approve</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade" id="rejectManager{{ $record->id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-0 shadow-lg rounded-4">
                    <form action="{{ route('regularizations_permissions.approve_by_manager', $record->id) }}" method="POST">
                        @csrf
                        <input type="hidden" name="approval_status" value="0">

                        <div class="modal-header border-bottom-0 pb-0">
                            <h5 class="modal-title">Reject Request</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body pt-3">
                            <p class="mb-3">Are you sure you want to reject this request?</p>

                            <div class="modal-request-box">
                                <div class="modal-request-box__name">{{ $employeeName }}</div>
                                <div class="modal-request-box__date">{{ $recordDate }}</div>
                            </div>
                        </div>

                        <div class="modal-footer border-top-0 pt-0">
                            <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-outline-danger">Reject</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade" id="approveHr{{ $record->id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-0 shadow-lg rounded-4">
                    <form action="{{ route('regularizations_permissions.approve_by_hr', $record->id) }}" method="POST">
                        @csrf
                        <input type="hidden" name="approval_status" value="2">

                        <div class="modal-header border-bottom-0 pb-0">
                            <h5 class="modal-title">Approve Request</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body pt-3">
                            <p class="mb-3">Are you sure you want to approve this request?</p>

                            <div class="modal-request-box">
                                <div class="modal-request-box__name">{{ $employeeName }}</div>
                                <div class="modal-request-box__date">{{ $recordDate }}</div>
                            </div>
                        </div>

                        <div class="modal-footer border-top-0 pt-0">
                            <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="asset-btn asset-btn--primary">Approve</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade" id="rejectHr{{ $record->id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-0 shadow-lg rounded-4">
                    <form action="{{ route('regularizations_permissions.approve_by_hr', $record->id) }}" method="POST">
                        @csrf
                        <input type="hidden" name="approval_status" value="0">

                        <div class="modal-header border-bottom-0 pb-0">
                            <h5 class="modal-title">Reject Request</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body pt-3">
                            <p class="mb-3">Are you sure you want to reject this request?</p>

                            <div class="modal-request-box">
                                <div class="modal-request-box__name">{{ $employeeName }}</div>
                                <div class="modal-request-box__date">{{ $recordDate }}</div>
                            </div>
                        </div>

                        <div class="modal-footer border-top-0 pt-0">
                            <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-outline-danger">Reject</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endforeach
@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-topbar {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

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

        .current-user-box {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            padding: 1rem 1.1rem;
            border: 1px solid #eef2f7;
            border-radius: 16px;
            background: #f8fafc;
            margin-bottom: 1rem;
        }

        .current-user-box__icon {
            width: 46px;
            height: 46px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(37, 99, 235, 0.08);
            color: #2563eb;
            font-size: 1.5rem;
            flex-shrink: 0;
        }

        .current-user-box__label {
            font-size: 0.82rem;
            color: #6b7280;
        }

        .current-user-box__name {
            font-size: 0.98rem;
            font-weight: 700;
            color: #111827;
        }

        .request-tabs-wrap {
            margin-top: 1rem;
        }

        .request-tabs-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            margin-bottom: 0.9rem;
            flex-wrap: wrap;
        }

        .request-tabs-title {
            margin: 0;
            color: #6b7280;
            font-size: 0.95rem;
            font-weight: 600;
        }

        .request-tabs-scroll {
            overflow-x: auto;
            overflow-y: hidden;
        }

        .request-tabs {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            min-width: max-content;
            padding: 0.35rem;
            border-radius: 18px;
            background: #f8fafc;
        }

        .request-tab {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            border-radius: 14px;
            color: #475569;
            text-decoration: none;
            transition: 0.2s ease;
            white-space: nowrap;
            border: 1px solid transparent;
            font-weight: 600;
        }

        .request-tab:hover {
            color: #2563eb;
            /* background: #fff;
            border-color: #dbeafe; */
        }

        .request-tab--active {
            background: #2563eb;
            color: #fff !important;
            box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
        }

        .request-employee {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            justify-content: center;
        }

        .request-employee__avatar {
            width: 38px;
            height: 38px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(37, 99, 235, 0.08);
            color: #2563eb;
            font-size: 1.15rem;
            flex-shrink: 0;
        }

        .request-employee__sub {
            font-size: 0.82rem;
        }

        .request-reason {
            display: inline-block;
            max-width: 240px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .approval-person {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            justify-content: center;
        }

        .approval-person__dot {
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: #94a3b8;
            flex-shrink: 0;
        }

        .approval-person__dot--done {
            background: #16a34a;
        }

        .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;
        }

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

        .table-action--success {
            border-color: #cde9d7;
            color: #198754;
        }

        .table-action--success:hover {
            background: #f4fbf6;
        }

        .table-action--danger {
            border-color: #f3d1d1;
            color: #dc3545;
        }

        .table-action--danger:hover {
            background: #fff5f5;
        }

        .modal-request-box {
            padding: 1rem;
            border-radius: 14px;
            background: #f8fafc;
            border: 1px solid #eef2f7;
        }

        .modal-request-box__name {
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.25rem;
        }

        .modal-request-box__date {
            color: #6b7280;
            font-size: 0.9rem;
        }

        @media (max-width: 767.98px) {
            .requests-topbar,
            .request-tabs-header {
                align-items: stretch;
            }

            .request-employee {
                justify-content: flex-start;
            }
        }
    </style>
@endpush