@extends('layouts.admin')
@section('title', 'آلبوم تصاویر')
@section('content')
<div class="space-y-8">
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-black text-slate-700">آلبوم تصاویر ویرایشگر</h1>
        <span class="text-xs font-bold text-slate-400">تصاویری که در توضیحات محصولات استفاده می‌شوند</span>
    </div>

    <!-- Upload Card -->
    <div class="bg-white p-6 rounded-3xl clay-card">
        <h2 class="text-lg font-black text-slate-700 mb-4">آپلود تصویر جدید</h2>
        <form action="{{ route('admin.album.store') }}" method="POST" enctype="multipart/form-data" class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
            @csrf
            <div>
                <label class="block text-sm font-bold text-slate-500 mb-2">عنوان تصویر (اختیاری):</label>
                <input type="text" name="title" placeholder="مثلاً: تصویر شماره یک" class="w-full border rounded-xl p-3 outline-none">
            </div>

            <div>
                <label class="block text-sm font-bold text-slate-500 mb-2">انتخاب فایل تصویر:</label>
                <div id="drop-zone" class="border-2 border-dashed border-slate-300 hover:border-indigo-500 rounded-xl p-6 text-center cursor-pointer transition bg-slate-50 flex flex-col items-center justify-center min-h-[100px]">
                    <svg class="w-8 h-8 text-slate-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
                    <p class="text-xs text-slate-500 font-bold mb-1">فایل تصویر را بکشید و رها کنید یا کلیک کنید</p>
                    <input type="file" id="file-input" name="image" accept="image/*" required class="hidden">
                    <span id="file-name-preview" class="text-xs text-indigo-600 font-bold hidden mt-1"></span>
                </div>
            </div>

            <div class="md:col-span-2 flex justify-end">
                <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2.5 px-6 rounded-xl shadow transition duration-200">شروع آپلود</button>
            </div>
        </form>
    </div>

    <!-- Gallery Grid -->
    <div class="bg-white p-6 rounded-3xl clay-card">
        <h2 class="text-lg font-black text-slate-700 mb-6">آلبوم تصاویر ({{ count($images) }} تصویر)</h2>
        @if(count($images) > 0)
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
                @foreach($images as $img)
                    @php
                        $fullUrl = asset('storage/' . $img->image_path);
                    @endphp
                    <div class="group relative rounded-2xl overflow-hidden border border-white/50 bg-[#e0e5ec] p-3 flex flex-col justify-between" style="box-shadow: 6px 6px 12px rgba(163, 177, 198, 0.5), -6px -6px 12px rgba(255, 255, 255, 0.8);">
                        <div class="aspect-square w-full rounded-xl overflow-hidden bg-slate-200 relative mb-3">
                            <img src="{{ $fullUrl }}" alt="{{ $img->title }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                        </div>
                        
                        <div class="text-center space-y-2">
                            <span class="text-[10px] font-bold text-slate-500 block truncate" title="{{ $img->title }}">{{ $img->title }}</span>
                            
                            <div class="flex gap-1 justify-center">
                                <!-- Copy Link -->
                                <button onclick="copyToClipboard('{{ $fullUrl }}', this)" class="bg-slate-300/50 hover:bg-indigo-100 text-slate-600 hover:text-indigo-600 p-1.5 rounded-lg text-xs font-bold transition flex items-center justify-center gap-1 flex-1">
                                    <span>کپی لینک</span>
                                </button>
                                
                                <!-- Delete -->
                                <form action="{{ route('admin.album.destroy', $img->id) }}" method="POST" onsubmit="return confirm('آیا از حذف این تصویر مطمئن هستید؟');" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="bg-rose-100 hover:bg-rose-600 text-rose-600 hover:text-white p-1.5 rounded-lg text-xs font-bold transition flex items-center justify-center">
                                        حذف
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="py-12 text-center border-2 border-dashed border-slate-300 rounded-3xl">
                <p class="text-slate-400 font-extrabold text-sm">هیچ تصویری در آلبوم آپلود نشده است.</p>
            </div>
        @endif
    </div>
</div>

<script>
    // Drag & Drop
    const dropZone = document.getElementById('drop-zone');
    const fileInput = document.getElementById('file-input');
    const fileNamePreview = document.getElementById('file-name-preview');

    dropZone.addEventListener('click', () => fileInput.click());

    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('border-indigo-500', 'bg-indigo-50/50');
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, () => {
            dropZone.classList.remove('border-indigo-500', 'bg-indigo-50/50');
        });
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        if (e.dataTransfer.files.length) {
            fileInput.files = e.dataTransfer.files;
            showFileName();
        }
    });

    fileInput.addEventListener('change', showFileName);

    function showFileName() {
        const file = fileInput.files[0];
        if (file) {
            fileNamePreview.innerText = file.name;
            fileNamePreview.classList.remove('hidden');
        }
    }

    // Copy to clipboard
    function copyToClipboard(text, btn) {
        navigator.clipboard.writeText(text).then(() => {
            const originalText = btn.innerHTML;
            btn.innerHTML = 'کپی شد! ✓';
            btn.classList.add('bg-green-100', 'text-green-600');
            setTimeout(() => {
                btn.innerHTML = originalText;
                btn.classList.remove('bg-green-100', 'text-green-600');
            }, 2000);
        });
    }
</script>
@endsection