@php
    $fieldId  = 'upload_' . $field . '_' . uniqid();
    $camId    = 'cam_' . $field . '_' . uniqid();
    $inputName = $multiple ? "{$field}[]" : $field;
@endphp

<div class="upload-field" x-data="uploadField('{{ $field }}', {{ json_encode($existing->isEmpty() ? [] : $existing->map(fn($d) => ['id'=>$d->id,'name'=>$d->original_name,'size'=>$d->file_size])->values()) }})">
    <label class="form-label {{ $required ? 'required' : '' }}">{{ $label }}</label>

    {{-- Existing files --}}
    @if($existing->count())
    <div class="mb-2">
        @foreach($existing as $doc)
        <div class="d-flex align-items-center gap-2 mb-1 p-2 border rounded-2 bg-light">
            @if($doc->isImage())
                <img src="{{ $doc->url }}" alt="" style="width:40px;height:40px;object-fit:cover;border-radius:4px;">
            @else
                <i class="bi bi-file-earmark-pdf text-danger fs-4"></i>
            @endif
            <div class="flex-fill overflow-hidden">
                <div class="text-truncate" style="font-size:.8rem;max-width:200px;">{{ $doc->original_name }}</div>
                <div class="text-muted" style="font-size:.72rem;">{{ number_format($doc->file_size / 1024, 0) }} KB</div>
            </div>
            <button type="button" class="btn btn-sm btn-outline-danger py-0 px-1"
                    onclick="deleteDoc('{{ $application->id }}', '{{ $doc->id }}')">
                <i class="bi bi-trash"></i>
            </button>
        </div>
        @endforeach
    </div>
    @endif

    {{-- Drop Zone --}}
    <div class="upload-dropzone border-2 border-dashed rounded-2 p-4 text-center"
         :class="dragging ? 'border-primary bg-primary bg-opacity-10' : 'border-secondary-subtle'"
         style="cursor:pointer;transition:all .2s;min-height:120px;"
         @dragover.prevent="dragging = true"
         @dragleave.prevent="dragging = false"
         @drop.prevent="handleDrop($event)"
         @click="$refs.fileInput.click()">

        <i class="bi bi-cloud-upload fs-3 text-secondary"></i>
        <div class="mt-2 text-muted" style="font-size:.85rem;">
            <span class="d-none d-md-inline">Drag & drop atau </span>
            <span class="text-primary fw-semibold">pilih file</span>
        </div>
        <div class="text-muted mt-1" style="font-size:.75rem;">{{ $hint }}</div>

        <input type="file" name="{{ $inputName }}"
               id="{{ $fieldId }}" x-ref="fileInput"
               accept="{{ $accept }}"
               class="@error($field) is-invalid @enderror"
               @if($multiple) multiple @endif
               @change="handleFiles($event)"
               style="display:none;">
    </div>

    {{-- Tombol Ambil Foto --}}
    <button type="button"
            class="btn btn-outline-secondary w-100 mt-2"
            style="font-size:.85rem;"
            @click="openCamera()">
        <i class="bi bi-camera-fill me-2"></i>Ambil Foto
    </button>

    {{-- Preview list file baru --}}
    <template x-if="files.length">
        <div class="mt-2">
            <template x-for="(f, i) in files" :key="i">
                <div class="d-flex align-items-center gap-2 mb-1 p-2 border rounded-2">
                    <template x-if="f.preview">
                        <img :src="f.preview" style="width:40px;height:40px;object-fit:cover;border-radius:4px;">
                    </template>
                    <template x-if="!f.preview">
                        <i class="bi bi-file-earmark text-primary"></i>
                    </template>
                    <div class="flex-fill overflow-hidden">
                        <div class="text-truncate" x-text="f.name" style="font-size:.82rem;"></div>
                        <div class="text-muted" x-text="(f.size/1024).toFixed(0) + ' KB'" style="font-size:.72rem;"></div>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-1"
                            @click="removeFile(i)">
                        <i class="bi bi-x"></i>
                    </button>
                </div>
            </template>
        </div>
    </template>

    @error($field)
        <div class="text-danger mt-1" style="font-size:.875rem;">{{ $message }}</div>
    @enderror

    {{-- ── Camera Modal (Full Screen) ──────────────────────── --}}
    <div x-show="cameraOpen"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         style="display:none;position:fixed;inset:0;z-index:9999;background:#000;"
         @keydown.escape.window="closeCamera()">

        {{-- CAMERA VIEW --}}
        <div x-show="camState === 'live'" style="position:absolute;inset:0;">
            {{-- Video fills entire screen --}}
            <video x-ref="video_{{ $field }}"
                   autoplay playsinline muted
                   style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;"></video>

            {{-- Loading overlay --}}
            <div x-show="camLoading"
                 style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);z-index:2;">
                <div class="spinner-border text-white"></div>
            </div>

            {{-- Header (absolute top) --}}
            <div style="position:absolute;top:0;left:0;right:0;z-index:3;
                        display:flex;align-items:center;justify-content:space-between;
                        padding:env(safe-area-inset-top,12px) 16px 12px;
                        background:linear-gradient(to bottom,rgba(0,0,0,.65),transparent);">
                <button type="button" @click="closeCamera()" class="btn btn-sm text-white p-1">
                    <i class="bi bi-x-lg fs-5"></i>
                </button>
                <span class="text-white fw-semibold" style="font-size:.9rem;text-shadow:0 1px 3px rgba(0,0,0,.7);">{{ $label }}</span>
                <div style="width:36px;"></div>
            </div>

            {{-- Controls (absolute bottom) --}}
            <div style="position:absolute;bottom:0;left:0;right:0;z-index:3;
                        display:flex;align-items:center;justify-content:center;gap:40px;
                        padding:24px 24px calc(env(safe-area-inset-bottom,16px) + 24px);
                        background:linear-gradient(to top,rgba(0,0,0,.75),transparent);">
                <button type="button" @click="flipCamera()"
                        class="btn btn-outline-light rounded-circle p-0"
                        style="width:52px;height:52px;">
                    <i class="bi bi-arrow-repeat fs-5"></i>
                </button>

                <button type="button" @click="capturePhoto('{{ $field }}')"
                        class="btn btn-light rounded-circle p-0 camera-shutter-btn"
                        style="width:76px;height:76px;flex-shrink:0;">
                    <i class="bi bi-circle-fill text-dark" style="font-size:2rem;"></i>
                </button>

                <div style="width:52px;"></div>
            </div>
        </div>

        {{-- REVIEW VIEW --}}
        <div x-show="camState === 'review'" style="position:absolute;inset:0;background:#111;">
            {{-- Preview image fills screen --}}
            <img x-show="capturedSrc && !compressing"
                 :src="capturedSrc"
                 style="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;">

            {{-- Compression spinner (center) --}}
            <div x-show="compressing"
                 style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;">
                <div class="spinner-border text-white" style="width:3rem;height:3rem;"></div>
                <span class="text-white" style="font-size:.9rem;">Mengompresi foto…</span>
            </div>

            {{-- Header (absolute top) --}}
            <div style="position:absolute;top:0;left:0;right:0;z-index:3;
                        display:flex;align-items:center;justify-content:space-between;
                        padding:env(safe-area-inset-top,12px) 16px 12px;
                        background:linear-gradient(to bottom,rgba(0,0,0,.65),transparent);">
                <button type="button" @click="retakePhoto()"
                        :disabled="compressing"
                        class="btn btn-sm text-white p-1">
                    <i class="bi bi-arrow-counterclockwise me-1"></i>Ulangi
                </button>
                <span class="text-white fw-semibold" style="font-size:.9rem;">Pratinjau</span>
                <div style="width:60px;"></div>
            </div>

            {{-- Save panel (absolute bottom) --}}
            <div style="position:absolute;bottom:0;left:0;right:0;z-index:3;
                        padding:16px 16px calc(env(safe-area-inset-bottom,16px) + 16px);
                        background:linear-gradient(to top,rgba(0,0,0,.85) 60%,transparent);">
                <div x-show="capturedSize && !compressing" class="text-center mb-3" style="font-size:.8rem;">
                    <span class="text-muted">Ukuran: </span>
                    <span class="text-white fw-semibold" x-text="capturedSize"></span>
                </div>
                <button type="button"
                        @click="savePhoto('{{ $field }}')"
                        :disabled="compressing"
                        class="btn btn-success w-100"
                        style="padding:14px;">
                    <i class="bi bi-check-lg me-2"></i>Gunakan Foto Ini
                </button>
            </div>
        </div>

        {{-- ERROR VIEW --}}
        <div x-show="camState === 'error'"
             style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;">
            <i class="bi bi-camera-video-off text-white mb-3" style="font-size:3rem;"></i>
            <p class="text-white text-center mb-4" x-text="camError" style="font-size:.9rem;"></p>
            <button type="button" @click="closeCamera()" class="btn btn-outline-light px-4">Tutup</button>
        </div>

        {{-- Hidden canvas for capture --}}
        <canvas x-ref="canvas_{{ $field }}" style="display:none;"></canvas>
    </div>

</div>