@extends('admin.layout')

@section('content')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    
    <div>
        <div class="row align-items-center justify-content-between my-3">
            <div class="col-auto">
                <h5 class="mb-0 d-flex align-items-center">
                    <a href="{{ route('admin.stock_list') }}" class="btn bg-white border shadow-sm me-2 d-inline-flex align-items-center justify-content-center p-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                    Edit Vehicle
                </h5>
            </div>

        </div>

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="card shadow-sm border-0">
            <div class="card-body">
                <form id="vehicleDetails" action="{{ route('admin.update_stock', $vehicle->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="row g-3 mb-3">
                        <div class="col-md-3">
    <label class="form-label fw-semibold">
        Brand Name <span class="text-danger">*</span>
    </label>

    <select name="brand_name"
        id="brand_name"
        class="form-select @error('brand_name') is-invalid @enderror">

        <option value="">Select Brand</option>

        @foreach ($brands as $brand)
            <option value="{{ $brand->id }}"
                {{ old('brand_name', $vehicle->brand_name) == $brand->id ? 'selected' : '' }}>
                {{ $brand->brand_name }}
            </option>
        @endforeach

    </select>

    @error('brand_name')
        <div class="invalid-feedback d-block">
            {{ $message }}
        </div>
    @enderror
</div>

                        <div class="col-md-3">
                            <label class="form-label fw-semibold">
                                Purchase Date <span class="text-danger">*</span>
                            </label>
                            <input type="date" name="purchase_date" class="form-control @error('purchase_date') is-invalid @enderror"
                                value="{{ old('purchase_date', $vehicle->purchase_date ? $vehicle->purchase_date->format('Y-m-d') : '') }}" max="{{ date('Y-m-d') }}">
                            @error('purchase_date')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3">
                            <label class="form-label fw-semibold">
                                Vehicle Number <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="vehicle_no" class="form-control @error('vehicle_no') is-invalid @enderror"
                                placeholder="TN 01 AB 1234" value="{{ old('vehicle_no', $vehicle->vehicle_no) }}">
                            @error('vehicle_no')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3">
                            <label class="form-label fw-semibold">
                                Vehicle Model <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="vehicle_model" class="form-control @error('vehicle_model') is-invalid @enderror"
                                placeholder="Honda Shine" value="{{ old('vehicle_model', $vehicle->vehicle_model) }}">
                            @error('vehicle_model')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">
                                Vehicle Year <span class="text-danger">*</span>
                            </label>
                            <input type="number" name="vehicle_year" class="form-control @error('vehicle_year') is-invalid @enderror"
                                placeholder="2024" min="1900" max="{{ date('Y') }}" value="{{ old('vehicle_year', $vehicle->vehicle_year) }}">
                            @error('vehicle_year')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3">
                            <label class="form-label fw-semibold">
                                Kilometers <span class="text-danger">*</span>
                            </label>
                            <input type="number" name="kilometers" class="form-control @error('kilometers') is-invalid @enderror"
                                placeholder="25000" min="0" value="{{ old('kilometers', $vehicle->kilometers) }}">
                            @error('kilometers')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3">
                            <label class="form-label fw-semibold">
                                Fuel Type <span class="text-danger">*</span>
                            </label>
                            <select name="fuel_type" class="form-select @error('fuel_type') is-invalid @enderror">
                                <option value="">Select Fuel</option>
                                @foreach (['Petrol', 'Diesel', 'Electric', 'CNG'] as $fuel)
                                    <option value="{{ $fuel }}" {{ old('fuel_type', $vehicle->fuel_type) == $fuel ? 'selected' : '' }}>
                                        {{ $fuel }}
                                    </option>
                                @endforeach
                            </select>
                            @error('fuel_type')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3">
                            <label class="form-label fw-semibold">
                                Name <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                                placeholder="Enter Name" value="{{ old('name', $vehicle->name) }}">
                            @error('name')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">
                                Mobile Number <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="mobile" id="mobile" class="form-control @error('mobile') is-invalid @enderror"
                                maxlength="10" inputmode="numeric" placeholder="Enter Mobile Number" value="{{ old('mobile', $vehicle->mobile) }}">
                            @error('mobile')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold">
                                Purchase Price <span class="text-danger">*</span>
                            </label>
                            <input type="number" name="purchase_price" class="form-control @error('purchase_price') is-invalid @enderror"
                                placeholder="Enter Purchase Price" min="0" step="0.01" value="{{ old('purchase_price', $vehicle->purchase_price) }}">
                            @error('purchase_price')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold">
                                Selling Price <span class="text-danger">*</span>
                            </label>
                            <input type="number" name="selling_price" class="form-control @error('selling_price') is-invalid @enderror"
                                placeholder="Enter Selling Price" min="0" step="0.01" value="{{ old('selling_price', $vehicle->selling_price) }}">
                            @error('selling_price')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">
                                Website Display <span class="text-danger">*</span>
                            </label>
                            <select name="website_display" class="form-select @error('website_display') is-invalid @enderror">
                                <option value="">Select Display Status</option>
                                <option value="1" {{ old('website_display', $vehicle->website_display) == 1 ? 'selected' : '' }}>Display</option>
                                <option value="0" {{ old('website_display', $vehicle->website_display) == 0 ? 'selected' : '' }}>Hide</option>
                            </select>
                            @error('website_display')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-8">
                            <label class="form-label fw-semibold">
                                Address <span class="text-danger">*</span>
                            </label>
                            <textarea name="address" rows="1" class="form-control @error('address') is-invalid @enderror"
                                placeholder="Enter your address">{{ old('address', $vehicle->address) }}</textarea>
                            @error('address')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

