@extends('layouts.admin')

@section('title', __('admin.services.create_service'))

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ __('admin.services.create_new_service') }}</h1>
            <p class="mb-0 text-muted">{{ __('admin.services.add_new_software_service') }}</p>
        </div>
        <div>
            <a href="{{ route('admin.services.list', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> {{ __('admin.services.back_to_services') }}
            </a>
        </div>
    </div>

    <!-- Create Form -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">{{ __('admin.services.service_information') }}</h6>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.services.store', ['locale' => app()->getLocale()]) }}" method="POST" enctype="multipart/form-data">
                @csrf

                <!-- Basic Information -->
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="title_en" class="form-label">{{ __('admin.services.title_en') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('title_en') is-invalid @enderror" id="title_en" name="title_en" value="{{ old('title_en') }}" required>
                        @error('title_en')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="title_ar" class="form-label">{{ __('admin.services.title_ar') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('title_ar') is-invalid @enderror" id="title_ar" name="title_ar" value="{{ old('title_ar') }}" required>
                        @error('title_ar')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="category_id" class="form-label">{{ __('admin.services.category') }} <span class="text-danger">*</span></label>
                        <select class="form-control @error('category_id') is-invalid @enderror" id="category_id" name="category_id" required>
                            <option value="">{{ __('admin.services.select_category') }}</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('category_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="icon" class="form-label">{{ __('admin.services.icon') }}</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fas fa-info-circle"></i></span>
                            </div>
                            <input type="text" class="form-control @error('icon') is-invalid @enderror" id="icon" name="icon" value="{{ old('icon') }}" placeholder="e.g., fas fa-cogs">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button" id="iconPicker">{{ __('admin.services.select_icon') }}</button>
                            </div>
                        </div>
                        @error('icon')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Descriptions -->
                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label for="short_description_en" class="form-label">{{ __('admin.services.short_description_en') }}</label>
                        <textarea class="form-control @error('short_description_en') is-invalid @enderror" id="short_description_en" name="short_description_en" rows="3">{{ old('short_description_en') }}</textarea>
                        @error('short_description_en')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-12 mb-3">
                        <label for="short_description_ar" class="form-label">{{ __('admin.services.short_description_ar') }}</label>
                        <textarea class="form-control @error('short_description_ar') is-invalid @enderror" id="short_description_ar" name="short_description_ar" rows="3" dir="rtl">{{ old('short_description_ar') }}</textarea>
                        @error('short_description_ar')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label for="full_description_en" class="form-label">{{ __('admin.services.full_description_en') }} <span class="text-danger">*</span></label>
                        <textarea class="form-control summernote @error('full_description_en') is-invalid @enderror" id="full_description_en" name="full_description_en" rows="10">{{ old('full_description_en') }}</textarea>
                        @error('full_description_en')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-12 mb-3">
                        <label for="full_description_ar" class="form-label">{{ __('admin.services.full_description_ar') }} <span class="text-danger">*</span></label>
                        <textarea class="form-control summernote @error('full_description_ar') is-invalid @enderror" id="full_description_ar" name="full_description_ar" rows="10" dir="rtl">{{ old('full_description_ar') }}</textarea>
                        @error('full_description_ar')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Media -->
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="featured_image" class="form-label">{{ __('admin.services.featured_image') }}</label>
                        <input type="file" class="form-control @error('featured_image') is-invalid @enderror" id="featured_image" name="featured_image" accept="image/*">
                        <small class="form-text text-muted">{{ __('admin.services.recommended_size') }}</small>
                        @error('featured_image')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="gallery_images" class="form-label">{{ __('admin.services.gallery_images') }}</label>
                        <input type="file" class="form-control @error('gallery_images') is-invalid @enderror" id="gallery_images" name="gallery_images[]" accept="image/*" multiple>
                        <small class="form-text text-muted">{{ __('admin.services.select_multiple_images') }}</small>
                        @error('gallery_images')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Features & Technologies -->
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="technologies_en" class="form-label">{{ __('admin.services.technologies_en') }}</label>
                        <textarea class="form-control @error('technologies_en') is-invalid @enderror" id="technologies_en" name="technologies_en" rows="4" placeholder="e.g., PHP, Laravel, MySQL">{{ old('technologies_en') }}</textarea>
                        @error('technologies_en')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="technologies_ar" class="form-label">{{ __('admin.services.technologies_ar') }}</label>
                        <textarea class="form-control @error('technologies_ar') is-invalid @enderror" id="technologies_ar" name="technologies_ar" rows="4" dir="rtl" placeholder="e.g., PHP, Laravel, MySQL">{{ old('technologies_ar') }}</textarea>
                        @error('technologies_ar')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="features_en" class="form-label">{{ __('admin.services.features_en') }}</label>
                        <textarea class="form-control @error('features_en') is-invalid @enderror" id="features_en" name="features_en" rows="4" placeholder="List key features">{{ old('features_en') }}</textarea>
                        @error('features_en')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="features_ar" class="form-label">{{ __('admin.services.features_ar') }}</label>
                        <textarea class="form-control @error('features_ar') is-invalid @enderror" id="features_ar" name="features_ar" rows="4" dir="rtl" placeholder="قائمة الميزات الرئيسية">{{ old('features_ar') }}</textarea>
                        @error('features_ar')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Pricing & FAQs -->
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="pricing_models_en" class="form-label">{{ __('admin.services.pricing_models_en') }}</label>
                        <textarea class="form-control @error('pricing_models_en') is-invalid @enderror" id="pricing_models_en" name="pricing_models_en" rows="3" placeholder="e.g., One-time, Subscription">{{ old('pricing_models_en') }}</textarea>
                        @error('pricing_models_en')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="pricing_models_ar" class="form-label">{{ __('admin.services.pricing_models_ar') }}</label>
                        <textarea class="form-control @error('pricing_models_ar') is-invalid @enderror" id="pricing_models_ar" name="pricing_models_ar" rows="3" dir="rtl" placeholder="مثال: لمرة واحدة, اشتراك">{{ old('pricing_models_ar') }}</textarea>
                        @error('pricing_models_ar')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label for="faqs_en" class="form-label">{{ __('admin.services.faqs_en') }}</label>
                        <textarea class="form-control @error('faqs_en') is-invalid @enderror" id="faqs_en" name="faqs_en" rows="6" placeholder="Q1: Question?&#10;A1: Answer...&#10;Q2: ...">{{ old('faqs_en') }}</textarea>
                        @error('faqs_en')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-12 mb-3">
                        <label for="faqs_ar" class="form-label">{{ __('admin.services.faqs_ar') }}</label>
                        <textarea class="form-control @error('faqs_ar') is-invalid @enderror" id="faqs_ar" name="faqs_ar" rows="6" dir="rtl" placeholder="س1: السؤال؟&#10;ج1: الإجابة...&#10;س2: ...">{{ old('faqs_ar') }}</textarea>
                        @error('faqs_ar')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Status & Featured -->
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" {{ old('is_active', 1) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_active">
                                {{ __('admin.services.active') }}
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_featured" name="is_featured" value="1" {{ old('is_featured') ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_featured">
                                {{ __('admin.services.featured') }}
                            </label>
                        </div>
                    </div>
                </div>

                <!-- SEO -->
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="meta_title_en" class="form-label">{{ __('admin.services.meta_title_en') }}</label>
                        <input type="text" class="form-control @error('meta_title_en') is-invalid @enderror" id="meta_title_en" name="meta_title_en" value="{{ old('meta_title_en') }}">
                        @error('meta_title_en')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="meta_title_ar" class="form-label">{{ __('admin.services.meta_title_ar') }}</label>
                        <input type="text" class="form-control @error('meta_title_ar') is-invalid @enderror" id="meta_title_ar" name="meta_title_ar" value="{{ old('meta_title_ar') }}">
                        @error('meta_title_ar')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="meta_description_en" class="form-label">{{ __('admin.services.meta_description_en') }}</label>
                        <textarea class="form-control @error('meta_description_en') is-invalid @enderror" id="meta_description_en" name="meta_description_en" rows="3">{{ old('meta_description_en') }}</textarea>
                        @error('meta_description_en')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="meta_description_ar" class="form-label">{{ __('admin.services.meta_description_ar') }}</label>
                        <textarea class="form-control @error('meta_description_ar') is-invalid @enderror" id="meta_description_ar" name="meta_description_ar" rows="3" dir="rtl">{{ old('meta_description_ar') }}</textarea>
                        @error('meta_description_ar')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Sort Order -->
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="sort_order" class="form-label">{{ __('admin.services.sort_order') }}</label>
                        <input type="number" class="form-control @error('sort_order') is-invalid @enderror" id="sort_order" name="sort_order" value="{{ old('sort_order', 0) }}" min="0">
                        @error('sort_order')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Submit Buttons -->
                <div class="row">
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> {{ __('admin.services.create_service') }}
                        </button>
                        <a href="{{ route('admin.services.list', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">
                            <i class="fas fa-times"></i> {{ __('Cancel') }}
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script>
$(document).ready(function() {
    $('.summernote').summernote({
        height: 200,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video']],
            ['view', ['fullscreen', 'codeview', 'help']]
        ]
    });

    // Icon picker functionality
    $('#iconPicker').on('click', function() {
        // Simple icon picker - you can enhance this with a proper icon picker library
        const icons = ['fas fa-cogs', 'fas fa-code', 'fas fa-mobile-alt', 'fas fa-cloud', 'fas fa-shield-alt', 'fas fa-chart-line', 'fas fa-users', 'fas fa-rocket'];
        let iconHtml = '<div class="row">';
        icons.forEach(icon => {
            iconHtml += `<div class="col-3 mb-2"><button type="button" class="btn btn-outline-secondary btn-block select-icon" data-icon="${icon}"><i class="${icon}"></i></button></div>`;
        });
        iconHtml += '</div>';

        // Create modal
        const modal = $(`
            <div class="modal fade" id="iconModal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Select Icon</h5>
                            <button type="button" class="close" data-dismiss="modal">
                                <span>&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">${iconHtml}</div>
                    </div>
                </div>
            </div>
        `);

        $('body').append(modal);
        $('#iconModal').modal('show');

        $('.select-icon').on('click', function() {
            const selectedIcon = $(this).data('icon');
            $('#icon').val(selectedIcon);
            $('#iconModal').modal('hide');
            $('#iconModal').remove();
        });

        $('#iconModal').on('hidden.bs.modal', function() {
            $(this).remove();
        });
    });
});
</script>
@endpush