@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-4 py-8 w-full">
    <div class="flex justify-between items-center mb-8">
        <h1 class="text-3xl font-bold text-gray-800">افزودن محصول جدید</h1>
        <a href="{{ route('admin.shop.index') }}" class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold py-2.5 px-6 rounded-lg transition duration-200">بازگشت</a>
    </div>

    @if ($errors->any())
        <div class="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg">
            <ul class="list-disc pr-5">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('admin.shop.product.store') }}" method="POST" enctype="multipart/form-data" class="bg-white rounded-xl shadow p-8 border border-gray-100 space-y-6">
        @csrf

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">عنوان محصول:</label>
                <input type="text" name="title" required value="{{ old('title') }}" class="w-full border rounded-lg p-2.5 outline-none">
            </div>

            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">عنوان متا (Meta Title / Slug):</label>
                <input type="text" name="meta_title" placeholder="در صورت خالی بودن خودکار ایجاد می‌شود" value="{{ old('meta_title') }}" class="w-full border rounded-lg p-2.5 outline-none">
            </div>

            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">دسته‌بندی:</label>
                <select name="category_id" class="w-full border rounded-lg p-2.5 outline-none">
                    <option value="">بدون دسته بندی</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">قیمت اصلی (تومان):</label>
                <input type="number" name="price" required value="{{ old('price', 0) }}" class="w-full border rounded-lg p-2.5 outline-none">
            </div>

            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">قیمت با تخفیف (تومان) [اختیاری]:</label>
                <input type="number" name="discount_price" value="{{ old('discount_price') }}" class="w-full border rounded-lg p-2.5 outline-none">
            </div>

            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">تاریخ انقضای تخفیف [اختیاری]:</label>
                <input type="datetime-local" name="discount_expires_at" value="{{ old('discount_expires_at') }}" class="w-full border rounded-lg p-2.5 outline-none">
            </div>
        </div>

        <!-- Custom Details Section -->
        <div class="bg-gray-50/50 p-6 rounded-2xl border border-gray-200/50 space-y-4">
            <h3 class="text-sm font-bold text-gray-800 border-b pb-2">فیلدهای سفارشی و جزئیات محصول</h3>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
                <!-- Students Count -->
                <div class="border p-3.5 rounded-xl space-y-2 bg-white/50">
                    <div>
                        <label class="block text-[10px] font-black text-indigo-600 uppercase mb-1">عنوان فیلد دانشجو:</label>
                        <input type="text" name="students_count_label" value="{{ old('students_count_label', 'تعداد دانشجویان') }}" class="w-full border rounded-lg p-2 text-xs outline-none">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">تعداد نمایشی (پایه):</label>
                        <input type="number" name="students_count" value="{{ old('students_count', 0) }}" class="w-full border rounded-lg p-2 text-xs outline-none">
                    </div>
                </div>

                <!-- Language -->
                <div class="border p-3.5 rounded-xl space-y-2 bg-white/50">
                    <div>
                        <label class="block text-[10px] font-black text-indigo-600 uppercase mb-1">عنوان فیلد زبان:</label>
                        <input type="text" name="language_label" value="{{ old('language_label', 'زبان آموزش') }}" class="w-full border rounded-lg p-2 text-xs outline-none">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">زبان:</label>
                        <input type="text" name="language" value="{{ old('language', 'فارسی') }}" class="w-full border rounded-lg p-2 text-xs outline-none">
                    </div>
                </div>

                <!-- Duration -->
                <div class="border p-3.5 rounded-xl space-y-2 bg-white/50">
                    <div>
                        <label class="block text-[10px] font-black text-indigo-600 uppercase mb-1">عنوان فیلد مدت زمان:</label>
                        <input type="text" name="duration_label" value="{{ old('duration_label', 'مدت زمان آموزش') }}" class="w-full border rounded-lg p-2 text-xs outline-none">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">مدت زمان:</label>
                        <input type="text" name="duration" value="{{ old('duration') }}" class="w-full border rounded-lg p-2 text-xs outline-none">
                    </div>
                </div>

                <!-- Chapters -->
                <div class="border p-3.5 rounded-xl space-y-2 bg-white/50">
                    <div>
                        <label class="block text-[10px] font-black text-indigo-600 uppercase mb-1">عنوان سرفصل‌ها:</label>
                        <input type="text" name="chapters_count_label" value="{{ old('chapters_count_label', 'تعداد سرفصل‌ها') }}" class="w-full border rounded-lg p-2 text-xs outline-none">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">تعداد سرفصل‌ها:</label>
                        <input type="number" name="chapters_count" value="{{ old('chapters_count', 0) }}" class="w-full border rounded-lg p-2 text-xs outline-none">
                    </div>
                </div>

                <!-- Certificate -->
                <div class="border p-3.5 rounded-xl space-y-2 bg-white/50">
                    <div>
                        <label class="block text-[10px] font-black text-indigo-600 uppercase mb-1">عنوان مدرک/گواهی:</label>
                        <input type="text" name="certificate_label" value="{{ old('certificate_label', 'نوع گواهی') }}" class="w-full border rounded-lg p-2 text-xs outline-none">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">مدرک/گواهی:</label>
                        <input type="text" name="certificate" value="{{ old('certificate', 'دارد') }}" class="w-full border rounded-lg p-2 text-xs outline-none">
                    </div>
                </div>
            </div>
            
            <div>
                <label class="block text-xs font-bold text-gray-600 mb-2">لینک ویدیو یا پیش‌نمایش محصول (مثلاً آپارات، یوتیوب، یا فایل ویدیو مستقیم):</label>
                <input type="text" name="video_url" value="{{ old('video_url') }}" class="w-full border rounded-lg p-2.5 outline-none">
            </div>
        </div>

        <!-- Description with Visual/Code tab toggle -->
        <div>
            <label class="block text-sm font-bold text-gray-700 mb-2">توضیحات محصول:</label>
            <div class="flex items-center gap-1 bg-gray-100 p-1 rounded-t-xl border border-b-0 border-gray-300 w-fit">
                <button type="button" onclick="switchToVisual()" id="tab-visual" class="px-4 py-1.5 rounded-lg text-xs font-extrabold transition bg-white text-[#6c5ce7] shadow-sm">دیداری</button>
                <button type="button" onclick="switchToCode()" id="tab-code" class="px-4 py-1.5 rounded-lg text-xs font-extrabold transition text-gray-600 hover:bg-white/50">کد</button>
            </div>
            <textarea id="editor" name="description" class="w-full border border-gray-300 rounded-b-xl p-2.5 outline-none min-h-[300px]">{{ old('description') }}</textarea>
        </div>

        <!-- Album Drawer (Insert images directly to editor) -->
        <div class="bg-gray-50/50 p-6 rounded-2xl border border-gray-200/50 mt-4 space-y-4">
            <div class="flex justify-between items-center border-b pb-2">
                <h3 class="text-sm font-bold text-gray-800">آلبوم تصاویر (فراخوانی در ویرایشگر)</h3>
                <a href="{{ route('admin.album.index') }}" target="_blank" class="text-xs text-indigo-600 hover:underline">مدیریت آلبوم تصاویر ↗</a>
            </div>
            @if(isset($albumImages) && count($albumImages) > 0)
                <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-4 max-h-[220px] overflow-y-auto p-2 bg-white rounded-xl border">
                    @foreach($albumImages as $img)
                        @php
                            $fullUrl = asset('storage/' . $img->image_path);
                        @endphp
                        <div class="group relative rounded-xl overflow-hidden border border-gray-200 bg-gray-50 p-2 flex flex-col items-center justify-between shadow-sm">
                            <div class="aspect-square w-full rounded-lg overflow-hidden bg-gray-100 mb-2">
                                <img src="{{ $fullUrl }}" class="w-full h-full object-cover">
                            </div>
                            <button type="button" onclick="insertImageToEditor('{{ $fullUrl }}')" class="w-full bg-indigo-50 hover:bg-indigo-600 text-indigo-600 hover:text-white py-1 rounded text-[10px] font-bold transition">
                                درج در متن
                            </button>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-6 text-gray-400 text-xs">
                    تصویری در آلبوم وجود ندارد. ابتدا از بخش <a href="{{ route('admin.album.index') }}" target="_blank" class="text-indigo-600 underline">آلبوم تصاویر</a> عکس آپلود کنید.
                </div>
            @endif
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Drag & Drop Uploader -->
            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">تصویر شاخص:</label>
                <div id="drop-zone" class="border-2 border-dashed border-gray-300 hover:border-blue-500 rounded-xl p-6 text-center cursor-pointer transition bg-gray-50 flex flex-col items-center justify-center min-h-[150px]">
                    <svg class="w-12 h-12 text-gray-400 mb-3" 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-sm text-gray-500 font-bold mb-1">فایل تصویر را بکشید و رها کنید یا کلیک کنید</p>
                    <p class="text-xs text-gray-400">JPG, PNG, WEBP (حداکثر ۲ مگابایت)</p>
                    <input type="file" id="file-input" name="image" accept="image/*" class="hidden">
                    <img id="image-preview" class="mt-4 max-h-32 object-cover rounded-lg hidden">
                </div>
            </div>

            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">لینک دانلود محصول (مخصوص محصولات دیجیتالی):</label>
                <input type="url" name="download_link" value="{{ old('download_link') }}" class="w-full border rounded-lg p-2.5 outline-none">
            </div>
        </div>

        <div>
            <label class="block text-sm font-bold text-gray-700 mb-2">اطلاعات یا پیام تحویل (پس از خرید موفق نمایش داده می‌شود):</label>
            <textarea name="delivery_info" rows="3" class="w-full border rounded-lg p-2.5 outline-none">{{ old('delivery_info') }}</textarea>
        </div>

        <div class="flex items-center gap-3">
            <input type="checkbox" name="is_active" value="1" checked class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
            <label class="text-sm font-bold text-gray-700">محصول فعال باشد و در فروشگاه نمایش داده شود</label>
        </div>

        <div class="pt-4 border-t border-gray-100 flex justify-end">
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg shadow transition duration-200">ذخیره محصول</button>
        </div>
    </form>
