@php
    $isEdit = isset($slider);
@endphp

<form action="{{ $isEdit ? route('admin.sliders.update', $slider) : route('admin.sliders.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8" id="sliderForm">
    @csrf
    @if($isEdit)
        @method('PUT')
    @endif

    <div class="space-y-6">
        <div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6">
            <div class="md:grid md:grid-cols-3 md:gap-6">
                <div class="md:col-span-1">
                    <h3 class="text-lg font-medium leading-6 text-gray-900">Slider Information</h3>
                    <p class="mt-1 text-sm text-gray-500">Basic information about the slider.</p>
                </div>
                <div class="mt-5 md:mt-0 md:col-span-2 space-y-6">
                    <div>
                        <x-admin.input
                            type="text"
                            name="title"
                            label="Title"
                            :value="old('title', $slider->title ?? '')"
                            required
                        />
                    </div>

                    <div>
                        <x-admin.textarea
                            name="description"
                            label="Description"
                            :value="old('description', $slider->description ?? '')"
                            rows="3"
                        />
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700">
                            Slider Images
                        </label>
                        @if($isEdit && $slider->images->count() > 0)
                            <div class="mt-2 mb-4">
                                <div class="grid grid-cols-2 gap-4">
                                    @foreach($slider->images as $image)
                                        <div class="relative">
                                            <img src="{{ asset('storage/' . $image->image_path) }}" alt="{{ $slider->title }}" class="h-48 w-full object-cover rounded-lg">
                                            <div class="absolute top-2 right-2">
                                                <div class="flex space-x-2">
                                                    <form action="{{ route('admin.slider-images.set-cover', $image) }}" method="POST" class="inline">
                                                        @csrf
                                                        @method('PATCH')
                                                        <button type="submit" class="p-1 bg-white rounded-full shadow-sm hover:bg-gray-100 {{ $image->is_cover ? 'text-yellow-500' : 'text-gray-400' }}">
                                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                                            </svg>
                                                        </button>
                                                    </form>
                                                    <form action="{{ route('admin.slider-images.destroy', $image) }}" method="POST" class="inline delete-image-form">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="p-1 bg-white rounded-full shadow-sm hover:bg-gray-100 text-red-500">
                                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                                                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                                                            </svg>
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <div class="image-upload-container mt-4">
                            <div class="custom-file-upload">
                                <div class="upload-area p-4 text-center border-2 border-dashed border-indigo-300 rounded-lg bg-white">
                                    <input type="file" name="images[]" id="imageUpload" class="hidden" multiple accept="image/jpeg,image/png,image/webp">
                                    <label for="imageUpload" class="cursor-pointer">
                                        <div class="text-indigo-500 mb-3">
                                            <svg class="mx-auto h-12 w-12" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                                            </svg>
                                        </div>
                                        <div class="text-indigo-600 font-medium">Click to upload images</div>
                                        <p class="text-gray-500 text-sm mt-1">
                                            Max 10 images, up to 5MB each<br>
                                            JPG, PNG or WebP format
                                        </p>
                                    </label>
                                </div>
                                <div id="imagePreviewContainer" class="grid grid-cols-2 gap-4 mt-4">
                                    <!-- Selected images will be shown here -->
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                        <div>
                            <x-admin.input
                                type="url"
                                name="link_url"
                                label="Link URL"
                                :value="old('link_url', $slider->link_url ?? '')"
                            />
                        </div>

                        <div>
                            <x-admin.input
                                type="text"
                                name="link_text"
                                label="Link Text"
                                :value="old('link_text', $slider->link_text ?? '')"
                            />
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                        <div>
                            <x-admin.input
                                type="datetime-local"
                                name="start_date"
                                label="Start Date"
                                :value="old('start_date', $slider->start_date ? $slider->start_date->format('Y-m-d\TH:i') : '')"
                            />
                        </div>

                        <div>
                            <x-admin.input
                                type="datetime-local"
                                name="end_date"
                                label="End Date"
                                :value="old('end_date', $slider->end_date ? $slider->end_date->format('Y-m-d\TH:i') : '')"
                            />
                        </div>
                    </div>

                    <div class="flex items-center space-x-4">
                        <div class="flex-1">
                            <x-admin.input
                                type="number"
                                name="sort_order"
                                label="Sort Order"
                                :value="old('sort_order', $slider->sort_order ?? 0)"
                            />
                        </div>
                        <div class="flex items-start pt-8">
                            <div class="flex items-center h-5">
                                <input type="checkbox" name="is_active" value="1" {{ old('is_active', $slider->is_active ?? true) ? 'checked' : '' }} class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-sm">
                                <label for="is_active" class="font-medium text-gray-700">Active</label>
                                <p class="text-gray-500">Show this slider on the website</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="flex justify-end space-x-3">
        <a href="{{ route('admin.sliders.index') }}" class="inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            Cancel
        </a>
        <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            {{ $isEdit ? 'Update' : 'Create' }} Slider
        </button>
    </div>
</form>

@push('styles')
<style>
.upload-area {
    min-height: 200px;
    transition: all 0.3s ease;
}

.upload-area:hover {
    border-color: rgb(79, 70, 229) !important;
    background-color: rgb(238, 242, 255) !important;
}

.image-preview {
    position: relative;
}

.image-preview img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 0.5rem;
}

.image-preview .remove-image {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 9999px;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgb(239, 68, 68);
    transition: all 0.2s ease;
}

.image-preview .remove-image:hover {
    background: white;
    color: rgb(185, 28, 28);
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const imageUpload = document.getElementById('imageUpload');
    const previewContainer = document.getElementById('imagePreviewContainer');
    const maxFiles = 10;
    const maxFileSize = 5 * 1024 * 1024; // 5MB
    let selectedFiles = [];

    imageUpload.addEventListener('change', function(e) {
        const files = Array.from(e.target.files);
        
        // Check file count
        if (selectedFiles.length + files.length > maxFiles) {
            alert(`You can upload a maximum of ${maxFiles} images.`);
            return;
        }

        files.forEach(file => {
            // Check file size
            if (file.size > maxFileSize) {
                alert(`${file.name} is too large. Maximum file size is 5MB.`);
                return;
            }

            // Check file type
            if (!file.type.match('image/(jpeg|png|webp)')) {
                alert(`${file.name} has an unsupported format. Only JPG, PNG and WebP formats are supported.`);
                return;
            }

            // Create preview
            const reader = new FileReader();
            reader.onload = function(e) {
                const preview = document.createElement('div');
                preview.className = 'image-preview';
                preview.innerHTML = `
                    <div class="relative">
                        <img src="${e.target.result}" class="rounded-lg shadow-sm" alt="Preview">
                        <button type="button" class="remove-image">
                            <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                            </svg>
                        </button>
                    </div>
                `;

                // Remove button functionality
                const removeBtn = preview.querySelector('.remove-image');
                removeBtn.addEventListener('click', function() {
                    preview.remove();
                    selectedFiles = selectedFiles.filter(f => f !== file);
                });

                previewContainer.appendChild(preview);
                selectedFiles.push(file);
            };
            reader.readAsDataURL(file);
        });
    });

    // Form submit validation
    document.getElementById('sliderForm').addEventListener('submit', function(e) {
        if (selectedFiles.length === 0 && !@json($isEdit)) {
            if (!confirm('No images selected. Do you want to continue?')) {
                e.preventDefault();
            }
        }
    });

    // Delete existing images
    document.querySelectorAll('.delete-image-form').forEach(form => {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            if (confirm('Are you sure you want to delete this image?')) {
                this.submit();
            }
        });
    });
});
</script>
@endpush