@extends('admin.master')

@section('title')
    Edit Car
@endsection

@section('content')
    <div class="mt-4">
        <div class="row g-4">
            <div class="col-md-12">
                <div class="row g-3 mb-4">
                    <div class="col-auto">
                        <h2 class="mb-0">Edit Car</h2>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        {!! Form::open(['route' => ['admin.cars.update', $car->id], 'method' => 'POST', 'id' => 'carForm', 'files' => true]) !!}
                        @method('PUT')

                        <div class="row">
                            <div class="col-md-12 mb-3">
                                {!! Form::label('title', 'Title', ['class' => 'form-label']) !!}
                                <span class="text-danger">*</span>
                                {!! Form::text('title', $car->title, [
                                    'class' => 'form-control form-control-sm',
                                    'id' => 'title',
                                    'required' => true,
                                    'placeholder' => 'Enter Car Title',
                                ]) !!}
                                @error('title')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-12 mb-3">
                                {!! Form::label('slug', 'Permalink (Slug)', ['class' => 'form-label']) !!}
                                {!! Form::text('slug', $car->slug, [
                                    'class' => 'form-control form-control-sm',
                                    'id' => 'slug',
                                    'placeholder' => 'e.g., toyota-camry-2023',
                                ]) !!}
                                <small class="text-muted">Enter a unique URL-friendly permalink. Leave empty to auto-generate from title.</small>
                                @error('slug')
                                    <span class="text-danger d-block">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-12 mb-3">
                                {!! Form::label('description', 'Description', ['class' => 'form-label']) !!}
                                <!-- Quill Editor Container -->
                                <div id="description-editor"></div>
                                <!-- Hidden textarea for form submission -->
                                {!! Form::textarea('description', $car->description, [
                                    'class' => 'form-control form-control-sm',
                                    'id' => 'description',
                                    'rows' => 10,
                                    'placeholder' => 'Enter Car Description',
                                ]) !!}
                                @error('description')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <!-- SEO Details Section -->
                            <div class="col-12 mb-4">
                                <hr>
                                <h5 class="mb-3">SEO Details</h5>
                            </div>

                            <div class="col-md-12 mb-3">
                                {!! Form::label('meta_title', 'Meta Title', ['class' => 'form-label']) !!}
                                {!! Form::text('meta_title', $car->meta_title, [
                                    'class' => 'form-control form-control-sm',
                                    'id' => 'meta_title',
                                    'placeholder' => 'Enter Meta Title',
                                    'maxlength' => 255,
                                ]) !!}
                                <small class="text-muted">Recommended: 50-60 characters</small>
                                @error('meta_title')
                                    <span class="text-danger d-block">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-12 mb-3">
                                {!! Form::label('meta_description', 'Meta Description', ['class' => 'form-label']) !!}
                                {!! Form::textarea('meta_description', $car->meta_description, [
                                    'class' => 'form-control form-control-sm',
                                    'id' => 'meta_description',
                                    'rows' => 3,
                                    'placeholder' => 'Enter Meta Description',
                                    'maxlength' => 500,
                                ]) !!}
                                <small class="text-muted">Recommended: 150-160 characters</small>
                                @error('meta_description')
                                    <span class="text-danger d-block">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-12 mb-3">
                                {!! Form::label('meta_keywords', 'Meta Keywords', ['class' => 'form-label']) !!}
                                {!! Form::textarea('meta_keywords', $car->meta_keywords, [
                                    'class' => 'form-control form-control-sm',
                                    'id' => 'meta_keywords',
                                    'rows' => 2,
                                    'placeholder' => 'Enter Meta Keywords (comma separated)',
                                    'maxlength' => 500,
                                ]) !!}
                                <small class="text-muted">Separate keywords with commas</small>
                                @error('meta_keywords')
                                    <span class="text-danger d-block">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-12 mb-4">
                                <hr>
                            </div>

                            <div class="col-md-6 mb-3">
                                {!! Form::label('brand_id', 'Brand', ['class' => 'form-label']) !!}
                                <span class="text-danger">*</span>
                                {!! Form::select('brand_id', ['' => 'Select Brand'] + $brands->pluck('brand_name', 'id')->toArray(), $car->brand_id, [
                                    'class' => 'form-select form-select-sm select2',
                                    'id' => 'brand_id',
                                    'required' => true,
                                ]) !!}
                                @error('brand_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                {!! Form::label('car_model_id', 'Car Model', ['class' => 'form-label']) !!}
                                <span class="text-danger">*</span>
                                {!! Form::select('car_model_id', ['' => 'Select Car Model'] + $carModels->pluck('model_name', 'id')->toArray(), $car->car_model_id, [
                                    'class' => 'form-select form-select-sm select2',
                                    'id' => 'car_model_id',
                                    'required' => true,
                                ]) !!}
                                @error('car_model_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                {!! Form::label('fuel_type_id', 'Fuel Type', ['class' => 'form-label']) !!}
                                <span class="text-danger">*</span>
                                {!! Form::select('fuel_type_id', ['' => 'Select Fuel Type'] + $fuelTypes->pluck('fuel_type_name', 'id')->toArray(), $car->fuel_type_id, [
                                    'class' => 'form-select form-select-sm select2',
                                    'id' => 'fuel_type_id',
                                    'required' => true,
                                ]) !!}
                                @error('fuel_type_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                {!! Form::label('body_type_id', 'Body Type', ['class' => 'form-label']) !!}
                                <span class="text-danger">*</span>
                                {!! Form::select('body_type_id', ['' => 'Select Body Type'] + $bodyTypes->pluck('body_type_name', 'id')->toArray(), $car->body_type_id, [
                                    'class' => 'form-select form-select-sm select2',
                                    'id' => 'body_type_id',
                                    'required' => true,
                                ]) !!}
                                @error('body_type_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                {!! Form::label('transmission_id', 'Transmission', ['class' => 'form-label']) !!}
                                <span class="text-danger">*</span>
                                {!! Form::select('transmission_id', ['' => 'Select Transmission'] + $transmissions->pluck('transmission_name', 'id')->toArray(), $car->transmission_id, [
                                    'class' => 'form-select form-select-sm select2',
                                    'id' => 'transmission_id',
                                    'required' => true,
                                ]) !!}
                                @error('transmission_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                {!! Form::label('ownership_id', 'Ownership', ['class' => 'form-label']) !!}
                                <span class="text-danger">*</span>
                                {!! Form::select('ownership_id', ['' => 'Select Ownership'] + $ownerships->pluck('ownership_name', 'id')->toArray(), $car->ownership_id, [
                                    'class' => 'form-select form-select-sm select2',
                                    'id' => 'ownership_id',
                                    'required' => true,
                                ]) !!}
                                @error('ownership_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                {!! Form::label('seater_id', 'Seater', ['class' => 'form-label']) !!}
                                <span class="text-danger">*</span>
                                {!! Form::select('seater_id', ['' => 'Select Seater'] + $seaters->pluck('seater_name', 'id')->toArray(), $car->seater_id, [
                                    'class' => 'form-select form-select-sm select2',
                                    'id' => 'seater_id',
                                    'required' => true,
                                ]) !!}
                                @error('seater_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                {!! Form::label('color_id', 'Color', ['class' => 'form-label']) !!}
                                <span class="text-danger">*</span>
                                {!! Form::select('color_id', ['' => 'Select Color'] + $colors->pluck('color_name', 'id')->toArray(), $car->color_id, [
                                    'class' => 'form-select form-select-sm select2',
                                    'id' => 'color_id',
                                    'required' => true,
                                ]) !!}
                                @error('color_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                {!! Form::label('engine_type_id', 'Engine Type', ['class' => 'form-label']) !!}
                                <span class="text-danger">*</span>
                                {!! Form::select('engine_type_id', ['' => 'Select Engine Type'] + $engineTypes->pluck('engine_type_name', 'id')->toArray(), $car->engine_type_id, [
                                    'class' => 'form-select form-select-sm select2',
                                    'id' => 'engine_type_id',
                                    'required' => true,
                                ]) !!}
                                @error('engine_type_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                {!! Form::label('year', 'Year', ['class' => 'form-label']) !!}
                                {!! Form::number('year', $car->year, [
                                    'class' => 'form-control form-control-sm',
                                    'id' => 'year',
                                    'min' => '1900',
                                    'max' => date('Y') + 1,
                                    'placeholder' => 'Enter Year',
                                ]) !!}
                                @error('year')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                {!! Form::label('price', 'Price', ['class' => 'form-label']) !!}
                                {!! Form::number('price', $car->price, [
                                    'class' => 'form-control form-control-sm',
                                    'id' => 'price',
                                    'step' => '0.01',
                                    'min' => '0',
                                    'placeholder' => 'Enter Price',
                                ]) !!}
                                @error('price')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                {!! Form::label('km_driven', 'KM Driven', ['class' => 'form-label']) !!}
                                {!! Form::text('km_driven', $car->km_driven, [
                                    'class' => 'form-control form-control-sm',
                                    'id' => 'km_driven',
                                    'placeholder' => 'Enter KM Driven',
                                ]) !!}
                                @error('km_driven')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                {!! Form::label('registration_number', 'Registration Number', ['class' => 'form-label']) !!}
                                {!! Form::text('registration_number', $car->registration_number, [
                                    'class' => 'form-control form-control-sm',
                                    'id' => 'registration_number',
                                    'placeholder' => 'Enter Registration Number',
                                ]) !!}
                                @error('registration_number')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                {!! Form::label('registration_year', 'Registration Year', ['class' => 'form-label']) !!}
                                {!! Form::text('registration_year', $car->registration_year, [
                                    'class' => 'form-control form-control-sm',
                                    'id' => 'registration_year',
                                    'placeholder' => 'Enter Registration Year',
                                ]) !!}
                                @error('registration_year')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                {!! Form::label('insurance_validity', 'Insurance Validity', ['class' => 'form-label']) !!}
                                {!! Form::text('insurance_validity', $car->insurance_validity, [
                                    'class' => 'form-control form-control-sm',
                                    'id' => 'insurance_validity',
                                    'placeholder' => 'Enter Insurance Validity',
                                ]) !!}
                                @error('insurance_validity')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                {!! Form::label('rc_status', 'RC Status', ['class' => 'form-label']) !!}
                                {!! Form::text('rc_status', $car->rc_status, [
                                    'class' => 'form-control form-control-sm',
                                    'id' => 'rc_status',
                                    'placeholder' => 'Enter RC Status',
                                ]) !!}
                                @error('rc_status')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-12 mb-3">
                                {!! Form::label('main_image', 'Main Image', ['class' => 'form-label']) !!}
                                {!! Form::file('main_image', [
                                    'class' => 'form-control form-control-sm',
                                    'id' => 'main_image',
                                    'accept' => 'image/jpeg,image/png,image/jpg,image/gif,image/webp',
                                ]) !!}
                                <small class="text-muted d-block mt-1">Accepted formats: JPEG, PNG, JPG, GIF, WEBP (Max: 5MB). Leave empty to keep current image.</small>
                                @if($car->main_image)
                                    <div class="mt-2">
                                        <label class="text-muted small">Current Main Image:</label>
                                        <div>
                                            <img src="{{ asset('assets/attachments/car/main/' . $car->main_image) }}" 
                                                 alt="Current Main Image" 
                                                 class="img-thumbnail" 
                                                 style="max-width: 200px; max-height: 200px; object-fit: cover;"
                                                 id="currentMainImage">
                                        </div>
                                    </div>
                                @endif
                                <div id="mainImagePreview" class="mt-2"></div>
                                @error('main_image')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-12 mb-3">
                                {!! Form::label('gallery_images', 'Gallery Images', ['class' => 'form-label']) !!}
                                <div class="dropzone dropzone-multiple p-0" id="dropzone-gallery">
                                    <div class="fallback">
                                        <input name="gallery_images[]" type="file" multiple="multiple" />
                                    </div>
                                    <div class="dz-message" data-dz-message="data-dz-message">
                                        <div class="dz-message-text">
                                            <img class="me-2" src="{{ asset('assets/img/icons/cloud-upload.svg') }}" width="25" alt="" />
                                            Drop your images here or click to browse
                                        </div>
                                    </div>
                                    <div class="dz-preview dz-preview-multiple m-0 d-flex flex-column">
                                        <div class="d-flex mb-3 pb-3 border-bottom border-translucent media">
                                            <div class="border p-2 rounded-2 me-2">
                                                <img class="rounded-2 dz-image" src="{{ asset('assets/img/icons/file.png') }}" alt="..." data-dz-thumbnail="data-dz-thumbnail" />
                                            </div>
                                            <div class="flex-1 d-flex flex-between-center">
                                                <div>
                                                    <h6 data-dz-name="data-dz-name"></h6>
                                                    <div class="d-flex align-items-center">
                                                        <p class="mb-0 fs-9 text-body-quaternary lh-1" data-dz-size="data-dz-size"></p>
                                                        <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress=""></span></div>
                                                    </div>
                                                    <span class="fs-10 text-danger" data-dz-errormessage="data-dz-errormessage"></span>
                                                </div>
                                                <div class="dropdown">
                                                    <button class="btn btn-link text-body-tertiary btn-sm dropdown-toggle btn-reveal dropdown-caret-none" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <span class="fas fa-ellipsis-h"></span>
                                                    </button>
                                                    <div class="dropdown-menu dropdown-menu-end border border-translucent py-2">
                                                        <a class="dropdown-item" href="#!" data-dz-remove="data-dz-remove">Remove File</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <small class="text-muted d-block mt-2">Accepted formats: JPEG, PNG, JPG, GIF, WEBP (Max: 5MB per image). You can select multiple images. New images will be added to existing gallery.</small>
                                
                                @if($car->carImages && $car->carImages->count() > 0)
                                    <div class="mt-3">
                                        <label class="text-muted small">Current Gallery Images:</label>
                                        <div class="row g-2 mt-2" id="existingGalleryImages">
                                            @foreach($car->carImages as $carImage)
                                                <div class="col-md-3 existing-gallery-item" data-image-id="{{ $carImage->id }}">
                                                    <div class="position-relative">
                                                        <img src="{{ asset('assets/attachments/car/gallery/' . $carImage->image) }}" 
                                                             alt="Gallery Image" 
                                                             class="img-thumbnail w-100" 
                                                             style="height: 150px; object-fit: cover;">
                                                        <button type="button" 
                                                                class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1 remove-existing-image" 
                                                                data-image-id="{{ $carImage->id }}"
                                                                title="Remove Image">
                                                            <i class="fas fa-times"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        <input type="hidden" name="deleted_gallery_images" id="deletedGalleryImages" value="">
                                    </div>
                                @endif

                                @error('gallery_images')
                                    <span class="text-danger d-block mt-1">{{ $message }}</span>
                                @enderror
                                @error('gallery_images.*')
                                    <span class="text-danger d-block mt-1">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="d-flex gap-2 justify-content-end mt-4">
                            <a href="{{ route('admin.cars.index') }}" class="btn btn-outline-secondary">Cancel</a>
                            <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('css')
    <!-- Quill Editor CSS -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <!-- Dropzone CSS -->
    <link href="{{ asset('assets/vendors/dropzone/dropzone.css') }}" rel="stylesheet">
    <style>
        #description-editor {
            height: 300px;
        }
        .ql-container {
            font-size: 14px;
        }
        #mainImagePreview img {
            max-width: 150px;
            max-height: 150px;
            object-fit: cover;
            border-radius: 4px;
        }
        .dropzone .dz-preview .dz-image {
            width: 120px;
            height: 120px;
        }
        .dropzone .dz-preview .dz-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .remove-existing-image {
            z-index: 10;
        }
    </style>
@endsection

@section('javascript')
    <!-- Quill Editor JS -->
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <!-- Dropzone JS -->
    <script src="{{ asset('assets/vendors/dropzone/dropzone-min.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Track deleted gallery images
            var deletedGalleryImageIds = [];

            // Initialize Quill Editor for description field
            var quill = new Quill('#description-editor', {
                theme: 'snow',
                modules: {
                    toolbar: [
                        [{ 'header': [1, 2, 3, false] }],
                        ['bold', 'italic', 'underline', 'strike'],
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                        [{ 'align': [] }],
                        ['link', 'image'],
                        ['clean']
                    ]
                },
                placeholder: 'Enter Car Description...'
            });

            // Hide the original textarea
            $('#description').hide();

            // Set existing content in Quill editor
            var existingContent = $('#description').val();
            if (existingContent) {
                quill.root.innerHTML = existingContent;
            }

            // Update hidden textarea with Quill content before form submission
            $('#carForm').on('submit', function(e) {
                var descriptionContent = quill.root.innerHTML;
                $('#description').val(descriptionContent);

                // Set deleted gallery images
                $('#deletedGalleryImages').val(deletedGalleryImageIds.join(','));
            });

            // Initialize Select2 for all dropdowns with proper configuration
            $('.select2').each(function() {
                $(this).select2({
                    width: '100%',
                    placeholder: $(this).find('option[value=""]').text() || 'Select an option',
                    allowClear: true,
                    dropdownParent: $(this).closest('.card-body, .modal-body, body')
                });
            });

            // Main image preview
            $('#main_image').on('change', function(e) {
                const file = e.target.files[0];
                if (file && file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(event) {
                        // Hide current image if exists
                        $('#currentMainImage').hide();
                        $('#mainImagePreview').html(
                            '<label class="text-muted small d-block mb-1">New Main Image Preview:</label>' +
                            '<img src="' + event.target.result + '" class="img-thumbnail" alt="Main Image Preview">'
                        );
                    };
                    reader.readAsDataURL(file);
                } else {
                    $('#mainImagePreview').html('');
                }
            });

            // Remove existing gallery image
            $(document).on('click', '.remove-existing-image', function(e) {
                e.preventDefault();
                var imageId = $(this).data('image-id');
                var $item = $(this).closest('.existing-gallery-item');
                
                // Add to deleted list
                if (deletedGalleryImageIds.indexOf(imageId) === -1) {
                    deletedGalleryImageIds.push(imageId);
                }
                
                // Remove from view
                $item.fadeOut(300, function() {
                    $(this).remove();
                });
            });

            // Initialize Dropzone for gallery images
            if (typeof Dropzone !== 'undefined') {
                Dropzone.autoDiscover = false;
                
                // Get the preview template and container
                var dropzoneElement = document.querySelector('#dropzone-gallery');
                var previewContainer = dropzoneElement.querySelector('.dz-preview');
                var previewTemplate = previewContainer.innerHTML;
                
                // Clear the preview container
                previewContainer.innerHTML = '';
                
                var galleryDropzone = new Dropzone('#dropzone-gallery', {
                    url: '#',
                    autoProcessQueue: false,
                    maxFilesize: 5,
                    acceptedFiles: 'image/*',
                    addRemoveLinks: false,
                    parallelUploads: 10,
                    thumbnailWidth: 120,
                    thumbnailHeight: 120,
                    previewsContainer: previewContainer,
                    previewTemplate: previewTemplate,
                    dictDefaultMessage: 'Drop your images here or click to browse',
                    dictFileTooBig: 'File is too big (@{{filesize}}MB). Max filesize: @{{maxFilesize}}MB.',
                    dictInvalidFileType: 'Invalid file type. Only images are allowed.',
                    init: function() {
                        var myDropzone = this;
                        
                        // Store reference globally
                        window.galleryDropzone = myDropzone;

                        // Handle form submission - append Dropzone files to form
                        $('#carForm').on('submit', function(e) {
                            // Remove any existing hidden file inputs from previous submissions
                            $(this).find('input[name="gallery_images[]"]').not('.fallback input').remove();
                            
                            // Append files from Dropzone to form
                            if (myDropzone.files.length > 0) {
                                myDropzone.files.forEach(function(file) {
                                    // Create a hidden input with the file
                                    var input = document.createElement('input');
                                    input.type = 'file';
                                    input.name = 'gallery_images[]';
                                    input.style.display = 'none';
                                    
                                    // Use DataTransfer to add the file
                                    var dataTransfer = new DataTransfer();
                                    dataTransfer.items.add(file);
                                    input.files = dataTransfer.files;
                                    
                                    document.getElementById('carForm').appendChild(input);
                                });
                            }
                        });
                    }
                });
            }
        });
    </script>
@endsection