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

@push('css')
    <style>
        .ac-wrap .card{
            border-radius: 14px;
            overflow: hidden;
        }
        /* Wide inbox: avoid clipping horizontal scroll / last columns */
        .ac-wrap .card.ac-pending-inbox-card{
            overflow: visible;
        }
        .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: 800;
            margin: 0;
            color: #0f172a;
        }
        .ac-wrap .table{
            margin: 0;
        }
        .ac-inbox-table{
            width: 100%;
            min-width: 1040px;
            table-layout: auto;
        }
        .ac-inbox-table .ac-subject-cell{
            max-width: 14rem;
            white-space: normal;
            word-break: break-word;
        }
        @media (min-width: 1400px){
            .ac-inbox-table .ac-subject-cell{ max-width: 18rem; }
        }
        .ac-wrap .table thead th{
            font-size: 11px;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: rgba(15,23,42,.65);
            border-top: 0 !important;
            border-bottom: 1px solid #edf0f6 !important;
            padding: 10px 12px !important;
            background: #fff;
            white-space: nowrap;
        }
        .ac-wrap .table td{
            padding: 10px 12px !important;
            vertical-align: middle;
            border-top: 1px solid #f1f3f9 !important;
        }
        .ac-badge{
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 800;
            border: 1px solid transparent;
            line-height: 1.1;
        }
        .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-direction: column;
            align-items: stretch;
            gap: 0.4rem;
            min-width: 7.25rem;
        }
        .ac-actions .btn{
            padding: 4px 10px;
            font-size: 12px;
            border-radius: 10px;
            width: 100%;
            white-space: nowrap;
        }
        .ac-note{
            min-width: 12rem;
            width: 1%;
        }
        .ac-note input.form-control{
            min-width: 11rem;
            max-width: 100%;
        }
        .ac-note input{
            border-radius: 10px;
        }
        .ac-empty{
            padding: 18px 14px;
            text-align: center;
            color: rgba(15,23,42,.55);
        }
        @media (max-width: 991.98px){
            .ac-note{ min-width: 160px; }
        }
        .ac-filter-card .form-control,
        .ac-filter-card .custom-select{
            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;
        }
        @media (min-width: 1400px){
            .ac-emp-cell{ max-width: 16rem; }
        }
        .ac-pagination .pagination{
            margin-bottom: 0;
        }
        #forwardModal .select2-selection__rendered {
            line-height: 31px !important;
        }
        #forwardModal .select2-container .select2-selection--single {
            height: 35px !important;
            border-radius: 10px;
        }
        #forwardModal .select2-selection__arrow {
            height: 34px !important;
        }
        #forwardModal .select2-container {
            width: 100% !important;
        }
    </style>
@endpush

