@extends('layouts.admin')

@section('header', 'Tambah Testimoni Baru')

@section('content')
<div class="max-w-4xl mx-auto">
    <form action="{{ route('admin.reviews.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="bg-white rounded-xl shadow-md p-6 mb-6">
            <h3 class="text-lg font-bold text-gray-800 mb-4 border-b pb-2">Detail Testimoni</h3>
            
            @if($errors->any())
                <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4">
                    <ul class="list-disc list-inside">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="flex flex-col md:grid md:grid-cols-2 gap-6">
                <!-- User Info -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nama Member</label>
                    <input type="text" name="user_name" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="Nama Lengkap">
                </div>

                <!-- Rating -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Rating</label>
                    <select name="rating" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
                        <option value="5" selected>5 Bintang</option>
                        <option value="4">4 Bintang</option>
                        <option value="3">3 Bintang</option>
                        <option value="2">2 Bintang</option>
                        <option value="1">1 Bintang</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Link Foto Profil (Opsional)</label>
                    <input type="url" name="profile_photo" placeholder="https://..." class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
                </div>

                <!-- Video URL -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Link Video (Opsional)</label>
                    <input type="url" name="video_url" placeholder="https://..." class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
                    <p class="text-xs text-gray-500 mt-1">Masukkan link video (misal: YouTube, Vimeo, atau direct link).</p>
                </div>

                <!-- Product Selection -->
                <div class="col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Pilih Produk (Opsional)</label>
                    
                    <!-- Category Filter -->
                    <div class="mb-4">
                        <select id="category_filter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500 bg-white">
                            <option value="">-- Pilih Kategori Produk --</option>
                            <option value="general">Umum / Tidak Ada Produk Spesifik</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Product List Container (Hidden by default) -->
                    <div id="product_list_container" class="hidden border border-gray-300 rounded-lg p-4 h-64 overflow-y-auto bg-gray-50 custom-scrollbar transition-all duration-300">
                        <!-- General Option -->
                        <div id="products_general" class="product-group hidden">
                            <label class="flex items-center gap-3 p-3 hover:bg-white rounded-lg cursor-pointer transition mb-2 border-b border-gray-200 bg-white shadow-sm border-l-4 border-l-yellow-500">
                                <input type="radio" name="product_id" value="" checked class="w-4 h-4 text-yellow-600 focus:ring-yellow-500 border-gray-300">
                                <span class="font-medium text-gray-800 text-sm">Gunakan sebagai Testimoni Umum (Tanpa Produk)</span>
                            </label>
                        </div>

                        @foreach($categories as $category)
                            <div id="products_category_{{ $category->id }}" class="product-group hidden">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                                    @forelse($category->products as $product)
                                        <label class="flex items-center gap-3 p-2 bg-white border border-gray-200 rounded-lg hover:border-yellow-500 hover:shadow-sm cursor-pointer transition group">
                                            <input type="radio" name="product_id" value="{{ $product->id }}" class="w-4 h-4 text-yellow-600 focus:ring-yellow-500 border-gray-300">
                                            <div class="flex items-center gap-3 flex-1 min-w-0">
                                                @if($product->image)
                                                    <img src="{{ $product->image }}" class="w-10 h-10 object-cover rounded bg-gray-100" alt="{{ $product->name }}">
                                                @else
                                                    <div class="w-10 h-10 bg-yellow-100 rounded flex items-center justify-center text-yellow-600 text-xs font-bold">
                                                        {{ substr($product->name, 0, 1) }}
                                                    </div>
                                                @endif
                                                <div class="truncate">
                                                    <p class="font-medium text-gray-800 text-sm truncate group-hover:text-yellow-600 transition">{{ $product->name }}</p>
                                                    <p class="text-xs text-gray-500">Rp {{ number_format($product->current_price, 0, ',', '.') }}</p>
                                                </div>
                                            </div>
                                        </label>
                                    @empty
                                        <div class="col-span-2 text-center py-4 bg-white rounded border border-dashed border-gray-300">
                                            <p class="text-xs text-gray-400 italic">Tidak ada produk dalam kategori ini.</p>
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const categoryFilter = document.getElementById('category_filter');
                        const productListContainer = document.getElementById('product_list_container');
                        const productGroups = document.querySelectorAll('.product-group');
                        const radioButtons = document.querySelectorAll('input[name="product_id"]');

                        categoryFilter.addEventListener('change', function() {
                            const selectedCategory = this.value;

                            // Uncheck all radios to prevent submitting hidden selection
                            radioButtons.forEach(radio => radio.checked = false);

                            // Hide all groups first
                            productGroups.forEach(group => group.classList.add('hidden'));
                            
                            if (selectedCategory) {
                                productListContainer.classList.remove('hidden');
                                
                                if (selectedCategory === 'general') {
                                    document.getElementById('products_general').classList.remove('hidden');
                                    // Auto-select general option
                                    const generalRadio = document.querySelector('input[name="product_id"][value=""]');
                                    if (generalRadio) generalRadio.checked = true;
                                } else {
                                    const targetGroup = document.getElementById('products_category_' + selectedCategory);
                                    if (targetGroup) {
                                        targetGroup.classList.remove('hidden');
                                    }
                                }
                            } else {
                                productListContainer.classList.add('hidden');
                            }
                        });
                    });
                </script>

                <!-- Comment -->
                <div class="col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Komentar</label>
                    <textarea name="comment" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="Tulis komentar..."></textarea>
                </div>

                <!-- Review Images -->
                <div class="col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Foto Testimoni (Maks 5, Opsional)</label>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        @for($i=1; $i<=5; $i++)
                            <input type="url" name="images[]" placeholder="URL Foto {{ $i }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
                        @endfor
                    </div>
                    
                    <div class="mt-4 border-t border-gray-200 pt-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Atau Upload Foto (Opsional, JPG/PNG)</label>
                        <div class="flex items-center justify-center w-full">
                            <label for="image_uploads" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition">
                                <div class="flex flex-col items-center justify-center pt-5 pb-6">
                                    <svg class="w-8 h-8 mb-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
                                    </svg>
                                    <p class="mb-2 text-sm text-gray-500"><span class="font-semibold">Klik untuk upload</span> atau drag and drop</p>
                                    <p class="text-xs text-gray-500">JPG atau PNG (MAX. 5MB)</p>
                                </div>
                                <input id="image_uploads" name="image_uploads[]" type="file" class="hidden" multiple accept=".jpg,.jpeg,.png" onchange="previewFiles(this)" />
                            </label>
                        </div>
                        <div id="file_preview" class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4 hidden"></div>
                    </div>
                </div>

                <!-- Admin Reply Section -->
                <div class="col-span-2 border-t border-gray-200 pt-6 mt-4">
                    <h4 class="text-md font-bold text-gray-800 mb-4">Balasan Admin</h4>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Isi Balasan</label>
                        <textarea name="reply_comment" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="Tulis balasan admin..."></textarea>
                        <p class="text-xs text-gray-500 mt-1">Foto profil admin akan menggunakan pengaturan global.</p>
                    </div>
                </div>

                <script>
                    function previewFiles(input) {
                        const previewContainer = document.getElementById('file_preview');
                        previewContainer.innerHTML = '';
                        previewContainer.classList.add('hidden');

                        if (input.files && input.files.length > 0) {
                            previewContainer.classList.remove('hidden');
                            Array.from(input.files).forEach(file => {
                                const reader = new FileReader();
                                reader.onload = function(e) {
                                    const div = document.createElement('div');
                                    div.className = 'relative aspect-square rounded-lg overflow-hidden border border-gray-200';
                                    div.innerHTML = `<img src="${e.target.result}" class="w-full h-full object-cover">`;
                                    previewContainer.appendChild(div);
                                }
                                reader.readAsDataURL(file);
                            });
                        }
                    }
                </script>
            </div>
        </div>

        <div class="flex gap-4">
            <a href="{{ route('admin.reviews.index') }}" class="w-1/3 bg-gray-500 text-white font-bold py-3 rounded-xl hover:bg-gray-600 transition shadow-lg text-center">
                Batal
            </a>
            <button type="submit" class="w-2/3 bg-yellow-600 text-white font-bold py-3 rounded-xl hover:bg-yellow-700 transition shadow-lg">
                Simpan Testimoni
            </button>
        </div>
    </form>
</div>
@endsection