<div class="row g-3 align-items-center mb-3">
    <div class="col-md-4">
        <label class="form-label fw-semibold">Vehicle Images (Max 4)</label>
        <input type="file" id="vehicleImages" class="form-control" accept="image/jpeg,image/png,image/jpg,image/webp" multiple>

        <input type="file" name="vehicle_images[]" id="imageInput0" class="d-none" accept="image/jpeg,image/png,image/jpg,image/webp">
        <input type="file" name="vehicle_images[]" id="imageInput1" class="d-none" accept="image/jpeg,image/png,image/jpg,image/webp">
        <input type="file" name="vehicle_images[]" id="imageInput2" class="d-none" accept="image/jpeg,image/png,image/jpg,image/webp">
        <input type="file" name="vehicle_images[]" id="imageInput3" class="d-none" accept="image/jpeg,image/png,image/jpg,image/webp">
        
        <input type="hidden" name="remove_images" id="removeImagesInput" value="">
    </div>

    <div class="col-md-8">
        <div class="row g-2">
            @php
                $existingImages = [
                    0 => ($vehicle->vehicle_image_front && file_exists(public_path('vehicle_images/' . $vehicle->vehicle_image_front))) ? asset('vehicle_images/' . $vehicle->vehicle_image_front) : '',
                    1 => ($vehicle->vehicle_image_back && file_exists(public_path('vehicle_images/' . $vehicle->vehicle_image_back))) ? asset('vehicle_images/' . $vehicle->vehicle_image_back) : '',
                    2 => ($vehicle->vehicle_image_left && file_exists(public_path('vehicle_images/' . $vehicle->vehicle_image_left))) ? asset('vehicle_images/' . $vehicle->vehicle_image_left) : '',
                    3 => ($vehicle->vehicle_image_right && file_exists(public_path('vehicle_images/' . $vehicle->vehicle_image_right))) ? asset('vehicle_images/' . $vehicle->vehicle_image_right) : '',
                ];
                $labels = ['Front', 'Back', 'Left', 'Right'];
            @endphp

            @for ($i = 0; $i < 4; $i++)
                <div class="col-3">
                    <div id="preview-box-{{ $i }}" 
                         class="card card-body p-0 border border-secondary-subtle bg-light d-flex align-items-center justify-content-center position-relative overflow-visible text-center" 
                         style="height: 80px; cursor: pointer;"
                         data-existing="{{ $existingImages[$i] }}">
                        <span class="text-secondary small fw-medium">{{ $labels[$i] }}</span>
                    </div>
                </div>
            @endfor
        </div>
    </div>
