@extends('backend.template-admin')

@section('content')
    <div class="w-full">
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-semibold text-gray-800">Edit Banner</h2>
                <a href="{{ route('admin.banner.index') }}" 
                   class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition">
                    Kembali
                </a>
            </div>

            @if ($errors->any())
                <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
                    <h4 class="text-sm font-medium text-red-800 mb-2">Terjadi kesalahan:</h4>
                    <ul class="text-sm text-red-700 list-disc list-inside">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('admin.banner.update', $banner) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                @csrf
                @method('PUT')

                <div class="mb-4 p-4 bg-gray-50 rounded-lg">
                    <p class="text-sm text-gray-600"><strong>Slug saat ini:</strong> {{ $banner->slug }}</p>
                    <p class="text-xs text-gray-500 mt-1">Slug akan di-generate otomatis jika banner diupdate</p>
                </div>

                <div>
                    <label for="banner" class="block text-sm font-medium text-gray-700 mb-2">Upload Banner</label>
                    
                    @if($banner->banner)
                        <div class="mb-4">
                            <p class="text-sm text-gray-600 mb-2">Banner saat ini:</p>
                            <img src="{{ $banner->banner }}" alt="{{ $banner->slug }}" class="w-32 h-20 object-cover rounded border">
                        </div>
                    @endif
                    
                    <div class="relative">
                        <div id="drop-area" class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-orange-400 transition-colors duration-200 @error('banner') border-red-500 @enderror">
                            <div id="upload-content">
                                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <div class="mt-4">
                                    <label for="banner" class="cursor-pointer">
                                        <span class="mt-2 block text-sm font-medium text-gray-900">
                                            Drag and drop gambar atau 
                                            <span class="text-orange-600 underline">klik untuk pilih file</span>
                                        </span>
                                    </label>
                                    <p class="mt-1 text-xs text-gray-500">Format: JPEG, PNG, JPG, GIF. Maksimal 2MB. Kosongkan jika tidak ingin mengubah banner</p>
                                </div>
                            </div>
                            <div id="preview-container" class="hidden">
                                <img id="image-preview" class="w-full h-48 object-cover rounded border" src="" alt="Preview">
                                <button type="button" id="remove-image" class="mt-2 text-red-600 hover:text-red-800 text-sm">Hapus gambar</button>
                            </div>
                        </div>
                        <input type="file" 
                               name="banner" 
                               id="banner" 
                               accept="image/jpeg,image/png,image/jpg,image/gif"
                               class="hidden">
                    </div>
                    @error('banner')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="status" class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                    <select name="status" 
                            id="status" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent @error('status') border-red-500 @enderror"
                            required>
                        <option value="">Pilih Status</option>
                        <option value="enable" {{ old('status', $banner->status) == 'enable' ? 'selected' : '' }}>Enable</option>
                        <option value="disable" {{ old('status', $banner->status) == 'disable' ? 'selected' : '' }}>Disable</option>
                    </select>
                    @error('status')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex gap-4">
                    <button type="submit" 
                            class="bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
                            onclick="this.disabled=true; this.innerHTML='<span class=\'animate-pulse\'>Mengupdate...</span>'; this.form.submit();">
                        Update
                    </button>
                    <a href="{{ route('admin.banner.index') }}" 
                       class="bg-gray-300 hover:bg-gray-400 text-gray-700 px-6 py-2 rounded-lg transition">
                        Batal
                    </a>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const dropArea = document.getElementById('drop-area');
            const fileInput = document.getElementById('banner');
            const uploadContent = document.getElementById('upload-content');
            const previewContainer = document.getElementById('preview-container');
            const imagePreview = document.getElementById('image-preview');
            const removeButton = document.getElementById('remove-image');

            // Prevent default drag behaviors
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                dropArea.addEventListener(eventName, preventDefaults, false);
                document.body.addEventListener(eventName, preventDefaults, false);
            });

            // Highlight drop area when item is dragged over it
            ['dragenter', 'dragover'].forEach(eventName => {
                dropArea.addEventListener(eventName, highlight, false);
            });

            ['dragleave', 'drop'].forEach(eventName => {
                dropArea.addEventListener(eventName, unhighlight, false);
            });

            // Handle dropped files
            dropArea.addEventListener('drop', handleDrop, false);
            
            // Handle file input change
            fileInput.addEventListener('change', function(e) {
                const files = e.target.files;
                if (files.length > 0) {
                    handleFiles(files);
                }
            });

            // Remove image functionality
            removeButton.addEventListener('click', function() {
                fileInput.value = '';
                showUploadContent();
            });

            function preventDefaults(e) {
                e.preventDefault();
                e.stopPropagation();
            }

            function highlight() {
                dropArea.classList.add('border-orange-500', 'bg-orange-50');
            }

            function unhighlight() {
                dropArea.classList.remove('border-orange-500', 'bg-orange-50');
            }

            function handleDrop(e) {
                const dt = e.dataTransfer;
                const files = dt.files;
                handleFiles(files);
            }

            function handleFiles(files) {
                if (files.length > 0) {
                    const file = files[0];
                    
                    // Validate file type
                    if (!file.type.startsWith('image/')) {
                        alert('Harap pilih file gambar yang valid.');
                        return;
                    }

                    // Validate file size (2MB = 2 * 1024 * 1024 bytes)
                    if (file.size > 2 * 1024 * 1024) {
                        alert('Ukuran file maksimal 2MB.');
                        return;
                    }

                    // Create DataTransfer object to set files
                    const dataTransfer = new DataTransfer();
                    dataTransfer.items.add(file);
                    fileInput.files = dataTransfer.files;

                    // Show preview
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        imagePreview.src = e.target.result;
                        showPreview();
                    };
                    reader.readAsDataURL(file);
                }
            }

            function showPreview() {
                uploadContent.classList.add('hidden');
                previewContainer.classList.remove('hidden');
            }

            function showUploadContent() {
                uploadContent.classList.remove('hidden');
                previewContainer.classList.add('hidden');
            }
        });
    </script>
@endsection