@extends('admin.layouts.master')

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

        .icon-header {
            color: #007bff;
            margin-right: 10px;
        }
    </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">
                <x-lucide-plus-circle class="icon-header" width="20" height="20" />
                إضافة تحديث جديد
            </h3>
        </div>

        <form action="{{ route('admin.updates.store') }}" method="POST">
            @csrf

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

                    <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') }}" required placeholder="أدخل عنوان التحديث">
                        @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </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 placeholder="وصف مفصل للتحديث أو الاقتراح...">{{ old('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 class="icon-header" 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' ? 'selected' : '' }}>تحديث</option>
                                    <option value="suggestion" {{ old('type') == 'suggestion' ? 'selected' : '' }}>اقتراح
                                    </option>
                                    <option value="bug_fix" {{ old('type') == 'bug_fix' ? 'selected' : '' }}>إصلاح خطأ
                                    </option>
                                    <option value="feature" {{ old('type') == 'feature' ? 'selected' : '' }}>ميزة جديدة
                                    </option>
                                    <option value="improvement" {{ old('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') == 'low' ? 'selected' : '' }}>منخفضة</option>
                                    <option value="medium" {{ old('priority', 'medium') == 'medium' ? 'selected' : '' }}>
                                        متوسطة</option>
                                    <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>عالية</option>
                                    <option value="urgent" {{ old('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="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') == $admin->id ? 'selected' : '' }}>
                                            {{ $admin->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('assigned_to')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Additional Details -->
                <div class="form-section">
                    <h5 class="mb-3">
                        <x-lucide-calendar class="icon-header" width="20" height="20" />
                        تفاصيل إضافية
                    </h5>

                    <div class="row">
                        <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') }}">
                                @error('due_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">التاريخ المستهدف لإنجاز التحديث</small>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <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') }}"
                                    placeholder="علامة1, علامة2, علامة3">
                                @error('tags')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">علامات مفصولة بفاصلة للتصنيف والبحث</small>
                            </div>
                        </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-primary">
                        <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%',
                placeholder: 'اختر من القائمة...'
            });

            // Auto-resize textarea
            $('#description').on('input', function() {
                this.style.height = 'auto';
                this.style.height = (this.scrollHeight) + 'px';
            });

            // Form validation enhancement
            $('form').on('submit', function(e) {
                let isValid = true;

                // Check required fields
                $('input[required], select[required], textarea[required]').each(function() {
                    if (!$(this).val()) {
                        $(this).addClass('is-invalid');
                        isValid = false;
                    } else {
                        $(this).removeClass('is-invalid');
                    }
                });

                if (!isValid) {
                    e.preventDefault();
                    toastr.error('يرجى ملء جميع الحقول المطلوبة');
                    return false;
                }
            });
        });
    </script>
@endsection