@extends('layouts.app')

@section('title', 'Edit Kendaraan — ' . $vehicle->veh_plat)

@push('styles')
<style>
    .photo-upload-area {
        border: 2px dashed var(--border);
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        transition: border-color .2s, background .2s;
        cursor: pointer;
    }
    .photo-upload-area:hover,
    .photo-upload-area.dragover {
        border-color: var(--accent);
        background: rgba(88, 101, 242, .05);
    }
    .photo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
        margin-top: 12px;
    }
    .photo-item {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid var(--border);
        aspect-ratio: 4/3;
    }
    .photo-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .photo-item .photo-remove {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: rgba(218, 54, 51, .9);
        color: #fff;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .7rem;
        transition: transform .2s;
    }
    .photo-item .photo-remove:hover {
        transform: scale(1.1);
    }
    .photo-item.uploading::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.5);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .color-preview {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid var(--border);
        display: inline-block;
        vertical-align: middle;
        margin-left: 8px;
    }
    .max-info { font-size: 0.75rem; color: var(--text-muted); }
    .photo-counter {
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-top: 8px;
    }
    .photo-counter .count { color: var(--text-primary); font-weight: 600; }
    .photo-counter .limit-reached { color: var(--warning); }
</style>
@endpush

@section('content')
<div style="max-width:620px">
    <div class="page-title">
        <a href="{{ route('vehicle.show', $vehicle->id) }}" style="color:var(--text-muted);text-decoration:none">
            <i class="bi bi-arrow-left"></i>
        </a>
        <i class="bi bi-pencil-square" style="color:var(--accent)"></i>
        Edit Kendaraan &mdash; {{ $vehicle->veh_plat }}
    </div>

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

            {{-- Plat Nomor --}}
            <div class="form-group">
                <label class="form-label" for="veh_plat">Plat Nomor <span style="color:#ff7b72">*</span></label>
                <input type="text" id="veh_plat" name="veh_plat"
                       class="form-control @error('veh_plat') is-invalid @enderror"
                       value="{{ old('veh_plat', $vehicle->veh_plat) }}"
                       style="text-transform:uppercase" maxlength="20" required>
                @error('veh_plat')
                    <div class="form-error"><i class="bi bi-exclamation-circle"></i> {{ $message }}</div>
                @enderror
            </div>

            {{-- Tipe --}}
            <div class="form-group">
                <label class="form-label" for="veh_type">Tipe Kendaraan <span style="color:#ff7b72">*</span></label>
                <select id="veh_type" name="veh_type"
                        class="form-select @error('veh_type') is-invalid @enderror" required>
                    @foreach(['sedan','suv','coupe','truck','motorcycle'] as $type)
                        <option value="{{ $type }}" {{ old('veh_type', $vehicle->veh_type) == $type ? 'selected' : '' }}>
                            {{ ucfirst($type) }}
                        </option>
                    @endforeach
                </select>
                @error('veh_type')
                    <div class="form-error"><i class="bi bi-exclamation-circle"></i> {{ $message }}</div>
                @enderror
            </div>

            {{-- Warna --}}
            <div class="form-group">
                <label class="form-label" for="veh_color">
                    Warna <span style="color:#ff7b72">*</span>
                    <span class="color-preview" id="colorPreview"></span>
                </label>
                <input type="text" id="veh_color" name="veh_color"
                       class="form-control @error('veh_color') is-invalid @enderror"
                       value="{{ old('veh_color', $vehicle->veh_color) }}"
                       maxlength="50" required>
                @error('veh_color')
                    <div class="form-error"><i class="bi bi-exclamation-circle"></i> {{ $message }}</div>
                @enderror
            </div>

            {{-- Foto Kendaraan (Upload) --}}
            <div class="form-group">
                <label class="form-label">
                    Foto Kendaraan <span class="max-info">(maks. 5 foto, JPG/PNG/WEBP, maks 2MB per file)</span>
                </label>
                @error('veh_photos')
                    <div class="form-error" style="margin-bottom:8px"><i class="bi bi-exclamation-circle"></i> {{ $message }}</div>
                @enderror
                @error('veh_photos.*')
                    <div class="form-error" style="margin-bottom:8px"><i class="bi bi-exclamation-circle"></i> {{ $message }}</div>
                @enderror

                {{-- Existing photos --}}
                <div class="photo-grid" id="photoGrid">
                    @php $existingImgs = $vehicle->veh_img ?? []; @endphp
                    @foreach($existingImgs as $i => $imgUrl)
                        <div class="photo-item" data-existing="{{ $imgUrl }}">
                            <img src="{{ $imgUrl }}" alt="Foto {{ $i + 1 }}">
                            <button type="button" class="photo-remove" onclick="removeExistingPhoto(this)" title="Hapus foto">
                                <i class="bi bi-x"></i>
                            </button>
                            <input type="hidden" name="existing_photos[]" value="{{ $imgUrl }}">
                        </div>
                    @endforeach
                </div>

                {{-- Upload area --}}
                <div class="photo-upload-area" id="uploadArea" style="{{ count($existingImgs) >= 5 ? 'display:none' : '' }}">
                    <i class="bi bi-cloud-arrow-up" style="font-size:1.5rem;color:var(--text-muted)"></i>
                    <div style="font-size:.85rem;color:var(--text-muted);margin-top:6px">
                        Klik atau drag & drop foto di sini
                    </div>
                    <input type="file" name="veh_photos[]" id="photoInput" multiple
                           accept="image/jpeg,image/png,image/webp"
                           style="display:none">
                </div>

                <div class="photo-counter">
                    <span id="photoCount" class="count">{{ count($existingImgs) }}</span> / 5 foto
                </div>
                <div class="form-hint">Format: JPG, PNG, WEBP | Maksimal 2MB per foto</div>
            </div>

            <hr class="divider" style="margin:20px 0">

            <div style="display:flex;gap:10px">
                <button type="submit" class="btn btn-primary" id="submitBtn">
                    <i class="bi bi-floppy2-fill"></i> Simpan Perubahan
                </button>
                <a href="{{ route('vehicle.show', $vehicle->id) }}" class="btn btn-secondary">Batal</a>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
