@extends('layouts.app')
@section('title', 'Arrest Warrant 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; }
.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; }

/* Photo upload */
.photo-upload-wrap {
    display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
.photo-preview-box {
    width:120px; height:160px; /* 3:4 ratio */
    border:2px dashed var(--border); border-radius:8px;
    overflow:hidden; display:flex; align-items:center; justify-content:center;
    background:var(--bg-secondary); position:relative; cursor:pointer;
    transition:border-color .2s;
}
.photo-preview-box:hover { border-color:var(--accent); }
.photo-preview-box img { width:100%; height:100%; object-fit:cover; }
.photo-preview-box .photo-placeholder {
    display:flex; flex-direction:column; align-items:center; gap:6px;
    color:var(--text-muted); font-size:.75rem; text-align:center; padding:10px;
}
.photo-preview-box .photo-placeholder i { font-size:2rem; }
.photo-hint { font-size:.75rem; color:var(--text-muted); }
</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-person-fill-exclamation" style="color:var(--accent)"></i>
        Request for Arrest Warrant
    </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>

    <div class="card">
        <form method="POST" action="{{ route('arrest-warrant.store') }}" enctype="multipart/form-data">
            @csrf

            {{-- CID No: kosong, placeholder saja --}}
            <div class="form-group">
                <label class="form-label">CID No. *</label>
                <input type="text" name="cid_no" class="form-control"
                    value="{{ old('cid_no') }}"
                    placeholder="CID-2026-021" required>
                <div class="form-hint">Nomor CID atau ID pemohon</div>
                @error('cid_no')<div class="form-error">{{ $message }}</div>@enderror
            </div>

            {{-- Tersangka --}}
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
                <div class="form-group">
                    <label class="form-label">Nama Tersangka *</label>
                    <input type="text" name="suspect_name" class="form-control"
                        value="{{ old('suspect_name') }}" placeholder="Nama lengkap tersangka" required>
                    @error('suspect_name')<div class="form-error">{{ $message }}</div>@enderror
                </div>
                <div class="form-group">
                    <label class="form-label">Tanggal Lahir Tersangka</label>
                    <input type="date" name="suspect_dob" class="form-control"
                        value="{{ old('suspect_dob') }}">
                    @error('suspect_dob')<div class="form-error">{{ $message }}</div>@enderror
                </div>
            </div>

            {{-- Offences --}}
            <div class="form-group">
                <label class="form-label">Offence(s) Under Investigation *</label>
                <div class="charge-tags" id="awrChargeTags"></div>
                <div class="charge-search-wrap">
                    <input type="text" id="awrChargeSearch" placeholder="Cari kode, pasal, atau nama pelanggaran…" autocomplete="off">
                </div>
                <div class="charge-list" id="awrChargeList">
                    @foreach($charges as $charge)
                    <label class="charge-item"
                        data-search="{{ strtolower($charge->code . ' ' . $charge->section . ' ' . $charge->name) }}">
                        <input type="checkbox" name="charge_ids[]" value="{{ $charge->id }}"
                            class="awr-charge-cb"
                            {{ in_array($charge->id, old('charge_ids', [])) ? 'checked' : '' }}
                            data-label="{{ $charge->code }} — {{ $charge->section }} — {{ $charge->name }}">
                        <span class="cl">
                            <strong>{{ $charge->code }} — {{ $charge->section }}</strong> — {{ $charge->name }}<br>
                            <small>{{ Str::limit($charge->description, 160) }}</small>
                        </span>
                    </label>
                    @endforeach
                </div>
                @error('charge_ids')<div class="form-error">{{ $message }}</div>@enderror
            </div>

            {{-- Link Report --}}
            <div class="form-group">
                <label class="form-label">Link Investigation Report</label>
                <input type="url" name="link_investigation_report" class="form-control"
                    value="{{ old('link_investigation_report') }}" placeholder="https://docs.google.com/...">
                <div class="form-hint">Link ke laporan investigasi sebagai dasar pengajuan</div>
                @error('link_investigation_report')<div class="form-error">{{ $message }}</div>@enderror
            </div>

            {{-- Photo Upload --}}
            <div class="form-group">
                <label class="form-label">Foto Tersangka <span style="color:var(--text-muted);font-weight:400">(opsional, rasio 3:4)</span></label>
                <div class="photo-upload-wrap">
                    <div class="photo-preview-box" id="photoPreviewBox" onclick="document.getElementById('photoInput').click()">
                        <div class="photo-placeholder" id="photoPlaceholder">
                            <i class="bi bi-person-bounding-box"></i>
                            <span>Klik untuk<br>upload foto</span>
                        </div>
                        <img id="photoPreviewImg" src="" alt="Preview" style="display:none">
                    </div>
                    <input type="file" id="photoInput" name="photo" accept="image/jpeg,image/png,image/webp"
                        style="display:none">
                    <div class="photo-hint">
                        Format: JPG, PNG, WebP &bull; Maks. 5 MB &bull; Rasio 3:4 disarankan<br>
                        Jika tidak diupload, foto dummy akan digunakan secara otomatis.
                    </div>
                    <div id="photoSizeError" style="color:#e74c3c;font-size:.8rem;display:none">
                        <i class="bi bi-exclamation-triangle-fill"></i> Ukuran file melebihi 5 MB.
                    </div>
                </div>
                @error('photo')<div class="form-error">{{ $message }}</div>@enderror
            </div>

            <div class="alert alert-warning">
                <i class="bi bi-info-circle-fill"></i>
                <strong>Prosecutor's Name</strong> dan <strong>Judge's Name</strong> akan ditentukan oleh pegawai DOJ.
            </div>

            <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 syncAwrTags() {
    const tags = document.getElementById('awrChargeTags');
    tags.innerHTML = '';
    document.querySelectorAll('.awr-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('.awr-charge-cb[value="' + this.dataset.id + '"]').checked = false;
            syncAwrTags();
        };
        tags.appendChild(tag);
    });
}
document.querySelectorAll('.awr-charge-cb').forEach(cb => cb.addEventListener('change', syncAwrTags));
document.getElementById('awrChargeSearch').addEventListener('input', function() {
    const q = this.value.toLowerCase();
    document.querySelectorAll('#awrChargeList .charge-item').forEach(item => {
        item.style.display = item.dataset.search.includes(q) ? '' : 'none';
    });
});
syncAwrTags();

// Photo upload preview
document.getElementById('photoInput').addEventListener('change', function () {
    const file = this.files[0];
    const maxBytes = 5 * 1024 * 1024;
    const sizeErr  = document.getElementById('photoSizeError');
    const img      = document.getElementById('photoPreviewImg');
    const placeholder = document.getElementById('photoPlaceholder');

    if (!file) return;

    if (file.size > maxBytes) {
        sizeErr.style.display = 'flex';
        this.value = '';
        return;
    }
    sizeErr.style.display = 'none';

    const reader = new FileReader();
    reader.onload = function (e) {
        img.src = e.target.result;
        img.style.display = 'block';
        placeholder.style.display = 'none';
    };
    reader.readAsDataURL(file);
});
</script>
@endpush