@extends('layouts.app')
@section('title', 'Dokumen KTP — Satu Mimpi Loket')

@section('content')
    <style>
        .ktp-preview {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 8px;
            background: #f9f9f9;
            max-width: 300px;
            margin-top: 10px;
        }

        .ktp-thumbnail {
            max-width: 100%;
            max-height: 200px;
            width: auto;
            height: auto;
            border-radius: 6px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .ktp-thumbnail:hover {
            transform: scale(1.02);
        }

        .ktp-modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            cursor: pointer;
        }

        .ktp-modal-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 90%;
            max-height: 90%;
            border-radius: 8px;
        }

        .ktp-modal-close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }

        .file-info {
            font-size: 0.85rem;
            color: #666;
            margin-top: 5px;
        }
    </style>

    <div style="max-width:560px;{{ $isNew ? 'margin:0 auto' : '' }}">

        <a href="{{ route('profile.edit') }}" class="btn btn-secondary" style="margin-bottom:20px">
            <i class="bi bi-arrow-left"></i> Kembali ke Profil
        </a>
        <h1 class="page-title">
            <i class="bi bi-card-heading" style="color:var(--accent)"></i>
            Dokumen KTP
        </h1>

        {{-- Step indicator --}}
        @include('profile.partials.steps', ['currentStep' => 2])

        <div class="card">
            <form method="POST" action="{{ route('profile.save.step2') }}" enctype="multipart/form-data">
                @csrf
                @method('PATCH')

                <div class="form-group">
                    <label class="form-label">NIK (KTP SATU MIMPI) *</label>
                    <input type="text" name="nik" class="form-control" value="{{ old('nik', $user->nik) }}"
                        placeholder="Nomor Induk Kependudukan Satu Mimpi" maxlength="16" inputmode="text" required>
                    <div class="form-hint">Digit angka & text sesuai KTP / ID karakter</div>
                    @error('nik')
                        <div class="form-error">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label class="form-label">Upload File KTP <span style="color:var(--text-muted);font-weight:400">(opsional)</span></label>
                    <input type="file" name="ktp_file" class="form-control" accept="image/*,.pdf" id="ktpFileInput"
                        onchange="previewFile()">
                    <div class="form-hint">Format: JPG, PNG, PDF | Maksimal 2MB. Wajib diisi untuk layanan Pergantian Nama, Pernikahan, KK, Izin Kegiatan, Tanah, dan Pembelian Rumah.</div>
                    <div id="ktpFileInfo" class="file-info"></div>
                    <div id="ktpNewPreview" class="ktp-preview" style="display:none">
                        <img id="ktpPreviewImg" class="ktp-thumbnail" onclick="openModal()">
                    </div>
                    @if ($user->ktp_file)
                        <div class="form-text mt-2" style="margin-top:10px">
                            <i class="bi bi-file-earmark-text"></i>
                            File saat ini: <a href="{{ $user->ktp_file }}" target="_blank" style="color:var(--accent)">Lihat
                                File KTP</a>
                            @if (Str::contains($user->ktp_file, ['jpg', 'jpeg', 'png', 'gif', 'webp']) || !Str::contains($user->ktp_file, '.pdf'))
                                <div class="ktp-preview" style="margin-top:8px">
                                    <img src="{{ $user->ktp_file }}" alt="Preview KTP" class="ktp-thumbnail"
                                        onclick="openModalUrl('{{ $user->ktp_file }}')">
                                </div>
                            @endif
                        </div>
                    @endif
                    @error('ktp_file')
                        <div class="form-error">{{ $message }}</div>
                    @enderror
                </div>

                <hr class="divider">

                <div style="display:flex;gap:10px;justify-content:space-between">
                    <a href="{{ route('profile.edit') }}" class="btn btn-secondary">
                        <i class="bi bi-arrow-left"></i> Kembali
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-circle-fill"></i> Simpan KTP
                    </button>
                </div>
            </form>
        </div>

    </div>

    <!-- Modal -->
    <div id="imageModal" class="ktp-modal" onclick="closeModal()">
        <span class="ktp-modal-close" onclick="closeModal()">&times;</span>
        <img id="modalImg" class="ktp-modal-content">
    </div>

    <script>
        function previewFile() {
            const fileInput = document.getElementById('ktpFileInput');
            const preview = document.getElementById('ktpNewPreview');
            const previewImg = document.getElementById('ktpPreviewImg');
            const fileInfo = document.getElementById('ktpFileInfo');
            const file = fileInput.files[0];

            if (file) {
                const maxSize = 2 * 1024 * 1024;
                if (file.size > maxSize) {
                    fileInfo.innerHTML =
                        '<i class="bi bi-exclamation-triangle text-danger"></i> <span class="text-danger">File terlalu besar! Maksimal 2MB.</span>';
                    fileInput.value = '';
                    preview.style.display = 'none';
                    return;
                }
                const fileSize = (file.size / 1024 / 1024).toFixed(2);
                fileInfo.innerHTML = `<i class="bi bi-check-circle text-success"></i> ${file.name} (${fileSize} MB)`;

                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewImg.src = e.target.result;
                        preview.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                } else {
                    preview.style.display = 'none';
                    fileInfo.innerHTML += ' <i class="bi bi-file-earmark-pdf text-info"></i> PDF file';
                }
            } else {
                preview.style.display = 'none';
                fileInfo.innerHTML = '';
            }
        }

        function openModal() {
            const img = document.getElementById('ktpPreviewImg');
            if (img.src) {
                document.getElementById('imageModal').style.display = 'block';
                document.getElementById('modalImg').src = img.src;
            }
        }

        function openModalUrl(url) {
            document.getElementById('imageModal').style.display = 'block';
            document.getElementById('modalImg').src = url;
        }

        function closeModal() {
            document.getElementById('imageModal').style.display = 'none';
        }

        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') closeModal();
        });
    </script>
@endsection