const MAX_PHOTOS = 5;
const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
const uploadArea = document.getElementById('uploadArea');
const photoInput = document.getElementById('photoInput');
const photoGrid = document.getElementById('photoGrid');

let newFiles = []; // Track new files to upload

function getTotalPhotos() {
    return photoGrid.querySelectorAll('.photo-item').length;
}

function updateCounter() {
    const count = getTotalPhotos();
    document.getElementById('photoCount').textContent = count;
    const counter = document.querySelector('.photo-counter');
    if (count >= MAX_PHOTOS) {
        counter.classList.add('limit-reached');
        uploadArea.style.display = 'none';
    } else {
        counter.classList.remove('limit-reached');
        uploadArea.style.display = '';
    }
}

// Click to upload
uploadArea.addEventListener('click', () => photoInput.click());

// Drag & drop
uploadArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    uploadArea.classList.add('dragover');
});
uploadArea.addEventListener('dragleave', () => uploadArea.classList.remove('dragover'));
uploadArea.addEventListener('drop', (e) => {
    e.preventDefault();
    uploadArea.classList.remove('dragover');
    handleFiles(e.dataTransfer.files);
});

// File input change
photoInput.addEventListener('change', () => {
    handleFiles(photoInput.files);
    photoInput.value = ''; // Reset so same file can be selected again
});

function handleFiles(files) {
    const available = MAX_PHOTOS - getTotalPhotos();
    if (available <= 0) return;

    const filesToProcess = Array.from(files).slice(0, available);

    filesToProcess.forEach(file => {
        // Validate type
        if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type)) {
            alert(`File "${file.name}" bukan format yang didukung (JPG/PNG/WEBP).`);
            return;
        }
        // Validate size
        if (file.size > MAX_FILE_SIZE) {
            alert(`File "${file.name}" terlalu besar (maks 2MB).`);
            return;
        }

        addNewPhotoPreview(file);
    });

    updateCounter();
}

function addNewPhotoPreview(file) {
    const reader = new FileReader();
    reader.onload = (e) => {
        const item = document.createElement('div');
        item.className = 'photo-item';
        item.dataset.newFile = 'true';

        item.innerHTML = `
            <img src="${e.target.result}" alt="New photo">
            <button type="button" class="photo-remove" onclick="removeNewPhoto(this)" title="Hapus foto">
                <i class="bi bi-x"></i>
            </button>
        `;

        // Create a file input for this specific file
        const dt = new DataTransfer();
        dt.items.add(file);
        const fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.name = 'veh_photos[]';
        fileInput.style.display = 'none';
        fileInput.files = dt.files;
        item.appendChild(fileInput);

        photoGrid.appendChild(item);
        updateCounter();
    };
    reader.readAsDataURL(file);
}

function removeExistingPhoto(btn) {
    const item = btn.closest('.photo-item');
    item.remove();
    updateCounter();
}

function removeNewPhoto(btn) {
    const item = btn.closest('.photo-item');
    item.remove();
    updateCounter();
}

// Color preview
const colorInput = document.getElementById('veh_color');
const colorPreview = document.getElementById('colorPreview');
colorInput.addEventListener('input', () => colorPreview.style.background = colorInput.value);
colorPreview.style.background = colorInput.value;

// Uppercase plat
document.getElementById('veh_plat').addEventListener('input', function() {
    this.value = this.value.toUpperCase();
});

updateCounter();
</script>
@endpush