@extends('layouts.app')
@section('title', 'Edit Search 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('search-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 Search 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('search-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>

                {{-- 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="editSwrTags"></div>
                    <div class="charge-search-wrap">
                        <input type="text" id="editSwrSearch" placeholder="Cari kode, pasal, atau nama pelanggaran…"
                            autocomplete="off">
                    </div>
                    <div class="charge-list" id="editSwrList">
                        @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-swr-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">Premises / Tempat yang Digeledah *</label>
                    <textarea name="premises" class="form-control" rows="3" required>{{ old('premises', $record->premises) }}</textarea>
                    @error('premises')
                        <div class="form-error">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label class="form-label">Person(s) in Occupation / Penghuni Lokasi</label>
                    <input type="text" name="person_in_occupation" class="form-control"
                        value="{{ old('person_in_occupation', $record->person_in_occupation) }}"
                        placeholder="Jika diketahui">
                    @error('person_in_occupation')
                        <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 Suspect --}}
                <div class="form-group">
                    <label class="form-label">Foto Suspect <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 Suspect">
                                <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('search-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 syncEditSwrTags() {
            const tags = document.getElementById('editSwrTags');
            tags.innerHTML = '';
            document.querySelectorAll('.edit-swr-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-swr-cb[value="' + this.dataset.id + '"]').checked = false;
                    syncEditSwrTags();
                };
                tags.appendChild(tag);
            });
        }
        document.querySelectorAll('.edit-swr-cb').forEach(cb => cb.addEventListener('change', syncEditSwrTags));
        document.getElementById('editSwrSearch').addEventListener('input', function() {
            const q = this.value.toLowerCase();
            document.querySelectorAll('#editSwrList .charge-item').forEach(item => {
                item.style.display = item.dataset.search.includes(q) ? '' : 'none';
            });
        });
        syncEditSwrTags();

        // 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