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

@push('css')
<style>
    .ah-page .ah-field-hint { display: block; color: #6c757d; font-size: 0.78rem; margin-top: 4px; line-height: 1.35; }
    .ah-page .ah-mode-bar {
        background: linear-gradient(90deg, #eef4ff 0%, #f8fafc 100%);
        border: 1px solid #d7e3f4;
        border-radius: 10px;
        padding: 14px 16px;
    }
    .ah-page .ah-guide .card-header { cursor: pointer; user-select: none; }
    .ah-page .ah-filters {
        background: #f8f9fb;
        border-bottom: 1px solid #e9ecef;
        padding: 12px 16px;
    }
    .ah-page .ah-filters .form-control { min-width: 160px; }
    .ah-page .ah-empty {
        padding: 48px 20px;
        text-align: center;
        color: #6c757d;
    }
    .ah-page .ah-empty .ah-empty-icon {
        width: 56px; height: 56px; margin: 0 auto 12px;
        border-radius: 50%; background: #eef4ff; color: #3b7ddd;
        display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
    }
    .ah-page .table td, .ah-page .table th { vertical-align: middle; }
    .ah-page .ah-actions .btn { margin: 2px; }
    .ah-page .badge-kind { font-weight: 500; }
</style>
@endpush

<div class="container-fluid ah-page py-3">
    <div class="d-flex flex-wrap justify-content-between align-items-start mb-3">
        <div>
            <h4 class="mb-1">{{ __('Hierarchy Setup') }}</h4>
            <p class="text-muted mb-0 small">{{ __('Define who approves each request type, in which order.') }}</p>
        </div>
        <div class="d-flex flex-wrap" style="gap:8px;">
            <a href="{{ route('admin.user_manual', ['section' => 'approval-hierarchy']) }}" class="btn btn-sm btn-outline-info">
                <i class="mdi mdi-book-open-page-variant"></i> {{ __('User Manual') }}
            </a>
            <a href="{{ route('approval.hierarchy.settings') }}" class="btn btn-sm btn-outline-primary">{{ __('Workflow settings') }}</a>
            <a href="{{ route('approval.center') }}" class="btn btn-sm btn-primary">{{ __('Approval Center') }}</a>
        </div>
    </div>

    <div class="ah-mode-bar mb-3 d-flex flex-wrap justify-content-between align-items-center" style="gap:10px;">
        <div>
            <span class="badge badge-primary mr-1">{{ __('Mode') }}</span>
            <strong>{{ $scopeLabel }}</strong>
            <span class="text-muted small d-block mt-1">
                {{ __('Change scope in Workflow Settings. Empty Department/Branch on a rule = Global fallback.') }}
            </span>
        </div>
        <a href="{{ route('website.settings') }}#feaures" class="btn btn-sm btn-light border">{{ __('Features') }}</a>
    </div>

    <div class="card ah-guide mb-3">
        <div class="card-header py-2 d-flex justify-content-between align-items-center" data-toggle="collapse" data-target="#ahQuickGuide" aria-expanded="false">
            <strong><i class="mdi mdi-help-circle-outline text-info"></i> {{ __('Quick guide — what do these fields mean?') }}</strong>
            <span class="text-muted small">{{ __('Click to expand') }}</span>
        </div>
        <div id="ahQuickGuide" class="collapse">
            <div class="card-body small">
                <div class="row">
                    <div class="col-md-4 mb-2">
                        <strong>{{ __('Request Type') }}</strong>
                        <p class="mb-0 text-muted">{{ __('Which module uses this chain (Leave, PF Loan, Separation…).') }}</p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <strong>{{ __('Level + Stage label') }}</strong>
                        <p class="mb-0 text-muted">{{ __('Level 1 acts first. Label is the name shown on the timeline (e.g. Line manager).') }}</p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <strong>{{ __('Approver type') }}</strong>
                        <p class="mb-0 text-muted">
                            {{ __('Fixed user = named person. Direct supervisor = requester’s boss. Department head = auto from same dept.') }}
                        </p>
                    </div>
                </div>
                <div class="alert alert-light border mb-0 mt-2">
                    <strong>{{ __('Example') }}:</strong>
                    {{ __('Leave · Finance · L1 Direct supervisor · L2 Fixed user (HR). Finance staff leave goes to their supervisor, then HR.') }}
                    <a href="{{ route('admin.user_manual', ['section' => 'approval-hierarchy']) }}">{{ __('Full guide') }} →</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-4 col-lg-5 mb-3">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ $editingId ? __('Update Hierarchy Rule') : __('Add Hierarchy Rule') }}</h5>
                    @if($editingId)
                        <span class="badge badge-warning">{{ __('Editing') }}</span>
                    @endif
                </div>
                <div class="card-body">
                    @if (session()->has('message'))
                        <div class="alert alert-success py-2">{{ session('message') }}</div>
                    @endif
                    @if (session()->has('error'))
                        <div class="alert alert-danger py-2">{{ session('error') }}</div>
                    @endif
                    @error('requestType') <div class="alert alert-danger py-2">{{ $message }}</div> @enderror
                    @error('label') <div class="alert alert-danger py-2">{{ $message }}</div> @enderror
                    @error('approverId') <div class="alert alert-danger py-2">{{ $message }}</div> @enderror

                    <form wire:submit.prevent="addRule">
                        <input type="hidden" id="approval_approver_id_hidden" wire:model="approverId">

                        <div class="form-group">
                            <label>{{ __('Request Type') }}</label>
                            <select class="form-control" wire:model="requestType">
                                @foreach($requestTypeGroups as $group => $types)
                                    <optgroup label="{{ $group }}">
                                        @foreach($types as $key => $optLabel)
                                            <option value="{{ $key }}">{{ $optLabel }}</option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                            <span class="ah-field-hint">{{ __('Pick the application this approval chain belongs to.') }}</span>
                        </div>

                        @if($usesDepartment)
                            <div class="form-group">
                                <label>{{ __('Department') }}</label>
                                <select class="form-control" wire:model="departmentId">
                                    <option value="">{{ __('Global (all departments)') }}</option>
                                    @foreach($departments as $dept)
                                        <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                                    @endforeach
                                </select>
                                <span class="ah-field-hint">{{ __('Leave Global to use as company-wide fallback for this request type.') }}</span>
                            </div>
                        @endif

                        @if($usesBranch)
                            <div class="form-group">
                                <label>{{ __('Branch') }}</label>
                                <select class="form-control" wire:model="warehouseId">
                                    <option value="">{{ __('Any / Global branch') }}</option>
                                    @foreach($warehouses as $wh)
                                        <option value="{{ $wh->id }}">{{ $wh->name }}</option>
                                    @endforeach
                                </select>
                                <span class="ah-field-hint">{{ __('Optional. Narrow the rule to one branch/warehouse.') }}</span>
                            </div>
                        @endif

                        <div class="form-row">
                            <div class="form-group col-8">
                                <label>{{ __('Stage label') }}</label>
                                <input type="text" class="form-control" wire:model="label" placeholder="{{ __('e.g. Line manager') }}">
                                <span class="ah-field-hint">{{ __('Name shown on the approval timeline.') }}</span>
                            </div>
                            <div class="form-group col-4">
                                <label>{{ __('Level') }}</label>
                                <input type="number" min="1" max="20" class="form-control" wire:model="level">
                                <span class="ah-field-hint">{{ __('1 = first') }}</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>{{ __('Approver type') }}</label>
                            <select class="form-control" wire:model.live="approverKind">
                                <option value="fixed_user">{{ __('Fixed user') }} — {{ __('pick a person') }}</option>
                                <option value="direct_supervisor">{{ __('Direct supervisor') }} — {{ __('requester’s boss') }}</option>
                                <option value="department_head">{{ __('Department head') }} — {{ __('auto from dept') }}</option>
                            </select>
                            <span class="ah-field-hint">
                                @if($approverKind === 'fixed_user')
                                    {{ __('Same named officer always handles this stage.') }}
                                @elseif($approverKind === 'direct_supervisor')
                                    {{ __('Resolved from the employee’s supervisor at request time.') }}
                                @else
                                    {{ __('Resolved from designation / seniority in the same department.') }}
                                @endif
                            </span>
                        </div>

                        @if($approverKind === 'fixed_user')
                            <div class="form-group">
                                <label>{{ __('Approver') }}</label>
                                <div wire:ignore>
                                    <select class="form-control select2" id="approval_approver_id">
                                        <option value="">{{ __('Select approver') }}</option>
                                        @foreach($approvers as $approver)
                                            <option value="{{ $approver->id }}">{{ $approver->name }} ({{ $approver->id }})</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        @endif

                        <div class="d-flex flex-wrap" style="gap:8px;">
                            <button class="btn btn-primary" type="submit" wire:loading.attr="disabled">
                                <span wire:loading.remove wire:target="addRule">{{ $editingId ? __('Update Rule') : __('Save Rule') }}</span>
                                <span wire:loading wire:target="addRule">{{ __('Saving…') }}</span>
                            </button>
                            @if($editingId)
                                <button class="btn btn-light border" type="button" wire:click="cancelEdit">{{ __('Cancel') }}</button>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-xl-8 col-lg-7 mb-3">
            <div class="card h-100">
                <div class="card-header py-3">
                    <h5 class="mb-0">{{ __('Configured Rules') }}</h5>
                </div>
                <div class="ah-filters">
                    <div class="form-row align-items-end">
                        <div class="form-group col-md-4 mb-2 mb-md-0">
                            <label class="small text-muted mb-1">{{ __('Request type') }}</label>
                            <select class="form-control form-control-sm" wire:model.live="filterRequestType">
                                @foreach($requestTypeGroups as $group => $types)
                                    <optgroup label="{{ $group }}">
                                        @foreach($types as $key => $optLabel)
                                            <option value="{{ $key }}">{{ $optLabel }}</option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                        </div>
                        @if($usesDepartment)
                            <div class="form-group col-md-4 mb-2 mb-md-0">
                                <label class="small text-muted mb-1">{{ __('Department') }}</label>
                                <select class="form-control form-control-sm" wire:model.live="filterDepartmentId">
                                    <option value="">{{ __('All departments') }}</option>
                                    <option value="0">{{ __('Global only') }}</option>
                                    @foreach($departments as $dept)
                                        <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif
                        @if($usesBranch)
                            <div class="form-group col-md-4 mb-0">
                                <label class="small text-muted mb-1">{{ __('Branch') }}</label>
                                <select class="form-control form-control-sm" wire:model.live="filterWarehouseId">
                                    <option value="">{{ __('All branches') }}</option>
                                    <option value="0">{{ __('Global branch only') }}</option>
                                    @foreach($warehouses as $wh)
                                        <option value="{{ $wh->id }}">{{ $wh->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="thead-light">
                            <tr>
                                <th style="width:70px;">{{ __('Level') }}</th>
                                <th>{{ __('Stage') }}</th>
                                @if($usesDepartment)<th>{{ __('Department') }}</th>@endif
                                @if($usesBranch)<th>{{ __('Branch') }}</th>@endif
                                <th>{{ __('Approver') }}</th>
                                <th style="width:90px;">{{ __('Status') }}</th>
                                <th style="width:180px;">{{ __('Action') }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($rules as $rule)
                                <tr>
                                    <td><span class="badge badge-light border">{{ $rule->level ?? $rule->label }}</span></td>
                                    <td>{{ $rule->stage_name ?: $rule->label }}</td>
                                    @if($usesDepartment)
                                        <td>
                                            @if($rule->department)
                                                {{ $rule->department->name }}
                                            @else
                                                <span class="text-muted">{{ __('Global') }}</span>
                                            @endif
                                        </td>
                                    @endif
                                    @if($usesBranch)
                                        <td>
                                            @if($rule->warehouse)
                                                {{ $rule->warehouse->name }}
                                            @else
                                                <span class="text-muted">{{ __('Any') }}</span>
                                            @endif
                                        </td>
                                    @endif
                                    <td>
                                        @if(($rule->approver_kind ?? 'fixed_user') === 'direct_supervisor')
                                            <span class="badge badge-info badge-kind">{{ __('Direct supervisor') }}</span>
                                        @elseif(($rule->approver_kind ?? 'fixed_user') === 'department_head')
                                            <span class="badge badge-info badge-kind">{{ __('Department head') }}</span>
                                        @else
                                            {{ optional($rule->approver)->name ?? '—' }}
                                            @if(optional($rule->approver)->id)
                                                <span class="text-muted small">({{ $rule->approver->id }})</span>
                                            @endif
                                        @endif
                                    </td>
                                    <td>
                                        @if((int) $rule->is_active === 1)
                                            <span class="badge badge-success">{{ __('Active') }}</span>
                                        @else
                                            <span class="badge badge-secondary">{{ __('Inactive') }}</span>
                                        @endif
                                    </td>
                                    <td class="ah-actions">
                                        <button class="btn btn-sm btn-outline-primary" wire:click="editRule({{ $rule->id }})">{{ __('Edit') }}</button>
                                        <button class="btn btn-sm btn-outline-secondary" wire:click="toggleRule({{ $rule->id }})">{{ __('Toggle') }}</button>
                                        <button class="btn btn-sm btn-outline-danger"
                                                wire:click="deleteRule({{ $rule->id }})"
                                                wire:confirm="{{ __('Delete this rule?') }}">{{ __('Delete') }}</button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="{{ 5 + ($usesDepartment ? 1 : 0) + ($usesBranch ? 1 : 0) }}">
                                        <div class="ah-empty">
                                            <div class="ah-empty-icon"><i class="mdi mdi-sitemap"></i></div>
                                            <div class="font-weight-bold mb-1">{{ __('No hierarchy rules yet') }}</div>
                                            <p class="mb-2 small">{{ __('Add Level 1 for a request type on the left. Example: Leave → Line manager → Fixed user.') }}</p>
                                            <a href="{{ route('admin.user_manual', ['section' => 'approval-hierarchy']) }}" class="btn btn-sm btn-outline-info">{{ __('Read the guide') }}</a>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section('script')
    <script>
        function initApproverSelect2() {
            var $el = $('#approval_approver_id');
            if (!$el.length) return;

            if ($el.hasClass('select2-hidden-accessible')) {
                $el.off('change.approver');
                $el.select2('destroy');
            }

            $el.select2({ width: '100%', placeholder: @json(__('Select approver')) });

            $el.on('change.approver', function () {
                var val = $(this).val();
                @this.set('approverId', val ? parseInt(val, 10) : null);
            });

            var current = ($('#approval_approver_id_hidden').val() || '').toString();
            if (current) $el.val(current).trigger('change.select2');
        }

        document.addEventListener('livewire:init', () => {
            initApproverSelect2();

            Livewire.hook('message.processed', () => {
                initApproverSelect2();
            });

            Livewire.on('approverCleared', () => {
                $('#approval_approver_id').val('').trigger('change.select2');
            });

            Livewire.on('approverHydrate', (payload) => {
                var id = '';
                if (payload && typeof payload === 'object' && payload.id) id = String(payload.id);
                else if (payload) id = String(payload);
                $('#approval_approver_id').val(id).trigger('change.select2');
            });
        });
    </script>
@endsection