</div>
                    </div>

                    <div class="text-center mt-4">
                        <button type="reset" id="resetBtn" class="btn btn-secondary px-5 mb-4">Reset</button>
                        <button type="submit" id="saveBtn" class="btn btn-primary px-5 mb-4">
                            <i class="ti tabler-device-floppy me-1" id="saveBtnIcon"></i>
                            <span id="saveBtnText">Update Vehicle</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
    const labels = ['Front', 'Back', 'Left', 'Right'];
    let removedIndexes = [];

    function renderBox(index, src) {
        const box = document.getElementById(`preview-box-${index}`);
        if (!box) return;

        if (src) {
            box.innerHTML = `
                <img src="${src}" alt="${labels[index]}" style="width:100%; height:100%; object-fit:cover; border-radius:4px;">
                <span class="position-absolute bottom-0 start-0 w-100 bg-dark bg-opacity-50 text-white py-1 text-center" style="font-size:10px;">${labels[index]}</span>
                <button type="button" class="btn btn-danger btn-sm rounded-circle position-absolute top-0 end-0 p-0 d-flex align-items-center justify-content-center remove-btn" 
                        data-index="${index}" style="width: 20px; height: 20px; transform: translate(30%, -30%); font-size: 12px; z-index: 10;">
                    &times;
                </button>
            `;
        } else {
            box.innerHTML = `<span class="text-secondary small fw-medium">${labels[index]}</span>`;
        }
    }

    function loadInitialImages() {
        removedIndexes = [];
        document.getElementById('removeImagesInput').value = '';
        for (let i = 0; i < 4; i++) {
            const box = document.getElementById(`preview-box-${i}`);
            const existingUrl = box ? box.getAttribute('data-existing') : '';
            renderBox(i, existingUrl);
        }
    }

    loadInitialImages();

    for (let i = 0; i < 4; i++) {
        const box = document.getElementById(`preview-box-${i}`);
        if (box) {
            box.addEventListener('click', function (e) {
                if (e.target.classList.contains('remove-btn')) return;
                
                const hiddenInput = document.getElementById(`imageInput${i}`);
                if (hiddenInput) hiddenInput.click();
            });
        }

        const singleInput = document.getElementById(`imageInput${i}`);
        if (singleInput) {
            singleInput.addEventListener('change', function (e) {
                if (e.target.files && e.target.files[0]) {
                    const reader = new FileReader();
                    reader.onload = function (evt) {
                        renderBox(i, evt.target.result);
                    };
                    reader.readAsDataURL(e.target.files[0]);
                }
            });
        }
    }

    document.addEventListener('click', function (e) {
        if (e.target && e.target.classList.contains('remove-btn')) {
            e.stopPropagation();
            const index = parseInt(e.target.getAttribute('data-index'));

            const hiddenInput = document.getElementById(`imageInput${index}`);
            if (hiddenInput) hiddenInput.value = '';

            const box = document.getElementById(`preview-box-${index}`);
            if (box) box.setAttribute('data-existing', '');

            if (!removedIndexes.includes(index)) {
                removedIndexes.push(index);
                document.getElementById('removeImagesInput').value = removedIndexes.join(',');
            }

            renderBox(index, '');
        }
    });

    const mainInput = document.getElementById('vehicleImages');
    if (mainInput) {
        mainInput.addEventListener('change', function (e) {
            const files = Array.from(e.target.files).slice(0, 4);
            files.forEach((file, index) => {
                const hiddenInput = document.getElementById(`imageInput${index}`);
                if (hiddenInput) {
                    const dataTransfer = new DataTransfer();
                    dataTransfer.items.add(file);
                    hiddenInput.files = dataTransfer.files;

                    const reader = new FileReader();
                    reader.onload = function (evt) {
                        renderBox(index, evt.target.result);
                    };
                    reader.readAsDataURL(file);
                }
            });
        });
    }

    // Form submit & reset logic
    const vehicleForm = document.getElementById('vehicleDetails');
    const btn = document.getElementById('saveBtn');
    const btnText = document.getElementById('saveBtnText');
    const btnIcon = document.getElementById('saveBtnIcon');

    if (vehicleForm) {
        vehicleForm.addEventListener('submit', function () {
            btn.disabled = true;
            btnText.textContent = 'Processing...';
            btnIcon.className = 'spinner-border spinner-border-sm me-1';
        });

        vehicleForm.addEventListener('reset', function () {
            setTimeout(function () {
                for (let i = 0; i < 4; i++) {
                    const input = document.getElementById(`imageInput${i}`);
                    if (input) input.value = '';
                }
                if (mainInput) mainInput.value = '';
                btn.disabled = false;
                btnText.textContent = 'Update Vehicle';
                btnIcon.className = 'ti tabler-device-floppy me-1';
                loadInitialImages();
            }, 50);
        });
    }
});
    </script>
@endsection