@extends('admin.layouts.app')

@section('title', 'Create Banner')

@section('content')
<div class="space-y-6">
    <div class="flex items-center space-x-4">
        <a href="{{ route('admin.banners.index') }}" class="p-2 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-xl">
            <i data-lucide="arrow-left" class="w-5 h-5 text-slate-500"></i>
        </a>
        <div>
            <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Create Banner</h1>
            <p class="mt-1 text-sm text-slate-500">Add a new promotional banner</p>
        </div>
    </div>

    <form action="{{ route('admin.banners.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div class="lg:col-span-2 space-y-6">
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Banner Details</h2>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Title</label>
                            <input type="text" name="title" value="{{ old('title') }}"
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700"
                                placeholder="Banner title (optional)">
                        </div>
                        
                        <div x-data="bannerImageUploader()">
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Banner Image *</label>
                            <div class="border-2 border-dashed rounded-xl p-6 text-center transition-colors"
                                 :class="isDragging ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20' : 'border-slate-300 dark:border-slate-600 hover:border-indigo-500'"
                                 @dragenter.prevent="isDragging = true"
                                 @dragover.prevent="isDragging = true"
                                 @dragleave.prevent="isDragging = false"
                                 @drop.prevent="handleDrop($event)">
                                <input type="file" name="image" id="bannerImage" accept="image/*" class="hidden" 
                                       :required="!hasImage"
                                       @change="handleFileSelect($event)">
                                
                                <!-- Preview with delete button -->
                                <div x-show="hasImage" class="mb-4">
                                    <div class="relative inline-block">
                                        <img :src="previewUrl" alt="Preview" class="max-h-48 mx-auto rounded-lg">
                                        <button type="button" 
                                                @click="removeImage()"
                                                class="absolute -top-2 -right-2 w-7 h-7 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors shadow-lg">
                                            <i data-lucide="x" class="w-4 h-4"></i>
                                        </button>
                                    </div>
                                    <label for="bannerImage" class="cursor-pointer inline-flex items-center px-3 py-1.5 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 rounded-lg text-sm hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors mt-3">
                                        <i data-lucide="upload" class="w-4 h-4 mr-1"></i>
                                        Change Image
                                    </label>
                                </div>
                                
                                <!-- Upload prompt -->
                                <label for="bannerImage" class="cursor-pointer" x-show="!hasImage">
                                    <i data-lucide="upload-cloud" class="w-12 h-12 text-slate-400 mx-auto mb-2"></i>
                                    <p class="text-sm text-slate-600 dark:text-slate-400">Click to upload or drag and drop</p>
                                    <p class="text-xs text-slate-400 mt-1">Recommended: 1920x600 for hero, 728x90 for top/bottom</p>
                                </label>
                            </div>
                            @error('image')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Link URL</label>
                            <input type="url" name="link" value="{{ old('link') }}"
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700"
                                placeholder="https://example.com/page">
                        </div>
                        
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Position *</label>
                                <select name="position" required class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700">
                                    @foreach(\App\Models\Banner::getPositions() as $key => $label)
                                    <option value="{{ $key }}" {{ old('position') == $key ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                                @error('position')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Sort Order</label>
                                <input type="number" name="sort_order" value="{{ old('sort_order', 0) }}" min="0"
                                    class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="space-y-6">
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Status</h2>
                    <label class="flex items-center justify-between cursor-pointer">
                        <span class="text-sm text-slate-700 dark:text-slate-300">Active</span>
                        <input type="checkbox" name="status" value="1" checked class="sr-only peer">
                        <div class="relative w-11 h-6 bg-slate-200 rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500"></div>
                    </label>
                </div>

                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <button type="submit" class="w-full px-4 py-3 bg-indigo-600 text-white rounded-xl font-medium hover:bg-indigo-700">
                        Create Banner
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
function bannerImageUploader() {
    return {
        isDragging: false,
        previewUrl: null,
        hasImage: false,
        
        handleFileSelect(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.previewUrl = e.target.result;
                    this.hasImage = true;
                    this.$nextTick(() => {
                        if (typeof reinitIcons !== 'undefined') reinitIcons();
                    });
                };
                reader.readAsDataURL(file);
            }
        },
        
        handleDrop(event) {
            this.isDragging = false;
            const file = event.dataTransfer.files[0];
            if (file && file.type.startsWith('image/')) {
                const input = document.getElementById('bannerImage');
                const dt = new DataTransfer();
                dt.items.add(file);
                input.files = dt.files;
                input.dispatchEvent(new Event('change'));
            }
        },
        
        removeImage() {
            this.previewUrl = null;
            this.hasImage = false;
            document.getElementById('bannerImage').value = '';
            this.$nextTick(() => {
                if (typeof reinitIcons !== 'undefined') reinitIcons();
            });
        }
    }
}
</script>
@endpush
@endsection