{{-- resources/views/facebook-posts/edit.blade.php --}}
<x-app-layout>
    <x-slot name="title">تعديل منشور فيسبوك - تعديل منشور فيسبوك قبل النشر</x-slot>

<div class="p-6 space-y-6" >

<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">

<div>
    <h1 class="text-3xl font-bold text-foreground">تعديل منشور فيسبوك</h1>
    <p class="text-muted-foreground">تعديل منشور فيسبوك قبل النشر</p>
</div>

<div class="flex items-center gap-2">
    <a href="{{ route('facebook-posts.show', $facebookPost) }}" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-9 rounded-md px-4 py-2 border border-border">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/>
            <circle cx="12" cy="12" r="3"/>
        </svg>
        عرض
    </a>
    <a href="{{ route('facebook-posts.index') }}" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs h-9 px-4 py-2 has-[>svg]:px-3 bg-gray-600 hover:bg-gray-600/90">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"/>
            <path d="M12 8l-4 4 4 4M16 12H9"/>
        </svg>
        العودة
    </a>
</div>

</div>

<!-- نموذج تعديل المنشور -->
<form method="POST" action="{{ route('facebook-posts.update', $facebookPost) }}" 
      enctype="multipart/form-data" id="post-form">
    @csrf
    @method('PUT')
    
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- العمود الرئيسي -->
        <div class="lg:col-span-2 space-y-6">
            
            <!-- معلومات المنشور -->
            <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
                <div data-slot="card-header" class="@container/card-header auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 flex flex-row items-center justify-between">
                    <div data-slot="card-title" class="font-semibold text-base sm:text-lg">معلومات المنشور</div>
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text h-4 w-4 text-muted-foreground">
                        <path d="M14 2H8a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <line x1="16" y1="13" x2="8" y2="13"/>
                        <line x1="16" y1="17" x2="8" y2="17"/>
                        <polyline points="10 9 9 9 8 9"/>
                    </svg>
                </div>

                <div data-slot="card-content" class="px-6 space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="text-sm font-medium text-foreground">الصفحة <span class="text-red-500">*</span></label>
                            <select name="facebook_page_id" class="border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 flex items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] w-full mt-1 @error('facebook_page_id') border-red-300 @enderror" required>
                                <option value="">اختر الصفحة</option>
                                @foreach($pages as $page)
                                    <option value="{{ $page->id }}" {{ old('facebook_page_id', $facebookPost->facebook_page_id) == $page->id ? 'selected' : '' }}>
                                        {{ $page->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('facebook_page_id')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label class="text-sm font-medium text-foreground">نوع المنشور <span class="text-red-500">*</span></label>
                            <select name="type" class="border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 flex items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] w-full mt-1 @error('type') border-red-300 @enderror" 
                                    id="post-type" required>
                                <option value="text" {{ old('type', $facebookPost->type) == 'text' ? 'selected' : '' }}>نص فقط</option>
                                <option value="image" {{ old('type', $facebookPost->type) == 'image' ? 'selected' : '' }}>صورة واحدة</option>
                                <option value="carousel" {{ old('type', $facebookPost->type) == 'carousel' ? 'selected' : '' }}>ألبوم صور</option>
                                <option value="video" {{ old('type', $facebookPost->type) == 'video' ? 'selected' : '' }}>فيديو</option>
                            </select>
                            @error('type')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div>
                        <label class="text-sm font-medium text-foreground">محتوى المنشور <span class="text-red-500">*</span></label>
                        <textarea name="content" class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex min-w-0 rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] w-full mt-1 min-h-[120px] @error('content') border-red-300 @enderror" 
                                  rows="6" placeholder="اكتب محتوى المنشور هنا..." 
                                  maxlength="5000" required>{{ old('content', $facebookPost->content) }}</textarea>
                        <div class="flex justify-between items-center mt-1">
                            <p class="text-xs text-muted-foreground">
                                <span id="char-count">{{ strlen($facebookPost->content) }}</span> / 5000 حرف
                            </p>
                        </div>
                        @error('content')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- الملفات الحالية -->
            @if($facebookPost->media_urls)
                <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
                    <div data-slot="card-header" class="@container/card-header auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 flex flex-row items-center justify-between">
                        <div data-slot="card-title" class="font-semibold text-base sm:text-lg flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-600">
                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                                <circle cx="9" cy="9" r="2"/>
                                <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
                            </svg>
                            الملفات الحالية
                        </div>
                    </div>

                    <div data-slot="card-content" class="px-6 space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            @foreach($facebookPost->media_urls as $index => $mediaUrl)
                                <div class="relative">
                                    @if(in_array($facebookPost->type, ['image', 'carousel']))
                                        <img src="{{ Storage::url($mediaUrl) }}" 
                                             class="w-full h-32 object-cover rounded-lg border" 
                                             alt="Media {{ $index + 1 }}">
                                    @else
                                        <div class="w-full h-32 bg-muted/50 rounded-lg border flex items-center justify-center">
                                            <div class="text-center">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground mx-auto mb-2">
                                                    <polygon points="23 7 16 12 23 17 23 7"/>
                                                    <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                                                </svg>
                                                <small class="text-muted-foreground text-xs">{{ basename($mediaUrl) }}</small>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                        <div class="bg-blue-50 border border-blue-200 text-blue-700 px-4 py-3 rounded-lg">
                            <div class="flex items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10"/>
                                    <path d="m9 12 2 2 4-4"/>
                                </svg>
                                <span class="text-sm font-medium">لاستبدال الملفات الحالية، قم برفع ملفات جديدة أدناه</span>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <!-- رفع ملفات جديدة -->
            <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm" id="media-section">
                <div data-slot="card-header" class="@container/card-header auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 flex flex-row items-center justify-between">
                    <div data-slot="card-title" class="font-semibold text-base sm:text-lg flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600">
                            <path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/>
                            <circle cx="12" cy="13" r="3"/>
                        </svg>
                        رفع ملفات جديدة (اختياري)
                    </div>
                </div>

                <div data-slot="card-content" class="px-6 space-y-4">
                    <div>
                        <label class="text-sm font-medium text-foreground">اختر ملفات جديدة</label>
                        <input type="file" name="media[]" class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] mt-1 @error('media') border-red-300 @enderror" 
                               id="media-input" multiple accept="image/*,video/*">
                        <p class="text-xs text-muted-foreground mt-1" id="media-help">
                            رفع ملفات جديدة سيستبدل الملفات الحالية
                        </p>
                        @error('media')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- معاينة الملفات الجديدة -->
                    <div id="media-preview" class="grid grid-cols-2 md:grid-cols-3 gap-4"></div>
                </div>
            </div>

            <!-- جدولة النشر -->
            <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
                <div data-slot="card-header" class="@container/card-header auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 flex flex-row items-center justify-between">
                    <div data-slot="card-title" class="font-semibold text-base sm:text-lg flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-orange-600">
                            <rect width="18" height="18" x="3" y="4" rx="2" ry="2"/>
                            <line x1="16" y1="2" x2="16" y2="6"/>
                            <line x1="8" y1="2" x2="8" y2="6"/>
                            <line x1="3" y1="10" x2="21" y2="10"/>
                        </svg>
                        جدولة النشر
                    </div>
                </div>

                <div data-slot="card-content" class="px-6 space-y-4">
                    <div class="flex items-center space-x-2">
                        <input type="checkbox" id="schedule-toggle" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" {{ $facebookPost->isScheduled() ? 'checked' : '' }}>
                        <label for="schedule-toggle" class="text-sm font-medium text-foreground">
                            جدولة المنشور لوقت محدد
                        </label>
                    </div>

                 <div id="schedule-section" style="{{ $facebookPost->isScheduled() ? 'display: block;' : 'display: none;' }}" class="space-y-4">
    <div>
        <label class="text-sm font-medium text-foreground">تاريخ ووقت النشر</label>
       
      
      <input type="datetime-local" name="scheduled_at" class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] mt-1 @error('scheduled_at') border-red-300 @enderror"
       value="{{ old('scheduled_at', $userTime ? $userTime->format('Y-m-d\TH:i') : '') }}">

      
        <div class="text-xs text-muted-foreground mt-1">
            <div class="flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="m9 12 2 2 4-4"/>
                </svg>
                اختر التاريخ والوقت بتوقيتك المحلي: {{ auth()->user()->getTimezone() }}
            </div>
            <small class="text-muted-foreground">الوقت الحالي: {{ now()->setTimezone(auth()->user()->getTimezone())->format('Y-m-d H:i') }}</small>
        </div>
        @error('scheduled_at')
            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
        @enderror
    </div>
