@extends('layouts.admin')

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

@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_category') }}</h1>
            <p class="mb-0 text-muted">{{ __('admin.services.add_new_category_for_organizing_services') }}</p>
        </div>
        <div>
            <a href="{{ route('admin.services.categories.index', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> {{ __('admin.services.back_to_categories') }}
            </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.category_information') }}</h6>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.services.categories.store', ['locale' => app()->getLocale()]) }}" method="POST">
                @csrf

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

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="slug_en" class="form-label">{{ __('Slug (English)') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('slug_en') is-invalid @enderror" id="slug_en" name="slug_en" value="{{ old('slug_en') }}" required>
                        <small class="form-text text-muted">{{ __('URL-friendly version of the name') }}</small>
                        @error('slug_en')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="slug_ar" class="form-label">{{ __('Slug (Arabic)') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('slug_ar') is-invalid @enderror" id="slug_ar" name="slug_ar" value="{{ old('slug_ar') }}" required>
                        <small class="form-text text-muted">{{ __('URL-friendly version of the name in Arabic') }}</small>
                        @error('slug_ar')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Icon and Color -->
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="icon" class="form-label">{{ __('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">Pick Icon</button>
                            </div>
                        </div>
                        @error('icon')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="color" class="form-label">{{ __('Color') }}</label>
                        <input type="color" class="form-control @error('color') is-invalid @enderror" id="color" name="color" value="{{ old('color', '#007bff') }}">
                        @error('color')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Descriptions -->
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="description_en" class="form-label">{{ __('Description (English)') }}</label>
                        <textarea class="form-control @error('description_en') is-invalid @enderror" id="description_en" name="description_en" rows="3">{{ old('description_en') }}</textarea>
                        @error('description_en')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="description_ar" class="form-label">{{ __('Description (Arabic)') }}</label>
                        <textarea class="form-control @error('description_ar') is-invalid @enderror" id="description_ar" name="description_ar" rows="3" dir="rtl">{{ old('description_ar') }}</textarea>
                        @error('description_ar')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Status and Sort Order -->
                <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">
                                {{ __('Active') }}
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="sort_order" class="form-label">{{ __('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>

                <!-- SEO -->
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="meta_title_en" class="form-label">{{ __('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') }}">
                        @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">{{ __('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') }}">
                        @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">{{ __('Meta Description (English)') }}</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">{{ __('Meta Description (Arabic)') }}</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>

                <!-- Submit Buttons -->
                <div class="row">
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> {{ __('Create Category') }}
                        </button>
                        <a href="{{ route('admin.services.categories.index', ['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">
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Auto-generate slug from name
    $('#name_en').on('input', function() {
        const name = $(this).val();
        const slug = name.toLowerCase()
            .replace(/[^a-z0-9\s-]/g, '')
            .replace(/\s+/g, '-')
            .replace(/-+/g, '-')
            .trim('-');
        $('#slug_en').val(slug);
    });

    $('#name_ar').on('input', function() {
        const name = $(this).val();
        const slug = name.replace(/\s+/g, '-').replace(/[^\u0600-\u06FF0-9\-]/g, '');
        $('#slug_ar').val(slug);
    });

    // Icon picker functionality
    $('#iconPicker').on('click', function() {
        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', 'fas fa-palette', 'fas fa-camera', 'fas fa-music', 'fas fa-shopping-cart'];
        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>';

        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