@extends('layouts.app')

@section('title', 'Daftarkan Kendaraan')

@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);
    }
    .color-preview {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid var(--border);
        display: inline-block;
        vertical-align: middle;
        margin-left: 8px;
        transition: background .3s;
    }
    .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.index') }}" style="color:var(--text-muted);text-decoration:none">
            <i class="bi bi-arrow-left"></i>
        </a>
        <i class="bi bi-car-front-fill" style="color:var(--accent)"></i>
        Daftarkan Kendaraan
    </div>

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

            {{-- 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') }}"
                       placeholder="Contoh: B 1234 ABC" 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 Kendaraan --}}
            <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>
                    <option value="" disabled {{ old('veh_type') ? '' : 'selected' }}>— Pilih Tipe —</option>
                    @foreach(['sedan','suv','coupe','truck','motorcycle'] as $type)
                        <option value="{{ $type }}" {{ old('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') }}"
                       placeholder="Contoh: Silver Metallic" 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

                <div class="photo-grid" id="photoGrid"></div>

                {{-- Upload area --}}
                <div class="photo-upload-area" id="uploadArea">
                    <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">0</span> / 5 foto
                </div>
                <div class="form-hint">Format: JPG, PNG, WEBP | Maksimal 2MB per foto</div>
            </div>

            <hr class="divider">

            <div class="form-group"
                style="background:rgba(210,153,34,.08);border:1px solid var(--warning);border-radius:8px;padding:12px 14px;margin-bottom:0">
                <div style="display:flex;gap:10px;align-items:flex-start">
                    <i class="bi bi-info-circle-fill" style="color:var(--warning);margin-top:2px"></i>
                    <div>
                        <div style="font-weight:600;font-size:0.875rem;margin-bottom:4px">Status Default: Not Registered</div>
                        <div style="font-size:0.8rem;color:var(--text-muted)">
                            Kendaraan akan otomatis berstatus <strong>Not Registered</strong> dan menunggu verifikasi
                            oleh petugas sebelum dapat digunakan.
                        </div>
                    </div>
                </div>
            </div>

            <hr class="divider">

            <div style="display:flex;gap:10px">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-send-fill"></i> Daftarkan
                </button>
                <a href="{{ route('vehicle.index') }}" 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');

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 = '';
});

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

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

    filesToProcess.forEach(file => {
        if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type)) {
            alert(`File "${file.name}" bukan format yang didukung (JPG/PNG/WEBP).`);
            return;
        }
        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.innerHTML = `
            <img src="${e.target.result}" alt="New photo">
            <button type="button" class="photo-remove" onclick="removePhoto(this)" title="Hapus foto">
                <i class="bi bi-x"></i>
            </button>
        `;

        // Attach file to a hidden input
        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 removePhoto(btn) {
    btn.closest('.photo-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