</div>

                </div>
            </div>

        </div>

        <!-- الشريط الجانبي -->
        <div class="space-y-6">
            
            <!-- معلومات المنشور -->
            <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
                <div data-slot="card-header" class="@container/card-header auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 flex flex-row items-center justify-between">
                    <div data-slot="card-title" class="font-semibold text-base sm:text-lg">معلومات المنشور</div>
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info h-4 w-4 text-muted-foreground">
                        <circle cx="12" cy="12" r="10"/>
                        <path d="m9 9 1.5 1.5L16.5 4.5"/>
                    </svg>
                </div>

                <div data-slot="card-content" class="px-6 space-y-3">
                    <div class="flex items-center justify-between gap-3">
                        <span class="text-sm text-muted-foreground">الحالة:</span>
                        <div>{!! $facebookPost->getStatusBadge() !!}</div>
                    </div>
                    <div class="flex items-center justify-between gap-3">
                        <span class="text-sm text-muted-foreground">النوع:</span>
                        <div>{!! $facebookPost->getTypeBadge() !!}</div>
                    </div>
                    <div class="flex items-center justify-between gap-3">
                        <span class="text-sm text-muted-foreground">تاريخ الإنشاء:</span>
                        <span class="text-sm">{{ $facebookPost->created_at->format('Y-m-d H:i') }}</span>
                    </div>
                    @if($facebookPost->isScheduled())
                        <div class="flex items-center justify-between gap-3">
                            <span class="text-sm text-muted-foreground">موعد النشر:</span>
                            <span class="text-sm">{{ auth()->user()->toUserTime($facebookPost->scheduled_at)->format('Y-m-d H:i') }}</span>
                        </div>
                    @endif
                    @if($facebookPost->error_message)
                        <div class="bg-red-50 border border-red-200 text-red-700 px-3 py-2 rounded-lg">
                            <span class="text-xs font-medium">رسالة الخطأ:</span>
                            <p class="text-xs mt-1">{{ $facebookPost->error_message }}</p>
                        </div>
                    @endif
                </div>
            </div>
            
            <!-- إجراءات التحديث -->
            <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
                <div data-slot="card-header" class="@container/card-header auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 flex flex-row items-center justify-between">
                    <div data-slot="card-title" class="font-semibold text-base sm:text-lg">إجراءات التحديث</div>
                </div>

                <div data-slot="card-content" class="px-6 space-y-3">
                    @if(!$facebookPost->isPublished())
                        <!-- زر النشر/التحديث الفوري -->
                        <button type="submit" name="action" value="publish_now" 
                                class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs h-9 px-4 py-2 has-[>svg]:px-3 w-full {{ $facebookPost->isScheduled() ? 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 border border-border' : 'bg-green-600 hover:bg-green-600/90' }}" 
                                id="publish-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                @if($facebookPost->isScheduled())
                                    <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
                                    <polyline points="17 21 17 13 7 13 7 21"/>
                                    <polyline points="7 3 7 8 15 8"/>
                                @else
                                    <rect width="18" height="18" x="3" y="3" rx="2"/>
                                    <path d="M9 9h6v6"/>
                                    <path d="m21 3-12 12"/>
                                @endif
                            </svg>
                            {{ $facebookPost->isScheduled() ? 'حفظ التغييرات' : 'نشر الآن' }}
                        </button>
                        
                        <!-- زر تحديث الجدولة -->
                        <button type="submit" name="action" value="schedule" 
                                class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs h-9 px-4 py-2 has-[>svg]:px-3 bg-yellow-600 hover:bg-yellow-600/90 w-full" 
                                id="schedule-btn" 
                                style="{{ $facebookPost->isScheduled() ? 'display: block;' : 'display: none;' }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="10"/>
                                <polyline points="12 6 12 12 16 14"/>
                            </svg>
                            {{ $facebookPost->isScheduled() ? 'تحديث الجدولة' : 'جدولة المنشور' }}
                        </button>
                    @endif
                    
                    <!-- زر حفظ التغييرات -->
                    <button type="submit" name="action" value="save_draft" 
                            class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-9 rounded-md px-4 py-2 border border-border w-full">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
                            <polyline points="17 21 17 13 7 13 7 21"/>
                            <polyline points="7 3 7 8 15 8"/>
                        </svg>
                        حفظ كمسودة
                    </button>
                    
                    <div class="border-t border-border pt-3">
                        <a href="{{ route('facebook-posts.index') }}" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-9 rounded-md px-4 py-2 border border-red-300 text-red-600 hover:bg-red-50 w-full">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M18 6 6 18"/>
                                <path d="m6 6 12 12"/>
                            </svg>
                            إلغاء
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</form>

</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    // متغيرات المنطقة الزمنية
    const userTimezone = '{{ auth()->user()->getTimezone() }}';
    const userCurrentTime = '{{ auth()->user()->nowInUserTimezone()->format("Y-m-d H:i:s") }}';
    
    console.log('User timezone:', userTimezone);
    console.log('User current time:', userCurrentTime);

    // عد الأحرف
    document.querySelector('textarea[name="content"]').addEventListener('input', function() {
        const count = this.value.length;
        document.getElementById('char-count').textContent = count;
        
        const counterEl = document.getElementById('char-count');
        if (count > 4500) {
            counterEl.classList.add('text-yellow-600');
        } else {
            counterEl.classList.remove('text-yellow-600');
        }
    });

    // تغيير نوع المنشور
    document.getElementById('post-type').addEventListener('change', function() {
        const type = this.value;
        updateMediaSection(type);
    });

    // تفعيل الجدولة
    document.getElementById('schedule-toggle').addEventListener('change', function() {
        console.log('Schedule toggle clicked:', this.checked);
        
        if (this.checked) {
            document.getElementById('schedule-section').style.display = 'block';
            
            const publishBtn = document.getElementById('publish-btn');
            publishBtn.innerHTML = `
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
                    <polyline points="17 21 17 13 7 13 7 21"/>
                    <polyline points="7 3 7 8 15 8"/>
                </svg>
                حفظ كمسودة
            `;
            publishBtn.className = publishBtn.className.replace('bg-green-600 hover:bg-green-600/90', 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 border border-border');
            
            document.getElementById('schedule-btn').style.display = 'block';
            
            // جعل حقل التاريخ مطلوب
            document.querySelector('input[name="scheduled_at"]').setAttribute('required', 'true');
            
            // إضافة وقت افتراضي إذا لم يكن محدد
            const currentInput = document.querySelector('input[name="scheduled_at"]').value;
            if (!currentInput) {
                const oneHourLater = new Date();
                oneHourLater.setHours(oneHourLater.getHours() + 1);
                const defaultValue = oneHourLater.toISOString().slice(0, 16);
                document.querySelector('input[name="scheduled_at"]').value = defaultValue;
                
                console.log('Set default schedule time:', defaultValue);
            }
            
        } else {
            document.getElementById('schedule-section').style.display = 'none';
            
            const publishBtn = document.getElementById('publish-btn');
            publishBtn.innerHTML = `
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect width="18" height="18" x="3" y="3" rx="2"/>
                    <path d="M9 9h6v6"/>
                    <path d="m21 3-12 12"/>
                </svg>
                نشر الآن
            `;
            publishBtn.className = publishBtn.className.replace('hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 border border-border', 'bg-green-600 hover:bg-green-600/90');
            
            document.getElementById('schedule-btn').style.display = 'none';
            
            // إزالة تطلب حقل التاريخ
            document.querySelector('input[name="scheduled_at"]').removeAttribute('required');
        }
    });

    // تحديث معاينة الوقت المحدد
    document.querySelector('input[name="scheduled_at"]').addEventListener('change', function() {
        const selectedDateTime = this.value;
        if (selectedDateTime) {
            try {
                const selectedDate = new Date(selectedDateTime);
                const formattedDate = selectedDate.toLocaleString('ar-SA', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit'
                });
                
                // إظهار معلومات إضافية
                const diffInMinutes = Math.round((selectedDate - new Date()) / (1000 * 60));
                let diffText = '';
                
                if (diffInMinutes < 0) {
                    diffText = 'في الماضي! ❌';
                } else if (diffInMinutes < 60) {
                    diffText = `خلال ${diffInMinutes} دقيقة`;
                } else if (diffInMinutes < 1440) {
                    diffText = `خلال ${Math.round(diffInMinutes / 60)} ساعة`;
                } else {
                    diffText = `خلال ${Math.round(diffInMinutes / 1440)} يوم`;
                }
                
                // تحديث النص التوضيحي
                const helpText = this.nextElementSibling;
                const originalContent = helpText.innerHTML.split('<br>')[0];
                helpText.innerHTML = originalContent + 
                    `<br><small class="text-primary">📅 سيتم النشر: ${formattedDate} (${diffText})</small>`;
                
                console.log('Schedule time selected:', {
                    selected: selectedDateTime,
                    formatted: formattedDate,
                    diff_minutes: diffInMinutes
                });
                
            } catch (e) {
                console.error('Error parsing selected date:', e);
            }
        }
    });

    function updateMediaSection(type) {
        const mediaSection = document.getElementById('media-section');
        const mediaInput = document.getElementById('media-input');
        const mediaHelp = document.getElementById('media-help');

        switch(type) {
            case 'text':
                mediaSection.style.display = 'none';
                mediaInput.removeAttribute('required');
                break;
                
            case 'image':
                mediaSection.style.display = 'block';
                mediaInput.setAttribute('accept', 'image/*');
                mediaHelp.textContent = 'رفع صورة واحدة (JPG, PNG, GIF) - الحد الأقصى 50MB - سيستبدل الملفات الحالية';
                break;
                
            case 'carousel':
                mediaSection.style.display = 'block';
                mediaInput.setAttribute('accept', 'image/*');
                mediaHelp.textContent = 'رفع 2-10 صور (JPG, PNG, GIF) - الحد الأقصى 50MB لكل صورة - سيستبدل الملفات الحالية';
                break;
                
            case 'video':
                mediaSection.style.display = 'block';
                mediaInput.setAttribute('accept', 'video/*');
                mediaHelp.textContent = 'رفع فيديو واحد (MP4, MOV, AVI) - الحد الأقصى 200MB - سيستبدل الملفات الحالية';
                break;
        }
    }

    // Form validation
    document.getElementById('post-form').addEventListener('submit', function(e) {
        const type = document.getElementById('post-type').value;
        const files = document.getElementById('media-input').files;
        const clickedButton = document.activeElement;
        const action = clickedButton.value;
        
        console.log('Form submission:', {
            type: type,
            files_count: files.length,
            action: action,
            user_timezone: userTimezone
        });
        
        // التحقق من الجدولة
        if (action === 'schedule') {
            const scheduledAt = document.querySelector('input[name="scheduled_at"]').value;
            console.log('Schedule validation:', {
                action: action,
                scheduled_at: scheduledAt,
                is_checked: document.getElementById('schedule-toggle').checked
            });
            
            if (!scheduledAt || scheduledAt.trim() === '') {
                e.preventDefault();
                alert('يرجى تحديد موعد النشر للمنشورات المجدولة');
                document.getElementById('schedule-toggle').checked = true;
                document.getElementById('schedule-toggle').dispatchEvent(new Event('change'));
                setTimeout(() => {
                    document.querySelector('input[name="scheduled_at"]').focus();
                }, 300);
                return false;
            }
            
            // التحقق من أن التاريخ في المستقبل
            const scheduleDate = new Date(scheduledAt);
            const now = new Date();
            
            console.log('Date validation:', {
                schedule_date: scheduleDate.toISOString(),
                now: now.toISOString(),
                is_future: scheduleDate > now
            });
            
            if (scheduleDate <= now) {
                e.preventDefault();
                alert('موعد النشر يجب أن يكون في المستقبل');
                document.querySelector('input[name="scheduled_at"]').focus();
                return false;
            }
        }
        
        // إضافة معلومات المنطقة الزمنية
        const timezoneInput = document.createElement('input');
        timezoneInput.type = 'hidden';
        timezoneInput.name = 'user_timezone';
        timezoneInput.value = userTimezone;
        this.appendChild(timezoneInput);
        
        // تعطيل الأزرار وإضافة مؤشر التحميل
        document.querySelectorAll('button[type="submit"]').forEach(btn => {
            btn.disabled = true;
            const originalText = btn.textContent.trim();
            btn.innerHTML = `
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin">
                    <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
                    <path d="M3 21v-5h5"/>
                    <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
                </svg>
                ${originalText}
            `;
        });
        
        return true;
    });

    // تتبع النقر على الأزرار
    document.querySelectorAll('button[type="submit"]').forEach(btn => {
        btn.addEventListener('click', function(e) {
            const action = this.value;
            console.log('Button clicked:', {
                action: action,
                button_text: this.textContent.trim()
            });
            
            // إزالة أي input مخفي سابق للaction
            const existingAction = document.querySelector('input[name="action"]');
            if (existingAction) {
                existingAction.remove();
            }
            
            // إضافة input مخفي للaction
            const actionInput = document.createElement('input');
            actionInput.type = 'hidden';
            actionInput.name = 'action';
            actionInput.value = action;
            document.getElementById('post-form').appendChild(actionInput);
        });
    });

    // Initialize
    updateMediaSection(document.getElementById('post-type').value);
    
    // تشغيل تحديث معاينة التاريخ إذا كان محدد
    const currentScheduledValue = document.querySelector('input[name="scheduled_at"]').value;
    if (currentScheduledValue) {
        document.querySelector('input[name="scheduled_at"]').dispatchEvent(new Event('change'));
    }
});
</script>

</x-app-layout>