@extends('layouts.app')
@section('title', 'Edit Arrest Warrant — 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; 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;
    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('arrest-warrant.show', $record->id) }}" class="btn btn-secondary" style="margin-bottom:20px">
        <i class="bi bi-arrow-left"></i> Kembali ke Detail
    </a>

    <h1 class="page-title">
        <i class="bi bi-pencil-square" style="color:var(--accent)"></i>
        Edit Arrest Warrant Request
    </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">{{ $record->application_no }}</code>
        <span style="margin-left:12px;font-size:.78rem;color:var(--text-muted)">Status: Pending — dapat diedit</span>
    </div>

    <div class="card">
        <form method="POST" action="{{ route('arrest-warrant.update', $record->id) }}" enctype="multipart/form-data">
            @csrf
            @method('PATCH')

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

            <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', $record->suspect_name) }}" 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', $record->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>
                @php $selectedIds = old('charge_ids', $record->charges->pluck('id')->toArray()); @endphp
                <div class="charge-tags" id="editAwrTags"></div>
                <div class="charge-search-wrap">
                    <input type="text" id="editAwrSearch" placeholder="Cari kode, pasal, atau nama pelanggaran…" autocomplete="off">
                </div>
                <div class="charge-list" id="editAwrList">
                    @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="edit-awr-cb"
                            {{ in_array($charge->id, $selectedIds) ? '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>

            <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', $record->link_investigation_report) }}"
                    placeholder="https://docs.google.com/...">
                @error('link_investigation_report')<div class="form-error">{{ $message }}</div>@enderror
            </div>

            {{-- Foto Tersangka --}}
            <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="editPhotoPreviewBox"
                        onclick="document.getElementById('editPhotoInput').click()">
                        @if ($record->photo_url)
                            <img id="editPhotoPreviewImg" src="{{ $record->photo_url }}" alt="Foto Tersangka">
                            <div class="photo-placeholder" id="editPhotoPlaceholder" style="display:none">
                                <i class="bi bi-person-bounding-box"></i>
                                <span>Klik untuk<br>ganti foto</span>
                            </div>
                        @else
                            <div class="photo-placeholder" id="editPhotoPlaceholder">
                                <i class="bi bi-person-bounding-box"></i>
                                <span>Klik untuk<br>upload foto</span>
                            </div>
                            <img id="editPhotoPreviewImg" src="" alt="Preview" style="display:none">
                        @endif
                    </div>
                    <input type="file" id="editPhotoInput" 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>
                        Kosongkan jika tidak ingin mengubah foto saat ini.
                    </div>
                    <div id="editPhotoSizeError" 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-lock-fill"></i>
                <strong>Prosecutor's Name</strong> dan <strong>Judge's Name</strong> hanya ditentukan oleh pegawai DOJ.
            </div>

            <hr class="divider">
            <div style="display:flex;gap:10px;justify-content:flex-end">
                <a href="{{ route('arrest-warrant.show', $record->id) }}" class="btn btn-secondary">Batal</a>
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-circle-fill"></i> Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

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

// Photo upload preview
document.getElementById('editPhotoInput').addEventListener('change', function() {
    const file = this.files[0];
    const maxBytes = 5 * 1024 * 1024;
    const sizeErr = document.getElementById('editPhotoSizeError');
    const img = document.getElementById('editPhotoPreviewImg');
    const placeholder = document.getElementById('editPhotoPlaceholder');

    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