@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.update', $service) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <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', $service->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', $service->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', $service->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">
                                    @foreach(json_decode($service->features, true) ?? [] as $feature)
                                        <div class="feature-item mb-2">
                                            <div class="input-group">
                                                <input type="text" 
                                                       class="form-control @error('features.*') is-invalid @enderror" 
                                                       name="features[]" 
                                                       value="{{ old('features.' . $loop->index, $feature) }}" 
                                                       placeholder="ویژگی خدمت" 
                                                       required>
                                                <button type="button" class="btn btn-danger remove-feature">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @endforeach
                                </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">
                                    @foreach(json_decode($service->pricing_plans, true) ?? [] as $index => $plan)
                                        <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[{{ $index }}][name]" 
                                                       value="{{ old('pricing_plans.' . $index . '.name', $plan['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[{{ $index }}][price]" 
                                                       value="{{ old('pricing_plans.' . $index . '.price', $plan['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[{{ $index }}][description]" 
                                                          rows="2" 
                                                          placeholder="توضیحات طرح" 
                                                          required>{{ old('pricing_plans.' . $index . '.description', $plan['description']) }}</textarea>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">ویژگی‌های طرح</label>
                                                <div class="plan-features">
                                                    @foreach($plan['features'] ?? [] as $featureIndex => $feature)
                                                        <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[{{ $index }}][features][]" 
                                                                       value="{{ old('pricing_plans.' . $index . '.features.' . $featureIndex, $feature) }}" 
                                                                       placeholder="ویژگی طرح" 
                                                                       required>
                                                                <button type="button" class="btn btn-danger remove-plan-feature">
                                                                    <i class="fas fa-times"></i>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </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>
                                    @endforeach
                                </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', $service->category) == 'طراحی وب' ? 'selected' : '' }}>طراحی وب</option>
                                <option value="توسعه وب" {{ old('category', $service->category) == 'توسعه وب' ? 'selected' : '' }}>توسعه وب</option>
                                <option value="اپلیکیشن موبایل" {{ old('category', $service->category) == 'اپلیکیشن موبایل' ? 'selected' : '' }}>اپلیکیشن موبایل</option>
                                <option value="طراحی UI/UX" {{ old('category', $service->category) == 'طراحی UI/UX' ? 'selected' : '' }}>طراحی UI/UX</option>
                                <option value="مشاوره" {{ old('category', $service->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', $service->order) }}" 
                                   min="0">
                            @error('order')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="icon" class="form-label">آیکون</label>
                            @if($service->icon)
                                <div class="mb-2">
                                    <img src="{{ Storage::url($service->icon) }}" 
                                         alt="{{ $service->title }}" 
                                         class="img-thumbnail" 
                                         style="max-width: 100px;">
                                </div>
                            @endif
                            <input type="file" 
                                   class="form-control @error('icon') is-invalid @enderror" 
                                   id="icon" 
                                   name="icon" 
                                   accept="image/*">
                            <small class="text-muted">اگر می‌خواهید آیکون را تغییر دهید، فایل جدید را انتخاب کنید.</small>
                            @error('icon')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="thumbnail" class="form-label">تصویر شاخص</label>
                            @if($service->thumbnail)
                                <div class="mb-2">
                                    <img src="{{ Storage::url($service->thumbnail) }}" 
                                         alt="{{ $service->title }}" 
                                         class="img-thumbnail" 
                                         style="max-width: 200px;">
                                </div>
                            @endif
                            <input type="file" 
                                   class="form-control @error('thumbnail') is-invalid @enderror" 
                                   id="thumbnail" 
                                   name="thumbnail" 
                                   accept="image/*">
                            <small class="text-muted">اگر می‌خواهید تصویر شاخص را تغییر دهید، فایل جدید را انتخاب کنید.</small>
                            @error('thumbnail')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="gallery" class="form-label">گالری تصاویر</label>
                            @if($service->gallery)
                                <div class="row g-2 mb-2">
                                    @foreach(json_decode($service->gallery, true) as $image)
                                        <div class="col-4">
                                            <img src="{{ Storage::url($image) }}" 
                                                 alt="{{ $service->title }}" 
                                                 class="img-thumbnail" 
                                                 style="width: 100%; height: 100px; object-fit: cover;">
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                            <input type="file" 
                                   class="form-control @error('gallery') is-invalid @enderror" 
                                   id="gallery" 
                                   name="gallery[]" 
                                   accept="image/*"
                                   multiple>
                            <small class="text-muted">اگر می‌خواهید تصاویر گالری را تغییر دهید، فایل‌های جدید را انتخاب کنید.</small>
                            @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', $service->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', $service->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