</div>

<!-- Load CKEditor stable free version via CDN -->
<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
<script>
    let editorInstance = null;

    function initCKEditor() {
        if (!editorInstance) {
            CKEDITOR.addCss("@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css'); body { font-family: 'Vazirmatn', sans-serif !important; }");
            editorInstance = CKEDITOR.replace('editor', {
                language: 'fa',
                contentsLangDirection: 'rtl',
                height: 350,
                allowedContent: true,
                extraAllowedContent: '*(*);*{*}'
            });
        }
    }

    function insertImageToEditor(url) {
        if (editorInstance) {
            editorInstance.insertHtml('<img src="' + url + '" style="max-width:100%; height:auto;" />');
        } else {
            const textarea = document.getElementById('editor');
            const startPos = textarea.selectionStart;
            const endPos = textarea.selectionEnd;
            const textToInsert = '<img src="' + url + '" style="max-width:100%; height:auto;" />';
            textarea.value = textarea.value.substring(0, startPos) + textToInsert + textarea.value.substring(endPos, textarea.value.length);
        }
    }

    function switchToVisual() {
        document.getElementById('tab-visual').className = "px-4 py-1.5 rounded-lg text-xs font-extrabold transition bg-white text-[#6c5ce7] shadow-sm";
        document.getElementById('tab-code').className = "px-4 py-1.5 rounded-lg text-xs font-extrabold transition text-gray-600 hover:bg-white/50";
        initCKEditor();
    }

    function switchToCode() {
        document.getElementById('tab-visual').className = "px-4 py-1.5 rounded-lg text-xs font-extrabold transition text-gray-600 hover:bg-white/50";
        document.getElementById('tab-code').className = "px-4 py-1.5 rounded-lg text-xs font-extrabold transition bg-white text-[#6c5ce7] shadow-sm";
        if (editorInstance) {
            const data = editorInstance.getData();
            editorInstance.destroy();
            editorInstance = null;
            document.getElementById('editor').value = data;
        }
    }

    window.addEventListener('load', () => {
        initCKEditor();
    });

    // Drag & Drop File Upload Handler
    const dropZone = document.getElementById('drop-zone');
    const fileInput = document.getElementById('file-input');
    const imagePreview = document.getElementById('image-preview');

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

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

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

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

    fileInput.addEventListener('change', previewImage);

    function previewImage() {
        const file = fileInput.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                imagePreview.src = e.target.result;
                imagePreview.classList.remove('hidden');
            }
            reader.readAsDataURL(file);
        }
    }
</script>
@endsection