@extends('admin.layouts.master')

@section('css')
    @include('admin.helper.formscss')
    <style>
        .form-section {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .badge {
            font-size: 0.75rem;
            padding: 0.5em 0.75em;
        }
    </style>
@endsection

@section('page-header')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">إدارة التحديثات</h4>
                <span class="text-muted mt-1 tx-13 mr-2 mb-0">/ تعديل التحديث</span>
            </div>
        </div>
        <div class="d-flex my-xl-auto right-content">
            <a href="{{ route('admin.updates.index') }}" class="btn btn-secondary">
                <x-lucide-arrow-left width="20" height="20" /> العودة للقائمة
            </a>
        </div>
    </div>
@endsection

@section('content')
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">تعديل التحديث: {{ $update->title }}</h3>
        </div>

        <form action="{{ route('admin.updates.update', $update->id) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="card-body">
                <!-- Basic Information -->
                <div class="form-section">
                    <h5 class="mb-3"><x-lucide-info width="20" height="20" /> المعلومات الأساسية</h5>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="title">العنوان <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('title') is-invalid @enderror"
                                    id="title" name="title" value="{{ old('title', $update->title) }}" required>
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="description">الوصف <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description"
                            rows="4" required>{{ old('description', $update->description) }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Classification -->
                <div class="form-section">
                    <h5 class="mb-3"><x-lucide-tags width="20" height="20" /> التصنيف والأولوية</h5>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="type">النوع <span class="text-danger">*</span></label>
                                <select class="form-control @error('type') is-invalid @enderror" id="type"
                                    name="type" required>
                                    <option value="">اختر النوع</option>
                                    <option value="update" {{ old('type', $update->type) == 'update' ? 'selected' : '' }}>
                                        تحديث</option>
                                    <option value="suggestion"
                                        {{ old('type', $update->type) == 'suggestion' ? 'selected' : '' }}>اقتراح</option>
                                    <option value="bug_fix"
                                        {{ old('type', $update->type) == 'bug_fix' ? 'selected' : '' }}>إصلاح خطأ</option>
                                    <option value="feature"
                                        {{ old('type', $update->type) == 'feature' ? 'selected' : '' }}>ميزة جديدة</option>
                                    <option value="improvement"
                                        {{ old('type', $update->type) == 'improvement' ? 'selected' : '' }}>تحسين</option>
                                </select>
                                @error('type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="priority">الأولوية <span class="text-danger">*</span></label>
                                <select class="form-control @error('priority') is-invalid @enderror" id="priority"
                                    name="priority" required>
                                    <option value="">اختر الأولوية</option>
                                    <option value="low"
                                        {{ old('priority', $update->priority) == 'low' ? 'selected' : '' }}>منخفضة</option>
                                    <option value="medium"
                                        {{ old('priority', $update->priority) == 'medium' ? 'selected' : '' }}>متوسطة
                                    </option>
                                    <option value="high"
                                        {{ old('priority', $update->priority) == 'high' ? 'selected' : '' }}>عالية</option>
                                    <option value="urgent"
                                        {{ old('priority', $update->priority) == 'urgent' ? 'selected' : '' }}>عاجلة
                                    </option>
                                </select>
                                @error('priority')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="status">الحالة <span class="text-danger">*</span></label>
                                <select class="form-control @error('status') is-invalid @enderror" id="status"
                                    name="status" required>
                                    <option value="pending"
                                        {{ old('status', $update->status) == 'pending' ? 'selected' : '' }}>في الانتظار
                                    </option>
                                    <option value="in_progress"
                                        {{ old('status', $update->status) == 'in_progress' ? 'selected' : '' }}>قيد التنفيذ
                                    </option>
                                    <option value="completed"
                                        {{ old('status', $update->status) == 'completed' ? 'selected' : '' }}>مكتملة
                                    </option>
                                    <option value="on_hold"
                                        {{ old('status', $update->status) == 'on_hold' ? 'selected' : '' }}>مؤجلة</option>
                                    <option value="cancelled"
                                        {{ old('status', $update->status) == 'cancelled' ? 'selected' : '' }}>ملغية
                                    </option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Assignment & Dates -->
                <div class="form-section">
                    <h5 class="mb-3"><x-lucide-calendar width="20" height="20" /> التكليف والمواعيد</h5>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="assigned_to">تعيين إلى</label>
                                <select class="form-control select2 @error('assigned_to') is-invalid @enderror"
                                    id="assigned_to" name="assigned_to">
                                    <option value="">غير محدد</option>
                                    @foreach ($admins as $admin)
                                        <option value="{{ $admin->id }}"
                                            {{ old('assigned_to', $update->assigned_to) == $admin->id ? 'selected' : '' }}>
                                            {{ $admin->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('assigned_to')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="due_date">تاريخ الاستحقاق</label>
                                <input type="date" class="form-control @error('due_date') is-invalid @enderror"
                                    id="due_date" name="due_date"
                                    value="{{ old('due_date', $update->due_date ? $update->due_date->format('Y-m-d') : '') }}">
                                @error('due_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="tags">العلامات (مفصولة بفاصلة)</label>
                        <input type="text" class="form-control @error('tags') is-invalid @enderror" id="tags"
                            name="tags" value="{{ old('tags', $update->tags ? implode(', ', $update->tags) : '') }}"
                            placeholder="علامة1, علامة2, علامة3">
                        @error('tags')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Notes -->
                <div class="form-section">
                    <h5 class="mb-3"><x-lucide-sticky-note width="20" height="20" /> الملاحظات</h5>

                    @if ($update->notes)
                        <div class="mb-3">
                            <label>الملاحظات الحالية:</label>
                            <div class="notes-section">
                                {!! nl2br(e($update->notes)) !!}
                            </div>
                        </div>
                    @endif

                    <div class="form-group">
                        <label for="notes">إضافة ملاحظة جديدة:</label>
                        <textarea class="form-control @error('notes') is-invalid @enderror" id="notes" name="notes" rows="3"
                            placeholder="اكتب ملاحظتك هنا...">{{ old('notes') }}</textarea>
                        @error('notes')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted">ستتم إضافة هذه الملاحظة إلى الملاحظات الموجودة مع التاريخ
                            والوقت</small>
                    </div>
                </div>

                <!-- Creation Info -->
                <div class="form-section">
                    <h5 class="mb-3"><x-lucide-info width="20" height="20" /> معلومات الإنشاء</h5>

                    <div class="row">
                        <div class="col-md-4">
                            <p><strong>تم الإنشاء بواسطة:</strong> {{ $update->createdBy->name ?? 'غير محدد' }}</p>
                        </div>
                        <div class="col-md-4">
                            <p><strong>تاريخ الإنشاء:</strong> {{ $update->created_at->format('Y-m-d H:i') }}</p>
                        </div>
                        <div class="col-md-4">
                            <p><strong>آخر تحديث:</strong> {{ $update->updated_at->format('Y-m-d H:i') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-footer">
                <div class="d-flex justify-content-between">
                    <a href="{{ route('admin.updates.index') }}" class="btn btn-secondary">
                        <x-lucide-x width="20" height="20" /> إلغاء
                    </a>
                    <button type="submit" class="btn btn-success">
                        <x-lucide-save width="20" height="20" /> حفظ التغييرات
                    </button>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('js')
    @include('admin.helper.formscripts')
    <script>
        $(document).ready(function() {
            // Initialize Select2
            $('.select2').select2({
                width: '100%'
            });
        });
    </script>
@endsection