@extends('layouts.admin')

@section('title', __('admin.services.edit_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.edit_service') }}</h1>
            <p class="mb-0 text-muted">{{ __('admin.services.update_service_information') }}</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>

    <!-- Service Edit Form -->
    <div class="row">
        <div class="col-lg-12">
            <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.update', ['locale' => app()->getLocale(), 'service' => $service]) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <!-- Language Tabs -->
                        <ul class="nav nav-tabs" id="languageTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="english-tab" data-toggle="tab" data-target="#english" type="button" role="tab" aria-controls="english" aria-selected="true">
                                    <i class="fas fa-language"></i> {{ __('English') }}
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="arabic-tab" data-toggle="tab" data-target="#arabic" type="button" role="tab" aria-controls="arabic" aria-selected="false">
                                    <i class="fas fa-language"></i> {{ __('Arabic') }}
                                </button>
                            </li>
                        </ul>

                        <div class="tab-content" id="languageTabsContent">
                            <!-- English Content -->
                            <div class="tab-pane fade show active" id="english" role="tabpanel" aria-labelledby="english-tab">
                                <div class="row mt-4">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="title_en">{{ __('Title (English)') }} <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', $service->title_en) }}" required>
                                            @error('title_en')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="slug_en">{{ __('Slug (English)') }}</label>
                                            <input type="text" class="form-control @error('slug_en') is-invalid @enderror" id="slug_en" name="slug_en" value="{{ old('slug_en', $service->slug_en) }}">
                                            @error('slug_en')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">{{ __('Leave empty to auto-generate from title') }}</small>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="short_description_en">{{ __('Short Description (English)') }}</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', $service->short_description_en) }}</textarea>
                                            @error('short_description_en')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="full_description_en">{{ __('Full Description (English)') }}</label>
                                            <textarea class="form-control @error('full_description_en') is-invalid @enderror summernote" id="full_description_en" name="full_description_en" rows="6">{{ old('full_description_en', $service->full_description_en) }}</textarea>
                                            @error('full_description_en')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Arabic Content -->
                            <div class="tab-pane fade" id="arabic" role="tabpanel" aria-labelledby="arabic-tab">
                                <div class="row mt-4">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="title_ar">{{ __('Title (Arabic)') }} <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', $service->title_ar) }}" required dir="rtl">
                                            @error('title_ar')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="slug_ar">{{ __('Slug (Arabic)') }}</label>
                                            <input type="text" class="form-control @error('slug_ar') is-invalid @enderror" id="slug_ar" name="slug_ar" value="{{ old('slug_ar', $service->slug_ar) }}" dir="rtl">
                                            @error('slug_ar')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">{{ __('Leave empty to auto-generate from title') }}</small>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="short_description_ar">{{ __('Short Description (Arabic)') }}</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', $service->short_description_ar) }}</textarea>
                                            @error('short_description_ar')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="full_description_ar">{{ __('Full Description (Arabic)') }}</label>
                                            <textarea class="form-control @error('full_description_ar') is-invalid @enderror summernote" id="full_description_ar" name="full_description_ar" rows="6" dir="rtl">{{ old('full_description_ar', $service->full_description_ar) }}</textarea>
                                            @error('full_description_ar')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Basic Information -->
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="category_id">{{ __('Category') }}</label>
                                    <select class="form-control @error('category_id') is-invalid @enderror" id="category_id" name="category_id">
                                        <option value="">{{ __('Select Category') }}</option>
                                        @foreach($categories as $category)
                                            <option value="{{ $category->id }}" {{ old('category_id', $service->category_id) == $category->id ? 'selected' : '' }}>
                                                {{ $category->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('category_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="icon">{{ __('Icon') }}</label>
                                    <input type="text" class="form-control @error('icon') is-invalid @enderror" id="icon" name="icon" value="{{ old('icon', $service->icon) }}" placeholder="fas fa-cogs">
                                    @error('icon')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">{{ __('FontAwesome icon class (e.g., fas fa-cogs)') }}</small>
                                </div>
                            </div>
                        </div>

                        <!-- Media Uploads -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="featured_image">{{ __('Featured Image') }}</label>
                                    <input type="file" class="form-control-file @error('featured_image') is-invalid @enderror" id="featured_image" name="featured_image" accept="image/*">
                                    @error('featured_image')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    @if($service->featured_image)
                                        <div class="mt-2">
                                            <img src="{{ asset('storage/' . $service->featured_image) }}" alt="Current Featured Image" class="img-thumbnail" style="width: 100px; height: 100px; object-fit: cover;">
                                            <p class="mt-1 mb-0"><small class="text-muted">{{ __('Current featured image') }}</small></p>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="gallery_images">{{ __('Gallery Images') }}</label>
                                    <input type="file" class="form-control-file @error('gallery_images') is-invalid @enderror" id="gallery_images" name="gallery_images[]" accept="image/*" multiple>
                                    @error('gallery_images')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    @if($service->gallery_images && count($service->gallery_images) > 0)
                                        <div class="mt-2">
                                            <p class="mb-2"><small class="text-muted">{{ __('Current gallery images:') }}</small></p>
                                            <div class="d-flex flex-wrap">
                                                @foreach($service->gallery_images as $image)
                                                    <img src="{{ asset('storage/' . $image) }}" alt="Gallery Image" class="img-thumbnail mr-2 mb-2" style="width: 60px; height: 60px; object-fit: cover;">
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- SEO Settings -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="meta_title_en">{{ __('Meta Title (English)') }}</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', $service->meta_title_en) }}" maxlength="60">
                                    @error('meta_title_en')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">{{ __('Leave empty to auto-generate') }}</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="meta_title_ar">{{ __('Meta Title (Arabic)') }}</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', $service->meta_title_ar) }}" maxlength="60" dir="rtl">
                                    @error('meta_title_ar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">{{ __('Leave empty to auto-generate') }}</small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="meta_description_en">{{ __('Meta Description (English)') }}</label>
                                    <textarea class="form-control @error('meta_description_en') is-invalid @enderror" id="meta_description_en" name="meta_description_en" rows="2" maxlength="160">{{ old('meta_description_en', $service->meta_description_en) }}</textarea>
                                    @error('meta_description_en')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">{{ __('Leave empty to auto-generate') }}</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="meta_description_ar">{{ __('Meta Description (Arabic)') }}</label>
                                    <textarea class="form-control @error('meta_description_ar') is-invalid @enderror" id="meta_description_ar" name="meta_description_ar" rows="2" maxlength="160" dir="rtl">{{ old('meta_description_ar', $service->meta_description_ar) }}</textarea>
                                    @error('meta_description_ar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">{{ __('Leave empty to auto-generate') }}</small>
                                </div>
                            </div>
                        </div>

                        <!-- Status Settings -->
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <div class="custom-control custom-switch">
                                        <input type="hidden" name="is_active" value="0">
                                        <input type="checkbox" class="custom-control-input" id="is_active" name="is_active" value="1" {{ old('is_active', $service->is_active) ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="is_active">{{ __('Active') }}</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <div class="custom-control custom-switch">
                                        <input type="hidden" name="is_featured" value="0">
                                        <input type="checkbox" class="custom-control-input" id="is_featured" name="is_featured" value="1" {{ old('is_featured', $service->is_featured) ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="is_featured">{{ __('Featured') }}</label>
                                    </div>
                                </div>
                            </div>
                        </div>

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

@push('scripts')
<script>
$(document).ready(function() {
    // Initialize Summernote
    $('.summernote').summernote({
        height: 200,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture']],
            ['view', ['fullscreen', 'codeview', 'help']]
        ],
        callbacks: {
            onImageUpload: function(files) {
                uploadImage(files[0], this);
            }
        }
    });

    // Auto-generate slug from title
    $('#title_en').on('input', function() {
        if (!$('#slug_en').val()) {
            $('#slug_en').val(slugify($(this).val()));
        }
    });

    $('#title_ar').on('input', function() {
        if (!$('#slug_ar').val()) {
            $('#slug_ar').val(slugify($(this).val()));
        }
    });

    function slugify(text) {
        return text.toString().toLowerCase()
            .replace(/\s+/g, '-')
            .replace(/[^\w\-]+/g, '')
            .replace(/\-\-+/g, '-')
            .replace(/^-+/, '')
            .replace(/-+$/, '');
    }

    function uploadImage(file, editor) {
        var data = new FormData();
        data.append('image', file);

        $.ajax({
            url: '{{ route("admin.services.upload-image", ["locale" => app()->getLocale()]) }}',
            type: 'POST',
            data: data,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                $(editor).summernote('insertImage', response.url);
            },
            error: function(xhr) {
                console.error('Image upload failed:', xhr.responseText);
            }
        });
    }
});
</script>
@endpush