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

<div class="row mt-3">
    <div class="col-md-5">
        <div class="card">
            <div class="card-header"><h5 class="mb-0">Add / Update Hierarchy Rule</h5></div>
            <div class="card-body">
                @if (session()->has('message'))
                    <div class="alert alert-success">{{ session('message') }}</div>
                @endif
                @if (session()->has('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                @endif
                <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($requestTypes as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Label</label>
                        <input type="text" class="form-control" wire:model="label" placeholder="Line manager">
                    </div>
                    <div class="form-group">
                        <label>Level</label>
                        <input type="number" min="1" class="form-control" wire:model="level">
                    </div>
                    <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>
                    <div class="d-flex" style="gap:8px;">
                        <button class="btn btn-primary" type="submit">
                            {{ $editingId ? 'Update Rule' : 'Save Rule' }}
                        </button>
                        @if($editingId)
                            <button class="btn btn-light" type="button" wire:click="cancelEdit">Cancel</button>
                        @endif
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-md-7">
        <div class="card">
            <div class="card-header">
                <div class="d-flex align-items-center justify-content-between">
                    <h5 class="mb-0">Configured Rules</h5>
                    <div style="min-width: 260px;">
                        <select class="form-control" wire:model.live="filterRequestType">
                            @foreach($requestTypes as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <table class="table table-striped mb-0">
                    <thead>
                    <tr>
                        <th>Level</th>
                        <th>Label</th>
                        <th>Approver</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($rules as $rule)
                        <tr>
                            <td>{{ $rule->level ?? $rule->label }}</td>
                            <td>{{ $rule->stage_name ?: $rule->label }}</td>
                            <td>{{ optional($rule->approver)->name ?? '-' }} ({{ optional($rule->approver)->id ?? '-' }})
                            </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>
                                <button class="btn btn-sm btn-primary" wire:click="editRule({{ $rule->id }})">Edit
                                </button>
                                <button class="btn btn-sm btn-info" wire:click="toggleRule({{ $rule->id }})">Toggle
                                </button>
                                <button class="btn btn-sm btn-danger" wire:click="deleteRule({{ $rule->id }})">Delete
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-3">No hierarchy rules yet.</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </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%' });

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

            // hydrate from Livewire state (hidden wire:model input is always in sync)
            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