@extends('layouts.admin')

@section('title', 'افزودن خدمت جدید')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">افزودن خدمت جدید</h1>
        <a href="{{ route('admin.services.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-right ms-2"></i>
            بازگشت به لیست
        </a>
    </div>

    <div class="card">
        <div class="card-body">
            <form action="{{ route('admin.services.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row">
                    <div class="col-md-8">
                        <div class="mb-3">
                            <label for="title" class="form-label">عنوان خدمت</label>
                            <input type="text" 
                                   class="form-control @error('title') is-invalid @enderror" 
                                   id="title" 
                                   name="title" 
                                   value="{{ old('title') }}" 
                                   required>
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="short_description" class="form-label">توضیحات کوتاه</label>
                            <textarea class="form-control @error('short_description') is-invalid @enderror" 
                                      id="short_description" 
                                      name="short_description" 
                                      rows="2" 
                                      required>{{ old('short_description') }}</textarea>
                            @error('short_description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">توضیحات کامل</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" 
                                      name="description" 
                                      rows="5" 
                                      required>{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="card mb-3">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0">ویژگی‌های خدمت</h5>
                                    <button type="button" class="btn btn-sm btn-primary" id="addFeature">
                                        <i class="fas fa-plus ms-2"></i>
                                        افزودن ویژگی
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div id="features-container">
                                    <div class="feature-item mb-2">
                                        <div class="input-group">
                                            <input type="text" 
                                                   class="form-control @error('features.*') is-invalid @enderror" 
                                                   name="features[]" 
                                                   placeholder="ویژگی خدمت" 
                                                   required>
                                            <button type="button" class="btn btn-danger remove-feature">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                @error('features')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="card mb-3">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0">طرح‌های قیمت‌گذاری</h5>
                                    <button type="button" class="btn btn-sm btn-primary" id="addPricingPlan">
                                        <i class="fas fa-plus ms-2"></i>
                                        افزودن طرح
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div id="pricing-plans-container">
                                    <div class="pricing-plan-item mb-4 p-3 border rounded">
                                        <div class="mb-3">
                                            <label class="form-label">نام طرح</label>
                                            <input type="text" 
                                                   class="form-control @error('pricing_plans.*.name') is-invalid @enderror" 
                                                   name="pricing_plans[0][name]" 
                                                   placeholder="نام طرح" 
                                                   required>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">قیمت (تومان)</label>
                                            <input type="number" 
                                                   class="form-control @error('pricing_plans.*.price') is-invalid @enderror" 
                                                   name="pricing_plans[0][price]" 
                                                   placeholder="قیمت" 
                                                   min="0" 
                                                   required>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">توضیحات</label>
                                            <textarea class="form-control @error('pricing_plans.*.description') is-invalid @enderror" 
                                                      name="pricing_plans[0][description]" 
                                                      rows="2" 
                                                      placeholder="توضیحات طرح" 
                                                      required></textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">ویژگی‌های طرح</label>
                                            <div class="plan-features">
                                                <div class="plan-feature-item mb-2">
                                                    <div class="input-group">
                                                        <input type="text" 
                                                               class="form-control @error('pricing_plans.*.features.*') is-invalid @enderror" 
                                                               name="pricing_plans[0][features][]" 
                                                               placeholder="ویژگی طرح" 
                                                               required>
                                                        <button type="button" class="btn btn-danger remove-plan-feature">
                                                            <i class="fas fa-times"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-sm btn-outline-primary mt-2 add-plan-feature">
                                                <i class="fas fa-plus ms-2"></i>
                                                افزودن ویژگی
                                            </button>
                                        </div>
                                        <button type="button" class="btn btn-danger remove-pricing-plan">
                                            <i class="fas fa-trash ms-2"></i>
                                            حذف طرح
                                        </button>
                                    </div>
                                </div>
                                @error('pricing_plans')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="category" class="form-label">دسته‌بندی</label>
                            <select class="form-select @error('category') is-invalid @enderror" 
                                    id="category" 
                                    name="category" 
                                    required>
                                <option value="">انتخاب دسته‌بندی</option>
                                <option value="طراحی وب" {{ old('category') == 'طراحی وب' ? 'selected' : '' }}>طراحی وب</option>
                                <option value="توسعه وب" {{ old('category') == 'توسعه وب' ? 'selected' : '' }}>توسعه وب</option>
                                <option value="اپلیکیشن موبایل" {{ old('category') == 'اپلیکیشن موبایل' ? 'selected' : '' }}>اپلیکیشن موبایل</option>
                                <option value="طراحی UI/UX" {{ old('category') == 'طراحی UI/UX' ? 'selected' : '' }}>طراحی UI/UX</option>
                                <option value="مشاوره" {{ old('category') == 'مشاوره' ? 'selected' : '' }}>مشاوره</option>
                            </select>
                            @error('category')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="order" class="form-label">ترتیب نمایش</label>
                            <input type="number" 
                                   class="form-control @error('order') is-invalid @enderror" 
                                   id="order" 
                                   name="order" 
                                   value="{{ old('order') }}" 
                                   min="0">
                            @error('order')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="icon" class="form-label">آیکون</label>
                            <input type="file" 
                                   class="form-control @error('icon') is-invalid @enderror" 
                                   id="icon" 
                                   name="icon" 
                                   accept="image/*"
                                   required>
                            @error('icon')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="thumbnail" class="form-label">تصویر شاخص</label>
                            <input type="file" 
                                   class="form-control @error('thumbnail') is-invalid @enderror" 
                                   id="thumbnail" 
                                   name="thumbnail" 
                                   accept="image/*"
                                   required>
                            @error('thumbnail')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="gallery" class="form-label">گالری تصاویر</label>
                            <input type="file" 
                                   class="form-control @error('gallery') is-invalid @enderror" 
                                   id="gallery" 
                                   name="gallery[]" 
                                   accept="image/*"
                                   multiple
                                   required>
                            @error('gallery')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" 
                                       class="form-check-input @error('is_active') is-invalid @enderror" 
                                       id="is_active" 
                                       name="is_active" 
                                       value="1" 
                                       {{ old('is_active') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">فعال</label>
                                @error('is_active')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" 
                                       class="form-check-input @error('is_featured') is-invalid @enderror" 
                                       id="is_featured" 
                                       name="is_featured" 
                                       value="1" 
                                       {{ old('is_featured') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_featured">خدمت ویژه</label>
                                @error('is_featured')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="text-end mt-4">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save ms-2"></i>
                        ذخیره خدمت
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    $(document).ready(function() {
        // Initialize CKEditor for description
        ClassicEditor
            .create(document.querySelector('#description'))
            .catch(error => {
                console.error(error);
            });

        // Add new feature
        $('#addFeature').click(function() {
            const featureHtml = `
                <div class="feature-item mb-2">
                    <div class="input-group">
                        <input type="text" 
                               class="form-control" 
                               name="features[]" 
                               placeholder="ویژگی خدمت" 
                               required>
                        <button type="button" class="btn btn-danger remove-feature">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            `;
            $('#features-container').append(featureHtml);
        });

        // Remove feature
        $(document).on('click', '.remove-feature', function() {
            $(this).closest('.feature-item').remove();
        });

        // Add new pricing plan
        $('#addPricingPlan').click(function() {
            const planCount = $('.pricing-plan-item').length;
            const planHtml = `
                <div class="pricing-plan-item mb-4 p-3 border rounded">
                    <div class="mb-3">
                        <label class="form-label">نام طرح</label>
                        <input type="text" 
                               class="form-control" 
                               name="pricing_plans[${planCount}][name]" 
                               placeholder="نام طرح" 
                               required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">قیمت (تومان)</label>
                        <input type="number" 
                               class="form-control" 
                               name="pricing_plans[${planCount}][price]" 
                               placeholder="قیمت" 
                               min="0" 
                               required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">توضیحات</label>
                        <textarea class="form-control" 
                                  name="pricing_plans[${planCount}][description]" 
                                  rows="2" 
                                  placeholder="توضیحات طرح" 
                                  required></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">ویژگی‌های طرح</label>
                        <div class="plan-features">
                            <div class="plan-feature-item mb-2">
                                <div class="input-group">
                                    <input type="text" 
                                           class="form-control" 
                                           name="pricing_plans[${planCount}][features][]" 
                                           placeholder="ویژگی طرح" 
                                           required>
                                    <button type="button" class="btn btn-danger remove-plan-feature">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-primary mt-2 add-plan-feature">
                            <i class="fas fa-plus ms-2"></i>
                            افزودن ویژگی
                        </button>
                    </div>
                    <button type="button" class="btn btn-danger remove-pricing-plan">
                        <i class="fas fa-trash ms-2"></i>
                        حذف طرح
                    </button>
                </div>
            `;
            $('#pricing-plans-container').append(planHtml);
        });

        // Remove pricing plan
        $(document).on('click', '.remove-pricing-plan', function() {
            $(this).closest('.pricing-plan-item').remove();
        });

        // Add new plan feature
        $(document).on('click', '.add-plan-feature', function() {
            const planItem = $(this).closest('.pricing-plan-item');
            const planIndex = planItem.index();
            const featureHtml = `
                <div class="plan-feature-item mb-2">
                    <div class="input-group">
                        <input type="text" 
                               class="form-control" 
                               name="pricing_plans[${planIndex}][features][]" 
                               placeholder="ویژگی طرح" 
                               required>
                        <button type="button" class="btn btn-danger remove-plan-feature">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            `;
            planItem.find('.plan-features').append(featureHtml);
        });

        // Remove plan feature
        $(document).on('click', '.remove-plan-feature', function() {
            $(this).closest('.plan-feature-item').remove();
        });
    });
</script>
@endpush
@endsection