<div>
<input type="hidden" wire:model="forwardToId" id="ac-forward-to-hidden">
<div class="row mt-3 ac-wrap">
    @if (session()->has('message'))
        <div class="col-12">
            <div class="alert alert-success">{{ session('message') }}</div>
        </div>
    @endif
    @if (session()->has('error'))
        <div class="col-12">
            <div class="alert alert-danger">{{ session('error') }}</div>
        </div>
    @endif

    @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">
                    <h5 class="mb-0">{{ __('Advanced filters') }}</h5>
                    <button type="button" class="btn btn-sm btn-outline-secondary" wire:click="resetFilters">
                        {{ __('Reset') }}
                    </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-2">
                        <div class="form-group col-12 col-md-6 mb-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>
                </div>
            </div>
        </div>
    @else
        <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 recent requests') }}</h5>
                    <button type="button" class="btn btn-sm btn-outline-secondary" wire:click="resetFilters">
                        {{ __('Reset') }}
                    </button>
                </div>
                <div class="card-body">
                    <p class="small text-muted mb-3 mb-md-2">
                        {{ __('Shows requests you submitted, items pending your approval, or requests where you are in the approval chain.') }}
                    </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

    <div class="col-12 mb-3 @if(get_setting('supervisor') == 1 || $isAdmin) col-xl-4 @endif">
        <div class="card h-100">
            <div class="card-header"><h5>My Requests</h5></div>
            <div class="card-body p-1">
                <div class="table-responsive">
                <table class="table table-sm">
                    <thead>
                    <tr>
                        <th>Type</th>
                        <th>Subject</th>
                        <th>Status</th>
                        <th>Current Approver</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($myRequests as $req)
                        <tr>
                            <td>{{ $req->request_type_label }}</td>
                            <td>{{ $req->subject ?: '-' }}</td>
                            <td><span class="ac-badge {{ strtolower($req->status) }}">{{ ucfirst($req->status) }}</span></td>
                            <td>{{ $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>

        @if(get_setting('supervisor') == 1 || $isAdmin)
            <div class="col-12 col-xl-8 mb-3">
            <div class="card h-100 ac-pending-inbox-card">
                <div class="card-header">
                    <h5>{{ $isAdmin ? 'Pending Requests (Admin)' : 'Pending For My Approval' }}</h5>
                </div>
                <div class="card-body p-1">
                    <div class="table-responsive">
                    <table class="table table-sm ac-inbox-table">
                        <thead>
                        <tr>
                            <th>{{ __('Employee') }}</th>
                            <th>{{ __('Department') }}</th>
                            <th>{{ __('Type') }}</th>
                            <th>{{ __('Subject') }}</th>
                            @if($isAdmin)
                                <th>{{ __('Current approver') }}</th>
                            @endif
                            <th>{{ __('Comment') }}</th>
                            <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 class="ac-note">
                                    <input type="text" class="form-control form-control-sm"
                                           wire:model.blur="inboxComments.{{ $item->id }}"
                                           placeholder="{{ __('Note for approve / reject (per row)') }}">
                                </td>
                                <td class="ac-actions">
                                    <button type="button" class="btn btn-sm btn-info"
                                            wire:click="openRequestHistory({{ $item->id }})">
                                        {{ __('Forward trail') }}
                                    </button>
                                    <button type="button" class="btn btn-sm btn-secondary"
                                            wire:click="openApplicationView({{ $item->id }})">
                                        {{ __('Application view') }}
                                    </button>
                                    @if($isAdmin)
                                        <button class="btn btn-sm btn-success" wire:click="adminApprove({{ $item->id }})">Approve</button>
                                        <button class="btn btn-sm btn-warning" wire:click="openForwardAdmin({{ $item->id }})">Forward</button>
                                        <button class="btn btn-sm btn-danger" wire:click="adminReject({{ $item->id }})">Reject</button>
                                    @else
                                        <button class="btn btn-sm btn-success" wire:click="approve({{ $item->id }})">Approve</button>
                                        <button class="btn btn-sm btn-warning" wire:click="openForward({{ $item->id }})">Forward</button>
                                        <button class="btn btn-sm btn-danger" wire:click="reject({{ $item->id }})">Reject</button>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ $isAdmin ? 7 : 6 }}" 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

        @if($isAdmin)
            <div class="col-12">
            <div class="card">
                <div class="card-header"><h5>{{ __('Recent all requests') }}</h5></div>
                <div class="card-body p-1">
                    <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                        <tr>
                            <th>{{ __('Employee') }}</th>
                            <th>{{ __('Department') }}</th>
                            <th>{{ __('Type') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th>{{ __('Current approver') }}</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><span class="ac-badge {{ strtolower($ar->status) }}">{{ ucfirst($ar->status) }}</span></td>
                                <td>{{ $this->employeeLine($ar->currentApprover) }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="ac-empty">No records found.</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                    </div>
                    @if($allRecent->hasPages())
                        <div class="ac-pagination p-2 border-top">{{ $allRecent->links() }}</div>
                    @endif
                </div>
            </div>
            </div>
        @else
            <div class="col-12">
                <div class="card">
                    <div class="card-header"><h5>{{ __('Recent requests') }}</h5></div>
                    <div class="card-body p-1">
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <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-emp-{{ $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>{{ \Illuminate\Support\Str::limit($ar->subject ?: '—', 60) }}</td>
                                        <td><span class="ac-badge {{ strtolower($ar->status) }}">{{ ucfirst($ar->status) }}</span></td>
                                        <td>{{ $this->employeeLine($ar->currentApprover) }}</td>
                                        <td>{{ $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>
        @endif
</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" 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" 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('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>