@extends('layouts.app')
@section('title', 'Expungement Request — Satu Mimpi Loket')

@push('styles')
    <style>
        .charge-search-wrap input {
            width: 100%;
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 8px 12px;
            font-size: .875rem;
            outline: none;
            background: var(--bg-primary);
            color: var(--text-primary);
        }

        .charge-search-wrap input:focus {
            border-color: var(--accent);
        }

        .charge-list {
            border: 1px solid var(--border);
            border-radius: 6px;
            max-height: 220px;
            overflow-y: auto;
            background: var(--bg-primary);
            padding: 6px;
            margin-top: 6px;
        }

        .charge-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 8px 8px;
            border-radius: 5px;
            cursor: pointer;
        }

        .charge-item:hover {
            background: rgba(88, 101, 242, .1);
        }

        .charge-item input[type=checkbox] {
            margin-top: 3px;
            flex-shrink: 0;
            accent-color: var(--accent);
        }

        .charge-item .cl strong {
            font-size: .8rem;
            color: var(--text-primary);
        }

        .charge-item .cl small {
            color: var(--text-muted);
            font-size: .75rem;
        }

        .charge-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
            min-height: 24px;
        }

        .charge-tag {
            background: var(--accent);
            color: #fff;
            border-radius: 4px;
            padding: 3px 9px;
            font-size: .75rem;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .charge-tag .rm {
            cursor: pointer;
            font-weight: 700;
            opacity: .8;
        }

        .charge-tag .rm:hover {
            opacity: 1;
        }
    </style>
@endpush

@section('content')
    <div style="max-width:720px">
        <a href="{{ route('dashboard') }}" class="btn btn-secondary" style="margin-bottom:20px">
            <i class="bi bi-arrow-left"></i> Kembali
        </a>

        <h1 class="page-title">
            <i class="bi bi-file-earmark-text" style="color:var(--accent)"></i>
            Request for Expungement
        </h1>

        <div class="card"
            style="margin-bottom:16px;padding:14px 18px;background:rgba(88,101,242,.08);border-color:var(--accent)">
            <strong>No. Aplikasi:</strong>
            <code style="color:var(--accent);margin-left:8px">{{ $applicationNo }}</code>
        </div>

        @php $user = auth()->user(); @endphp


        <div class="card">
            <form method="POST" action="{{ route('expungement.store') }}">
                @csrf

                {{-- <div class="form-group">
                    <label class="form-label">No. Insiden (Opsional)</label>
                    <input type="text" name="incident_no" class="form-control" value="{{ old('incident_no') }}"
                        placeholder="Jika tidak ada kosongkan">
                    @error('incident_no')<div class="form-error">{{ $message }}</div>@enderror
                </div> --}}

                <div class="form-group">
                    <label class="form-label">Tujuan Pengajuan *</label>
                    <select name="purpose" class="form-select" required>
                        <option value="">— Pilih Tujuan —</option>
                        @foreach ($purposes as $p)
                            <option value="{{ $p }}" {{ old('purpose') == $p ? 'selected' : '' }}>
                                {{ $p }}</option>
                        @endforeach
                    </select>
                    @error('purpose')
                        <div class="form-error">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Offences --}}

                <hr class="divider">
                <div style="display:flex;gap:10px;justify-content:flex-end">
                    <a href="{{ route('dashboard') }}" class="btn btn-secondary">Batal</a>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-send-fill"></i> Kirim Pengajuan
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function syncExpTags() {
            const tags = document.getElementById('expChargeTags');
            tags.innerHTML = '';
            document.querySelectorAll('.exp-charge-cb:checked').forEach(cb => {
                const tag = document.createElement('span');
                tag.className = 'charge-tag';
                tag.innerHTML = cb.dataset.label + ' <span class="rm" data-id="' + cb.value + '">×</span>';
                tag.querySelector('.rm').onclick = function() {
                    document.querySelector('.exp-charge-cb[value="' + this.dataset.id + '"]').checked = false;
                    syncExpTags();
                };
                tags.appendChild(tag);
            });
        }
        document.querySelectorAll('.exp-charge-cb').forEach(cb => cb.addEventListener('change', syncExpTags));
        document.getElementById('expChargeSearch').addEventListener('input', function() {
            const q = this.value.toLowerCase();
            document.querySelectorAll('#expChargeList .charge-item').forEach(item => {
                item.style.display = item.dataset.search.includes(q) ? '' : 'none';
            });
        });
        syncExpTags();
    </script>
@endpush