@section('title', get_setting('site_name') . ' | Approval Center')

@push('css')
    <style>
        .ac-wrap { padding-bottom: 1.5rem; }
        .ac-wrap .page-title { font-size: 1.25rem; font-weight: 700; color: #0f172a; }
        .ac-wrap .page-sub { font-size: 0.875rem; color: #6b7280; }
        .ac-stat {
            background: #fff;
            border: 1px solid rgba(17,24,39,.08);
            border-radius: 12px;
            padding: .75rem 1rem;
            height: 100%;
        }
        .ac-stat .num { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
        .ac-stat .lbl { font-size: 0.75rem; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
        .ac-wrap .card{
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid rgba(17,24,39,.08);
            box-shadow: 0 4px 14px rgba(17,24,39,.04);
        }
        .ac-wrap .card.ac-pending-inbox-card > .card-body{
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            max-width: 100%;
        }
        .ac-wrap .card-header{
            background: #fff;
            border-bottom: 1px solid #edf0f6;
            padding: 12px 14px;
        }
        .ac-wrap .card-header h5{
            font-size: 15px;
            font-weight: 700;
            margin: 0;
            color: #0f172a;
        }
        .ac-wrap .table{ margin: 0; }
        .ac-inbox-table{
            width: 100%;
            min-width: 900px;
            table-layout: auto;
        }
        .ac-inbox-table .ac-subject-cell,
        .ac-recent-table .ac-subject-cell{
            max-width: 14rem;
            white-space: normal;
            word-break: break-word;
        }
        @media (min-width: 1400px){
            .ac-inbox-table .ac-subject-cell,
            .ac-recent-table .ac-subject-cell { max-width: 18rem; }
        }
        .ac-wrap .table thead th{
            font-size: 11px;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: rgba(15,23,42,.65);
            border-top: 0 !important;
            border-bottom: 1px solid #edf0f6 !important;
            padding: 10px 12px !important;
            background: #f8f9fb;
            white-space: nowrap;
        }
        .ac-wrap .table td{
            padding: 10px 12px !important;
            vertical-align: middle;
            border-top: 1px solid #f1f3f9 !important;
            font-size: 13px;
        }
        .ac-badge{
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            border: 1px solid transparent;
            line-height: 1.1;
            white-space: nowrap;
        }
        .ac-badge.pending{ background: rgba(14,165,233,.12); color: #0369a1; border-color: rgba(14,165,233,.25); }
        .ac-badge.approved{ background: rgba(34,197,94,.12); color: #166534; border-color: rgba(34,197,94,.25); }
        .ac-badge.rejected{ background: rgba(239,68,68,.12); color: #991b1b; border-color: rgba(239,68,68,.25); }
        .ac-actions{
            display: flex;
            flex-wrap: wrap;
            gap: .35rem;
            min-width: 8rem;
        }
        .ac-actions .btn{
            padding: 4px 8px;
            font-size: 11px;
            border-radius: 8px;
            flex: 1 1 auto;
            min-width: 4.5rem;
            white-space: nowrap;
        }
        #actionModal .modal-content { border-radius: 14px; }
        #actionModal textarea { border-radius: 10px;
            font-size: 13px;
        }
        .ac-empty{
            padding: 24px 14px;
            text-align: center;
            color: rgba(15,23,42,.55);
        }
        .ac-filter-card .form-control{ border-radius: 10px; font-size: 13px; }
        .ac-filter-card label{
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: rgba(15,23,42,.55);
            margin-bottom: 4px;
        }
        .ac-emp-cell{
            font-weight: 600;
            color: #0f172a;
            max-width: 12rem;
            white-space: normal;
            word-break: break-word;
            font-size: 12px;
        }
        .ac-pagination .pagination{ margin-bottom: 0; flex-wrap: wrap; justify-content: center; }
        .ac-pagination .page-link { padding: .35rem .65rem; font-size: 13px; }
        /* Mobile cards */
        .ac-mobile-card {
            border: 1px solid #edf0f6;
            border-radius: 12px;
            padding: 12px;
            margin-bottom: 10px;
            background: #fafbfc;
        }
        .ac-mobile-card:last-child { margin-bottom: 0; }
        .ac-mobile-card .ac-mc-title {
            font-weight: 700;
            font-size: 14px;
            color: #0f172a;
            margin-bottom: 6px;
            word-break: break-word;
        }
        .ac-mobile-card .ac-mc-meta {
            font-size: 12px;
            color: #64748b;
            margin-bottom: 4px;
            word-break: break-word;
        }
        .ac-mobile-card .ac-mc-meta strong { color: #334155; font-weight: 600; }
        .ac-mobile-card .ac-actions { margin-top: 10px; }
        .ac-mobile-card .ac-actions .btn { flex: 1 1 calc(50% - .35rem); min-width: 0; }
        .ac-loading-bar {
            position: fixed;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: var(--ui-primary, #615dad);
            z-index: 9999;
            animation: ac-pulse 1s ease infinite;
        }
        @keyframes ac-pulse { 0%,100%{ opacity: .4; } 50%{ opacity: 1; } }
        #forwardModal .select2-container { width: 100% !important; }
        #forwardModal .select2-selection--single { height: 38px !important; border-radius: 10px; }
        #forwardModal .select2-selection__rendered { line-height: 36px !important; }
        #forwardModal .select2-selection__arrow { height: 36px !important; }
        @media (max-width: 575.98px) {
            .ac-wrap .card-header { padding: 10px 12px; }
            .ac-mobile-card .ac-actions .btn { flex: 1 1 100%; }
        }
    </style>
@endpush

<div>
<input type="hidden" wire:model="forwardToId" id="ac-forward-to-hidden">
<div class="row ac-wrap">
    <div wire:loading class="ac-loading-bar"></div>

    @if (session()->has('message'))
        <div class="col-12">
            <div class="alert alert-success mb-0">{{ session('message') }}</div>
        </div>
    @endif
    @if (session()->has('error'))
        <div class="col-12">
            <div class="alert alert-danger mb-0">{{ session('error') }}</div>
        </div>
    @endif

    <div class="col-12 mb-3">
        <div class="d-flex flex-wrap align-items-start justify-content-between">
            <div class="mb-2 mb-md-0">
                <h4 class="page-title mb-1">{{ __('Approval Center') }}</h4>
                <p class="page-sub mb-0">{{ __('Review pending approvals, track your requests, and search the approval history.') }}</p>
            </div>
        </div>
    </div>

    <div class="col-12 mb-3">
        <div class="row">
            @if(get_setting('supervisor') == 1 || $isAdmin)
                <div class="col-6 col-md-4 mb-2 mb-md-0">
                    <div class="ac-stat">
                        <div class="num text-primary">{{ number_format($inboxTotal) }}</div>
                        <div class="lbl">{{ __('Pending inbox') }}</div>
                    </div>
                </div>
            @endif
            <div class="col-6 col-md-4 mb-2 mb-md-0">
                <div class="ac-stat">
                    <div class="num">{{ number_format($myRequests->total()) }}</div>
                    <div class="lbl">{{ __('My requests') }}</div>
                </div>
            </div>
            <div class="col-6 col-md-4">
                <div class="ac-stat">
                    <div class="num">{{ number_format($allRecent->total()) }}</div>
                    <div class="lbl">{{ __('Recent / filtered') }}</div>
                </div>
            </div>
        </div>
    </div>

    @if($isAdmin)
        <div class="col-12 mb-3">
            <div class="card ac-filter-card">
                <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                    <div>
                        <h5 class="mb-0">{{ __('Search & filters') }}</h5>
                        <p class="small text-muted mb-0 mt-1">{{ __('Applies to pending inbox and recent requests below.') }}</p>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-secondary mt-2 mt-md-0" wire:click="resetFilters">
                        {{ __('Reset filters') }}
                    </button>
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <div class="form-group col-6 col-md-4 col-lg-2 mb-2 mb-lg-0">
                            <label for="acf-type">{{ __('Request type') }}</label>
                            <select id="acf-type" class="form-control" wire:model.live="filter_request_type">
                                <option value="">{{ __('All types') }}</option>
                                @foreach($requestTypeOptions as $rt)
                                    <option value="{{ $rt }}">{{ str_contains($rt, '\\') ? class_basename($rt) : $rt }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-6 col-md-4 col-lg-2 mb-2 mb-lg-0">
                            <label for="acf-status">{{ __('Status') }}</label>
                            <select id="acf-status" class="form-control" wire:model.live="filter_status">
                                <option value="">{{ __('All statuses') }}</option>
                                <option value="pending">{{ __('Pending') }}</option>
                                <option value="approved">{{ __('Approved') }}</option>
                                <option value="rejected">{{ __('Rejected') }}</option>
                            </select>
                        </div>
                        <div class="form-group col-6 col-md-4 col-lg-2 mb-2 mb-lg-0">
                            <label for="acf-branch">{{ __('Branch') }}</label>
                            <select id="acf-branch" class="form-control" wire:model.live="filter_warehouse_id">
                                <option value="">{{ __('All branches') }}</option>
                                @foreach($warehouses as $wh)
                                    <option value="{{ $wh->id }}">{{ $wh->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-6 col-md-4 col-lg-2 mb-2 mb-lg-0">
                            <label for="acf-dept">{{ __('Department') }}</label>
                            <select id="acf-dept" class="form-control" wire:model.live="filter_department_id">
                                <option value="">{{ __('All departments') }}</option>
                                @foreach($departments as $dept)
                                    <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-6 col-md-4 col-lg-2 mb-2 mb-lg-0">
                            <label for="acf-from">{{ __('From date') }}</label>
                            <input id="acf-from" type="date" class="form-control" wire:model.live="filter_date_from">
                        </div>
                        <div class="form-group col-6 col-md-4 col-lg-2 mb-2 mb-lg-0">
                            <label for="acf-to">{{ __('To date') }}</label>
                            <input id="acf-to" type="date" class="form-control" wire:model.live="filter_date_to">
                        </div>
                    </div>
                    <div class="form-row mt-1">
                        <div class="form-group col-12 col-md-6 col-lg-4 mb-2 mb-md-0">
                            <label for="acf-search">{{ __('Employee search') }}</label>
                            <input id="acf-search" type="search" class="form-control"
                                   wire:model.live.debounce.400ms="filter_employee_search"
                                   placeholder="{{ __('Name or user ID') }}">
                        </div>
                        <div class="form-group col-12 col-md-6 col-lg-4 mb-0">
                            <label for="acf-keyword">{{ __('Search subject / note') }}</label>
                            <input id="acf-keyword" type="search" class="form-control"
                                   wire:model.live.debounce.400ms="filter_keyword"
                                   placeholder="{{ __('Keywords in subject or description') }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @elseif(!$isAdmin)
        <div class="col-12 mb-3">
            <div class="card ac-filter-card">
                <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                    <h5 class="mb-0">{{ __('Search & filter') }}</h5>
                    <button type="button" class="btn btn-sm btn-outline-secondary mt-2 mt-md-0" wire:click="resetFilters">
                        {{ __('Reset') }}
                    </button>
                </div>
                <div class="card-body">
                    <p class="small text-muted mb-3">
                        {{ __('Filters recent requests and your pending inbox (if you are a supervisor).') }}
                    </p>
                    <div class="form-row">
                        <div class="form-group col-6 col-md-4 col-lg-2 mb-2 mb-lg-0">
                            <label for="acf-emp-type">{{ __('Request type') }}</label>
                            <select id="acf-emp-type" class="form-control" wire:model.live="filter_request_type">
                                <option value="">{{ __('All types') }}</option>
                                @foreach($requestTypeOptions as $rt)
                                    <option value="{{ $rt }}">{{ str_contains($rt, '\\') ? class_basename($rt) : $rt }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-6 col-md-4 col-lg-2 mb-2 mb-lg-0">
                            <label for="acf-emp-status">{{ __('Status') }}</label>
                            <select id="acf-emp-status" class="form-control" wire:model.live="filter_status">
                                <option value="">{{ __('All statuses') }}</option>
                                <option value="pending">{{ __('Pending') }}</option>
                                <option value="approved">{{ __('Approved') }}</option>
                                <option value="rejected">{{ __('Rejected') }}</option>
                            </select>
                        </div>
                        <div class="form-group col-6 col-md-4 col-lg-2 mb-2 mb-lg-0">
                            <label for="acf-emp-from">{{ __('From date') }}</label>
                            <input id="acf-emp-from" type="date" class="form-control" wire:model.live="filter_date_from">
                        </div>
                        <div class="form-group col-6 col-md-4 col-lg-2 mb-2 mb-lg-0">
                            <label for="acf-emp-to">{{ __('To date') }}</label>
                            <input id="acf-emp-to" type="date" class="form-control" wire:model.live="filter_date_to">
                        </div>
                        <div class="form-group col-12 col-md-8 col-lg-4 mb-0">
                            <label for="acf-emp-keyword">{{ __('Search subject / note') }}</label>
                            <input id="acf-emp-keyword" type="search" class="form-control"
                                   wire:model.live.debounce.400ms="filter_keyword"
                                   placeholder="{{ __('Keywords in subject or description') }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    @if(get_setting('supervisor') == 1 || $isAdmin)
        <div class="col-12 col-xl-8 mb-3 order-1 order-xl-2">
            <div class="card h-100 ac-pending-inbox-card">
                <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                    <h5 class="mb-0">
                        {{ $isAdmin ? __('Pending requests (admin)') : __('Pending for my approval') }}
                        <span class="badge badge-primary ml-1">{{ $inboxTotal }}</span>
                    </h5>
                    <span class="small text-muted mt-1 mt-md-0">{{ __('Page') }} {{ $inbox->currentPage() }} / {{ max($inbox->lastPage(), 1) }}</span>
                </div>
                <div class="card-body p-2 p-md-1">
                    {{-- Mobile cards --}}
                    <div class="d-md-none">
                        @forelse($inbox as $item)
                            <div class="ac-mobile-card" wire:key="inbox-m-{{ $item->id }}">
                                <div class="d-flex flex-wrap align-items-center justify-content-between mb-1">
                                    <span class="ac-badge pending">{{ __('Pending') }}</span>
                                    <span class="small text-muted">{{ $item->request_type_label }}</span>
                                </div>
                                <div class="ac-mc-title">{{ $item->subject ?: '—' }}</div>
                                <div class="ac-mc-meta"><strong>{{ __('Employee') }}:</strong> {{ $this->employeeLine($item->user) }}</div>
                                <div class="ac-mc-meta"><strong>{{ __('Department') }}:</strong> {{ $item->user?->staff?->department?->name ?? '—' }}</div>
                                @if($isAdmin)
                                    <div class="ac-mc-meta"><strong>{{ __('Approver') }}:</strong> {{ $this->employeeLine($item->currentApprover) }}</div>
                                @endif
                                @include('livewire.partials.approval-inbox-actions', ['item' => $item, 'isAdmin' => $isAdmin])
                            </div>
                        @empty
                            <div class="ac-empty">{{ __('No pending approvals.') }}</div>
                        @endforelse
                    </div>
                    {{-- Desktop table --}}
                    <div class="table-responsive d-none d-md-block">
                        <table class="table table-sm ac-inbox-table mb-0">
                            <thead>
                            <tr>
                                <th>{{ __('Employee') }}</th>
                                <th>{{ __('Department') }}</th>
                                <th>{{ __('Type') }}</th>
                                <th>{{ __('Subject') }}</th>
                                @if($isAdmin)
                                    <th>{{ __('Current approver') }}</th>
                                @endif
                                <th>{{ __('Action') }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($inbox as $item)
                                <tr wire:key="inbox-{{ $item->id }}">
                                    <td class="ac-emp-cell">{{ $this->employeeLine($item->user) }}</td>
                                    <td>{{ $item->user?->staff?->department?->name ?? '—' }}</td>
                                    <td>{{ $item->request_type_label }}</td>
                                    <td class="ac-subject-cell">{{ $item->subject ?: '—' }}</td>
                                    @if($isAdmin)
                                        <td>{{ $this->employeeLine($item->currentApprover) }}</td>
                                    @endif
                                    <td>
                                        @include('livewire.partials.approval-inbox-actions', ['item' => $item, 'isAdmin' => $isAdmin])
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="{{ $isAdmin ? 6 : 5 }}" class="ac-empty">{{ __('No pending approvals.') }}</td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if($inbox->hasPages())
                        <div class="ac-pagination p-2 border-top">{{ $inbox->links() }}</div>
                    @endif
                </div>
            </div>
        </div>
    @endif

    <div class="col-12 mb-3 @if(get_setting('supervisor') == 1 || $isAdmin) col-xl-4 @endif order-2 order-xl-1">
        <div class="card h-100">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                <h5 class="mb-0">{{ __('My requests') }}</h5>
                <span class="small text-muted">{{ $myRequests->total() }} {{ __('total') }}</span>
            </div>
            <div class="card-body p-2 p-md-1">
                <div class="d-md-none">
                    @forelse($myRequests as $req)
                        <div class="ac-mobile-card" wire:key="my-m-{{ $req->id }}">
                            <div class="d-flex flex-wrap align-items-center justify-content-between mb-1">
                                <span class="ac-badge {{ strtolower($req->status) }}">{{ ucfirst($req->status) }}</span>
                                <span class="small text-muted">{{ $req->request_type_label }}</span>
                            </div>
                            <div class="ac-mc-title">{{ $req->subject ?: '—' }}</div>
                            <div class="ac-mc-meta"><strong>{{ __('Approver') }}:</strong> {{ $this->employeeLine($req->currentApprover) }}</div>
                        </div>
                    @empty
                        <div class="ac-empty">{{ __('No requests yet.') }}</div>
                    @endforelse
                </div>
                <div class="table-responsive d-none d-md-block">
                    <table class="table table-sm mb-0">
                        <thead>
                        <tr>
                            <th>{{ __('Type') }}</th>
                            <th>{{ __('Subject') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th>{{ __('Approver') }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($myRequests as $req)
                            <tr wire:key="my-{{ $req->id }}">
                                <td>{{ $req->request_type_label }}</td>
                                <td class="ac-subject-cell">{{ $req->subject ?: '—' }}</td>
                                <td><span class="ac-badge {{ strtolower($req->status) }}">{{ ucfirst($req->status) }}</span></td>
                                <td class="small">{{ $this->employeeLine($req->currentApprover) }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="ac-empty">{{ __('No requests yet.') }}</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
                @if($myRequests->hasPages())
                    <div class="ac-pagination p-2 border-top">{{ $myRequests->links() }}</div>
                @endif
            </div>
        </div>
    </div>

    <div class="col-12 order-3">
        <div class="card">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                <div>
                    <h5 class="mb-0">{{ $isAdmin ? __('Recent all requests') : __('Recent requests') }}</h5>
                    <p class="small text-muted mb-0 mt-1">{{ __('Showing :count results', ['count' => $allRecent->total()]) }}</p>
                </div>
            </div>
            <div class="card-body p-2 p-md-1">
                <div class="d-md-none">
                    @forelse($allRecent as $ar)
                        <div class="ac-mobile-card" wire:key="recent-m-{{ $ar->id }}">
                            <div class="d-flex flex-wrap align-items-center justify-content-between mb-1">
                                <span class="ac-badge {{ strtolower($ar->status) }}">{{ ucfirst($ar->status) }}</span>
                                <span class="small text-muted">{{ $ar->created_at?->format('Y-m-d H:i') ?? '—' }}</span>
                            </div>
                            <div class="ac-mc-title">{{ $ar->subject ?: '—' }}</div>
                            <div class="ac-mc-meta"><strong>{{ __('Employee') }}:</strong> {{ $this->employeeLine($ar->user) }}</div>
                            <div class="ac-mc-meta"><strong>{{ __('Department') }}:</strong> {{ $ar->user?->staff?->department?->name ?? '—' }}</div>
                            <div class="ac-mc-meta"><strong>{{ __('Type') }}:</strong> {{ $ar->request_type_label }}</div>
                            <div class="ac-mc-meta"><strong>{{ __('Approver') }}:</strong> {{ $this->employeeLine($ar->currentApprover) }}</div>
                        </div>
                    @empty
                        <div class="ac-empty">{{ __('No matching requests.') }}</div>
                    @endforelse
                </div>
                <div class="table-responsive d-none d-md-block">
                    <table class="table table-sm ac-recent-table mb-0">
                        <thead>
                        <tr>
                            <th>{{ __('Employee') }}</th>
                            <th>{{ __('Department') }}</th>
                            <th>{{ __('Type') }}</th>
                            <th>{{ __('Subject') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th>{{ __('Current approver') }}</th>
                            <th>{{ __('Date') }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($allRecent as $ar)
                            <tr wire:key="recent-{{ $ar->id }}">
                                <td class="ac-emp-cell">{{ $this->employeeLine($ar->user) }}</td>
                                <td>{{ $ar->user?->staff?->department?->name ?? '—' }}</td>
                                <td>{{ $ar->request_type_label }}</td>
                                <td class="ac-subject-cell">{{ \Illuminate\Support\Str::limit($ar->subject ?: '—', 60) }}</td>
                                <td><span class="ac-badge {{ strtolower($ar->status) }}">{{ ucfirst($ar->status) }}</span></td>
                                <td class="small">{{ $this->employeeLine($ar->currentApprover) }}</td>
                                <td class="text-nowrap small">{{ $ar->created_at?->format('Y-m-d H:i') ?? '—' }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="ac-empty">{{ __('No matching requests.') }}</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
                @if($allRecent->hasPages())
                    <div class="ac-pagination p-2 border-top">{{ $allRecent->links() }}</div>
                @endif
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="actionModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-md modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    @if($actionType === 'approve')
                        <i class="mdi mdi-check-circle text-success mr-1"></i> {{ __('Approve Request') }}
                    @else
                        <i class="mdi mdi-close-circle text-danger mr-1"></i> {{ __('Reject Request') }}
                    @endif
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                @if($actionRequestId)
                    @php $actionItem = \App\Models\ApprovalRequest::with('user.staff')->find($actionRequestId); @endphp
                    @if($actionItem)
                        <div class="mb-3 p-2 rounded" style="background:#f8f9fb;">
                            <div class="small text-muted">{{ $actionItem->request_type_label }}</div>
                            <div class="font-weight-bold">{{ $actionItem->subject ?: '—' }}</div>
                            <div class="small text-muted">{{ __('By') }}: {{ $actionItem->user?->name ?? '—' }}</div>
                        </div>
                    @endif
                @endif
                <div class="form-group mb-0">
                    <label class="font-weight-bold">{{ __('Comment / Note') }} <span class="text-danger">*</span></label>
                    <textarea class="form-control" rows="3" wire:model="actionNote"
                              placeholder="{{ $actionType === 'approve' ? __('Approval note...') : __('Reason for rejection...') }}"
                              autofocus></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                @if($actionType === 'approve')
                    <button type="button" class="btn btn-success" wire:click="confirmAction">
                        <i class="mdi mdi-check"></i> {{ __('Approve') }}
                    </button>
                @else
                    <button type="button" class="btn btn-danger" wire:click="confirmAction">
                        <i class="mdi mdi-close"></i> {{ __('Reject') }}
                    </button>
                @endif
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="forwardModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Forward Request</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="acForwardToSelect">{{ __('Forward To') }}</label>
                    <div wire:ignore>
                        <select id="acForwardToSelect" class="form-control select2-ac-forward"
                                data-placeholder="{{ __('Select or search user') }}">
                            <option value=""></option>
                            @foreach($activeUsers as $u)
                                <option value="{{ $u->id }}">{{ $u->name }} ({{ $u->id }})</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group mb-0">
                    <label>Note / Description (required)</label>
                    <textarea class="form-control" rows="2" wire:model="forwardNote"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning" wire:click="forward">Forward</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="requestHistoryModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('Forward trail') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="mb-3 text-muted">
                    <strong>{{ __('Subject') }}:</strong> {{ $historyRequestSubject ?: '—' }}
                </p>
                <div class="table-responsive">
                    <table class="table table-sm mb-0">
                        <thead>
                        <tr>
                            <th>{{ __('Date') }}</th>
                            <th>{{ __('Action') }}</th>
                            <th>{{ __('By') }}</th>
                            <th>{{ __('Forwarded to') }}</th>
                            <th>{{ __('Note') }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($requestActionHistory as $historyRow)
                            <tr>
                                <td>{{ $historyRow['at'] }}</td>
                                <td>{{ ucfirst($historyRow['action']) }}</td>
                                <td>{{ $historyRow['actor'] }}</td>
                                <td>{{ $historyRow['forwarded_to'] }}</td>
                                <td>{{ $historyRow['note'] }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="ac-empty">{{ __('No forwarding or approval notes yet.') }}</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Close') }}</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="applicationViewModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('Application view') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="mb-3 text-muted">
                    <strong>{{ __('Subject') }}:</strong> {{ $applicationViewTitle ?: '—' }}
                </p>
                <div class="table-responsive">
                    <table class="table table-sm mb-0">
                        <tbody>
                        @forelse($applicationViewDetails as $detail)
                            <tr>
                                <th class="text-nowrap" style="width: 35%;">{{ $detail['label'] }}</th>
                                <td>{{ $detail['value'] }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="2" class="ac-empty">{{ __('No application details available.') }}</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Close') }}</button>
            </div>
        </div>
    </div>
</div>

@section('script')
    <script>
        (function () {
            function acForwardHiddenEl() {
                return document.getElementById('ac-forward-to-hidden');
            }

            function syncAcForwardHidden(val) {
                var el = acForwardHiddenEl();
                if (!el) return;
                el.value = val ? String(val) : '';
                el.dispatchEvent(new Event('input', {bubbles: true}));
                el.dispatchEvent(new Event('change', {bubbles: true}));
            }

            function tearAcForwardSelect2() {
                var $s = $('#acForwardToSelect');
                if ($s.length && $s.hasClass('select2-hidden-accessible')) {
                    $s.off('change.acFwd');
                    $s.select2('destroy');
                }
            }

            function initAcForwardSelect2() {
                var $s = $('#acForwardToSelect');
                var $modal = $('#forwardModal');
                if (!$s.length || typeof $.fn.select2 !== 'function') return;

                tearAcForwardSelect2();

                $s.select2({
                    width: '100%',
                    placeholder: $s.data('placeholder') || {!! json_encode(__('Select user')) !!},
                    dropdownParent: $modal,
                    allowClear: true,
                });

                var hidden = acForwardHiddenEl();
                var initial = hidden && hidden.value ? hidden.value : '';
                $s.val(initial || null).trigger('change');

                $s.on('change.acFwd', function () {
                    syncAcForwardHidden($(this).val() || '');
                });
            }

            document.addEventListener('livewire:init', function () {
                Livewire.on('openActionModal', function () {
                    $('#actionModal').modal('show');
                    setTimeout(function(){ $('#actionModal textarea').focus(); }, 200);
                });
                Livewire.on('closeActionModal', function () {
                    $('#actionModal').modal('hide');
                });
                Livewire.on('openForwardModal', function () {
                    $('#forwardModal').modal('show');
                    setTimeout(initAcForwardSelect2, 150);
                });
                Livewire.on('closeForwardModal', function () {
                    tearAcForwardSelect2();
                    $('#forwardModal').modal('hide');
                });
                Livewire.on('openRequestHistoryModal', function () {
                    $('#requestHistoryModal').modal('show');
                });
                Livewire.on('openApplicationViewModal', function () {
                    $('#applicationViewModal').modal('show');
                });
            });

            $('#forwardModal').on('hidden.bs.modal', function () {
                tearAcForwardSelect2();
                syncAcForwardHidden('');
            });
        })();
    </script>
@endsection

</div>