@extends('layouts.admin')

@section('title', 'مدیریت ' . ($section == 'academy' ? 'آکادمی' : 'آرشیو'))

@section('content')
    <div class="bg-white p-4 rounded-xl shadow-sm mb-6 flex flex-col md:flex-row justify-between items-center gap-4">
        
        <nav class="flex items-center text-sm text-gray-600 overflow-x-auto whitespace-nowrap w-full md:w-auto">
            <a href="{{ route('admin.content.index', ['section' => $section]) }}" class="font-bold text-blue-600 hover:underline">
                🏠 روت اصلی
            </a>
            @foreach($breadcrumbs as $crumb)
                <span class="mx-2">/</span>
                <a href="{{ route('admin.content.index', ['section' => $section, 'folderId' => $crumb->id]) }}" class="hover:underline">
                    {{ $crumb->folder_name }}
                </a>
            @endforeach
        </nav>

        <div class="flex gap-2 w-full md:w-auto" x-data>
            <button @click="$dispatch('open-folder-modal')" class="flex-1 bg-yellow-50 text-yellow-700 px-4 py-2 rounded-lg hover:bg-yellow-100 transition border border-yellow-200 text-sm font-bold">
                📁 پوشه جدید
            </button>
           @if($currentFolder)
                <form action="{{ route('admin.content.file.requestUpload', ['section' => $section]) }}" method="POST" class="inline">
                    @csrf
                    <input type="hidden" name="folder_id" value="{{ $currentFolder->id }}">
                    <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition shadow-md text-sm font-bold flex items-center gap-2">
                        <span>📤</span>  آپلود در ربات
                    </button>
                </form>
            @endif
        </div>
    </div>

    @if($folders->count() > 0)
        <h3 class="text-gray-500 font-bold mb-3 text-sm">پوشه‌ها</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-8">
            @foreach($folders as $folder)
                <div class="group relative bg-white p-4 rounded-xl shadow-sm border border-gray-100 hover:shadow-md hover:border-blue-200 transition flex flex-col items-center cursor-pointer">
                    <a href="{{ route('admin.content.index', ['section' => $section, 'folderId' => $folder->id]) }}" class="absolute inset-0 z-0"></a>
                    
                    <div class="text-4xl mb-2">📁</div>
                    <div class="text-gray-700 font-bold text-sm text-center truncate w-full">{{ $folder->folder_name }}</div>
                    
                    <form action="{{ route('admin.content.folder.delete', ['section' => $section, 'id' => $folder->id]) }}" method="POST" onsubmit="return confirm('آیا از حذف این پوشه مطمئن هستید؟');" class="absolute top-2 left-2 z-10 opacity-0 group-hover:opacity-100 transition">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="text-red-400 hover:text-red-600 bg-white rounded-full p-1 shadow-sm">
                            🗑️
                        </button>
                    </form>
                </div>
            @endforeach
        </div>
    @endif

    @if($files->count() > 0)
        <h3 class="text-gray-500 font-bold mb-3 text-sm">فایل‌ها</h3>
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <table class="w-full text-right">
                <thead class="bg-gray-50 text-gray-600 text-xs uppercase border-b">
                    <tr>
                        <th class="p-4">نوع</th>
                        <th class="p-4">نام فایل / کپشن</th>
                        <th class="p-4">قیمت</th>
                        <th class="p-4 text-center">عملیات</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 text-sm">
                    @foreach($files as $file)
                        <tr class="hover:bg-gray-50 group" x-data="{ editMode: false }">
                            <td class="p-4 text-2xl w-16 text-center">
                                @if($file->type == 'photo') 🖼️ @elseif($file->type == 'video') 🎥 @else 📄 @endif
                            </td>
                            <td class="p-4">
                                <div class="font-bold text-gray-800">{{ $file->file_name }}</div>
                                <div class="text-xs text-gray-500 truncate max-w-xs">{{ Str::limit($file->caption, 50) }}</div>
                                @if($file->is_premium)
                                    <span class="text-[10px] bg-yellow-100 text-yellow-700 px-1.5 py-0.5 rounded border border-yellow-200">💎 Premium</span>
                                @endif
                            </td>
                            <td class="p-4">
                                @if($file->price > 0 || $file->stars > 0)
                                    <div class="text-xs">
                                        @if($file->price > 0) <div>💰 {{ number_format($file->price) }} تومان</div> @endif
                                        @if($file->stars > 0) <div>⭐ {{ $file->stars }} استار</div> @endif
                                    </div>
                                @else
                                    <span class="text-green-600 text-xs font-bold">رایگان</span>
                                @endif
                            </td>
                            <td class="p-4 text-center">
                                <button @click="$dispatch('edit-file', { id: {{ $file->id }}, name: '{{ $file->file_name }}', caption: `{{ $file->caption }}`, price: {{ $file->price }}, stars: {{ $file->stars }}, is_premium: {{ $file->is_premium }} })" 
                                        class="text-blue-500 hover:bg-blue-50 p-2 rounded transition" title="ویرایش">
                                    ✏️
                                </button>
                                <form action="{{ route('admin.content.file.delete', ['section' => $section, 'id' => $file->id]) }}" method="POST" class="inline-block" onsubmit="return confirm('حذف شود؟');">
                                    @csrf
                                    @method('DELETE')
                                    <button class="text-red-500 hover:bg-red-50 p-2 rounded transition" title="حذف">
                                        🗑️
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @elseif($currentFolder && $folders->count() == 0)
        <div class="text-center py-10 text-gray-400 bg-white rounded-xl border-2 border-dashed border-gray-200">
            <div class="text-4xl mb-2">📂</div>
            <div>این پوشه خالی است</div>
        </div>
    @endif

    <div x-data="{ show: false }" @open-folder-modal.window="show = true" x-show="show" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50" style="display: none;">
        <div class="bg-white rounded-xl p-6 w-96 shadow-2xl" @click.away="show = false">
            <h3 class="font-bold text-lg mb-4">ساخت پوشه جدید</h3>
            <form action="{{ route('admin.content.folder.store', ['section' => $section]) }}" method="POST">
                @csrf
                <input type="hidden" name="parent_id" value="{{ $currentFolder->id ?? '' }}">
                <div class="mb-4">
                    <label class="block text-sm text-gray-600 mb-1">نام پوشه</label>
                    <input type="text" name="folder_name" class="w-full border rounded-lg p-2 focus:ring-2 focus:ring-blue-500 outline-none" required>
                </div>
                <div class="flex justify-end gap-2">
                    <button type="button" @click="show = false" class="text-gray-500 px-4 py-2 hover:bg-gray-100 rounded-lg">لغو</button>
                    <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">ایجاد</button>
                </div>
            </form>
        </div>
    </div>

    <div x-data="{ show: false }" @open-file-modal.window="show = true" x-show="show" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50" style="display: none;">
        <div class="bg-white rounded-xl p-6 w-[500px] shadow-2xl max-h-[90vh] overflow-y-auto" @click.away="show = false">
            <h3 class="font-bold text-lg mb-4">آپلود فایل جدید</h3>
            <form action="{{ route('admin.content.file.store', ['section' => $section]) }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="folder_id" value="{{ $currentFolder->id ?? '' }}">
                
                <div class="mb-4">
                    <label class="block text-sm text-gray-600 mb-1">انتخاب فایل</label>
                    <input type="file" name="file" class="w-full border rounded-lg p-2 text-sm" required>
                </div>

                <div class="mb-4">
                    <label class="block text-sm text-gray-600 mb-1">کپشن (توضیحات)</label>
                    <textarea name="caption" rows="3" class="w-full border rounded-lg p-2 outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                </div>

                <div class="grid grid-cols-2 gap-4 mb-4">
                    <div>
                        <label class="block text-sm text-gray-600 mb-1">قیمت (تومان)</label>
                        <input type="number" name="price" value="0" class="w-full border rounded-lg p-2 outline-none">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-600 mb-1">قیمت (استار)</label>
                        <input type="number" name="stars" value="0" class="w-full border rounded-lg p-2 outline-none">
                    </div>
                </div>

                <div class="mb-6 flex items-center gap-2">
                    <input type="checkbox" name="is_premium" id="prem" value="1" class="w-4 h-4 text-blue-600 rounded">
                    <label for="prem" class="text-sm font-medium text-gray-700">علامت‌گذاری به عنوان پرمیوم 💎</label>
                </div>

                <div class="flex justify-end gap-2">
                    <button type="button" @click="show = false" class="text-gray-500 px-4 py-2 hover:bg-gray-100 rounded-lg">لغو</button>
                    <button type="submit" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700">آپلود</button>
                </div>
            </form>
        </div>
    </div>

    <div x-data="{ show: false, data: {} }" @edit-file.window="show = true; data = $event.detail" x-show="show" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50" style="display: none;">
        <div class="bg-white rounded-xl p-6 w-[500px] shadow-2xl" @click.away="show = false">
            <h3 class="font-bold text-lg mb-4">ویرایش فایل</h3>
            <form :action="`{{ route('admin.content.file.update', ['section' => $section, 'id' => 'FILE_ID']) }}`.replace('FILE_ID', data.id)" method="POST">
                @csrf
                @method('PUT')
                
                <div class="mb-4">
                    <label class="block text-sm text-gray-600 mb-1">نام فایل</label>
                    <input type="text" name="file_name" :value="data.name" class="w-full border rounded-lg p-2 outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <div class="mb-4">
                    <label class="block text-sm text-gray-600 mb-1">کپشن</label>
                    <textarea name="caption" rows="3" class="w-full border rounded-lg p-2 outline-none" x-text="data.caption"></textarea>
                </div>

                <div class="grid grid-cols-2 gap-4 mb-4">
                    <div>
                        <label class="block text-sm text-gray-600 mb-1">قیمت (تومان)</label>
                        <input type="number" name="price" :value="data.price" class="w-full border rounded-lg p-2 outline-none">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-600 mb-1">قیمت (استار)</label>
                        <input type="number" name="stars" :value="data.stars" class="w-full border rounded-lg p-2 outline-none">
                    </div>
                </div>

                <div class="mb-6 flex items-center gap-2">
                    <input type="checkbox" name="is_premium" id="prem_edit" value="1" class="w-4 h-4 text-blue-600 rounded" :checked="data.is_premium == 1">
                    <label for="prem_edit" class="text-sm font-medium text-gray-700">علامت‌گذاری به عنوان پرمیوم 💎</label>
                </div>

                <div class="flex justify-end gap-2">
                    <button type="button" @click="show = false" class="text-gray-500 px-4 py-2 hover:bg-gray-100 rounded-lg">لغو</button>
                    <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700">ذخیره تغییرات</button>
                </div>
            </form>
        </div>
    </div>

@endsection