@extends('layouts.admin')

@section('title', 'مدیریت زمان‌بندی ارسال به کانال‌ها')

@section('content')
<div x-data="{ editingSchedule: null }">
    <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-8">
        <div class="p-6 border-b border-gray-100 bg-gray-50 flex justify-between items-center">
            <h2 class="text-xl font-bold text-gray-800"> صف ارسال زمان‌بندی شده فایل‌ها به کانال‌های تلگرام</h2>
            <span class="text-xs bg-blue-100 text-blue-800 px-3 py-1 rounded-full font-bold">
                تعداد کل: {{ $schedules->total() }} مورد
            </span>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-right border-collapse whitespace-nowrap">
                <thead>
                    <tr class="bg-gray-100 border-b border-gray-200 text-gray-600 font-bold text-sm">
                        <th class="p-4">شناسه</th>
                        <th class="p-4">تنظیم‌کننده (ادمین)</th>
                        <th class="p-4">فایل مربوطه</th>
                        <th class="p-4">کانال مقصد</th>
                        <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-gray-700 text-sm">
                    @forelse ($schedules as $s)
                        <tr class="hover:bg-gray-50 transition">
                            <td class="p-4 font-mono text-gray-500">#{{ $s->id }}</td>
                            <td class="p-4">
                                <div class="font-bold">{{ $s->first_name }} {{ $s->last_name }}</div>
                                <div class="text-xs text-gray-400 font-mono">@if($s->username) {{ '@'.$s->username }} @else ID: {{ $s->chat_id }} @endif</div>
                            </td>
                            <td class="p-4">
                                <span class="font-semibold text-blue-600">{{ $s->file_name ?? 'فایل حذف شده' }}</span>
                                <span class="text-xs text-gray-400 block">نوع: {{ $s->file_type ?? '-' }}</span>
                            </td>
                            <td class="p-4 font-mono text-gray-800">{{ $s->channel_id }}</td>
                            <td class="p-4 font-bold text-center">
                                @if($s->file_count == 0)
                                    <span class="text-green-600">همه فایل‌ها</span>
                                @else
                                    {{ $s->file_count }} فایل
                                @endif
                            </td>
                            <td class="p-4 font-mono text-xs text-gray-600" dir="ltr">{{ $s->upload_time }}</td>
                            <td class="p-4">
                                @if($s->status === 'pending')
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-yellow-100 text-yellow-800">
                                        ⏳ در صف ارسال
                                    </span>
                                @elseif($s->status === 'completed')
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-green-100 text-green-800">
                                        ✅ ارسال شده
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-red-100 text-red-800">
                                        ❌ ناموفق / خطا
                                    </span>
                                @endif
                            </td>
                            <td class="p-4 text-center">
                                <div class="flex gap-2 justify-center">
                                    @if($s->status === 'pending')
                                        <button @click="editingSchedule = {{ json_encode($s) }}" class="bg-yellow-50 text-yellow-700 hover:bg-yellow-100 border border-yellow-200 px-2 py-1 rounded text-xs font-bold transition">
                                            ✏️ ویرایش زمان
                                        </button>
                                    @endif
                                    <form action="{{ route('admin.scheduling.destroy', $s->id) }}" method="POST" onsubmit="return confirm('آیا از حذف این زمان‌بندی مطمئن هستید؟');" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="bg-red-50 text-red-700 hover:bg-red-100 border border-red-200 px-2 py-1 rounded text-xs font-bold transition">
                                            🗑️ حذف
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center p-8 text-gray-400">هیچ فایلی در صف زمان‌بندی یافت نشد.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($schedules->hasPages())
            <div class="p-4 border-t border-gray-100" dir="rtl">
                {{ $schedules->links() }}
            </div>
        @endif
    </div>

    <!-- Edit Schedule Modal -->
    <div x-show="editingSchedule !== null" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4" x-cloak>
        <div class="bg-white rounded-xl shadow-lg w-full max-w-md p-6 relative" @click.away="editingSchedule = null">
            <button @click="editingSchedule = null" class="absolute top-4 left-4 text-gray-400 hover:text-gray-600 text-2xl font-bold">&times;</button>
            <h3 class="text-xl font-bold text-gray-800 border-b border-gray-100 pb-3 mb-4">✏️ ویرایش زمان ارسال</h3>
            
            <form :action="'{{ url('/admin/bookings') }}/' + (editingSchedule ? editingSchedule.id : '')" method="POST" class="flex flex-col gap-4">
                @csrf
                @method('PUT')
                <div>
                    <label class="block text-sm text-gray-600 mb-1 font-bold">نام فایل</label>
                    <div class="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm text-gray-700 font-bold" x-text="editingSchedule ? editingSchedule.file_name : ''"></div>
                </div>

                <div>
                    <label class="block text-sm text-gray-600 mb-1 font-bold">کانال مقصد</label>
                    <div class="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm text-gray-700 font-mono" x-text="editingSchedule ? editingSchedule.channel_id : ''"></div>
                </div>

                <div>
                    <label class="block text-sm text-gray-600 mb-1 font-bold">زمان ارسال (YYYY-MM-DD HH:MM:SS)</label>
                    <input type="text" name="upload_time" required :value="editingSchedule ? editingSchedule.upload_time : ''" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm font-mono text-left focus:outline-none focus:border-blue-500" placeholder="YYYY-MM-DD HH:MM:SS">
                </div>

                <div class="flex gap-2 justify-end mt-4">
                    <button type="button" @click="editingSchedule = null" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg font-bold text-sm transition">
                        انصراف
                    </button>
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-bold text-sm transition shadow-md">
                        💾 ذخیره زمان جدید
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection