@extends('layouts.admin')

@section('title', __('Create Product'))

@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">{{ __('Create Product') }}</h1>
            <p class="mb-0 text-muted">{{ __('Add a new software product to your website') }}</p>
        </div>
        <div>
            <a href="{{ route('admin.products.list', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> {{ __('Back to Products') }}
            </a>
        </div>
    </div>

    <form action="{{ route('admin.products.store', ['locale' => app()->getLocale()]) }}" method="POST" enctype="multipart/form-data" id="productForm">
        @csrf

        <!-- Basic Information -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('Basic Information') }}</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- English Name -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="name_en">{{ __('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>

                    <!-- Arabic Name -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="name_ar">{{ __('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 dir="rtl">
                            @error('name_ar')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- English Slug -->
                    <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') }}" placeholder="{{ __('Auto-generated from name') }}">
                            @error('slug_en')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Arabic Slug -->
                    <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') }}" placeholder="{{ __('Auto-generated from name') }}" dir="rtl">
                            @error('slug_ar')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- Category -->
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="category_id">{{ __('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="">{{ __('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>

                    <!-- Version -->
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="version">{{ __('Version') }}</label>
                            <input type="text" class="form-control @error('version') is-invalid @enderror" id="version" name="version" value="{{ old('version') }}" placeholder="1.0.0">
                            @error('version')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Release Date -->
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="release_date">{{ __('Release Date') }}</label>
                            <input type="date" class="form-control @error('release_date') is-invalid @enderror" id="release_date" name="release_date" value="{{ old('release_date') }}">
                            @error('release_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- Active Status -->
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-check-label">{{ __('Active') }}</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">
                                    {{ __('Product is active') }}
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Featured -->
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-check-label">{{ __('Featured') }}</label>
                            <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">
                                    {{ __('Mark as featured') }}
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Downloadable -->
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-check-label">{{ __('Downloadable') }}</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="is_downloadable" name="is_downloadable" value="1" {{ old('is_downloadable') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_downloadable">
                                    {{ __('Allow downloads') }}
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Demo Available -->
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-check-label">{{ __('Demo Available') }}</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="has_demo" name="has_demo" value="1" {{ old('has_demo') ? 'checked' : '' }}>
                                <label class="form-check-label" for="has_demo">
                                    {{ __('Demo available') }}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Content -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('Content') }}</h6>
            </div>
            <div class="card-body">
                <!-- English Description -->
                <div class="form-group">
                    <label for="description_en">{{ __('Description (English)') }} <span class="text-danger">*</span></label>
                    <textarea class="form-control @error('description_en') is-invalid @enderror" id="description_en" name="description_en" rows="10" required>{{ old('description_en') }}</textarea>
                    @error('description_en')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Arabic Description -->
                <div class="form-group">
                    <label for="description_ar">{{ __('Description (Arabic)') }} <span class="text-danger">*</span></label>
                    <textarea class="form-control @error('description_ar') is-invalid @enderror" id="description_ar" name="description_ar" rows="10" required dir="rtl">{{ old('description_ar') }}</textarea>
                    @error('description_ar')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Summary -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('Summary & Excerpt') }}</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- English Summary -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="summary_en">{{ __('Summary (English)') }}</label>
                            <textarea class="form-control @error('summary_en') is-invalid @enderror" id="summary_en" name="summary_en" rows="4" placeholder="{{ __('Brief summary for product listing...') }}">{{ old('summary_en') }}</textarea>
                            @error('summary_en')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Arabic Summary -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="summary_ar">{{ __('Summary (Arabic)') }}</label>
                            <textarea class="form-control @error('summary_ar') is-invalid @enderror" id="summary_ar" name="summary_ar" rows="4" placeholder="{{ __('Brief summary for product listing...') }}" dir="rtl">{{ old('summary_ar') }}</textarea>
                            @error('summary_ar')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Media -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('Media') }}</h6>
            </div>
            <div class="card-body">
                <!-- Featured Image -->
                <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/*">
                    <small class="form-text text-muted">{{ __('Recommended size: 800x600px. Max file size: 2MB') }}</small>
                    @error('featured_image')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Gallery Images -->
                <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>
                    <small class="form-text text-muted">{{ __('Select multiple images. Max 10 images, 2MB each') }}</small>
                    @error('gallery_images')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Technical Details -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('Technical Details') }}</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- Platform -->
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="platform">{{ __('Platform') }}</label>
                            <select class="form-control @error('platform') is-invalid @enderror" id="platform" name="platform">
                                <option value="">{{ __('Select Platform') }}</option>
                                <option value="web" {{ old('platform') == 'web' ? 'selected' : '' }}>{{ __('Web Application') }}</option>
                                <option value="desktop" {{ old('platform') == 'desktop' ? 'selected' : '' }}>{{ __('Desktop Application') }}</option>
                                <option value="mobile" {{ old('platform') == 'mobile' ? 'selected' : '' }}>{{ __('Mobile Application') }}</option>
                                <option value="cross-platform" {{ old('platform') == 'cross-platform' ? 'selected' : '' }}>{{ __('Cross Platform') }}</option>
                            </select>
                            @error('platform')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Technology -->
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="technology">{{ __('Technology') }}</label>
                            <input type="text" class="form-control @error('technology') is-invalid @enderror" id="technology" name="technology" value="{{ old('technology') }}" placeholder="Laravel, React, Node.js">
                            @error('technology')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- License -->
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="license">{{ __('License') }}</label>
                            <select class="form-control @error('license') is-invalid @enderror" id="license" name="license">
                                <option value="">{{ __('Select License') }}</option>
                                <option value="free" {{ old('license') == 'free' ? 'selected' : '' }}>{{ __('Free') }}</option>
                                <option value="paid" {{ old('license') == 'paid' ? 'selected' : '' }}>{{ __('Paid') }}</option>
                                <option value="freemium" {{ old('license') == 'freemium' ? 'selected' : '' }}>{{ __('Freemium') }}</option>
                                <option value="open-source" {{ old('license') == 'open-source' ? 'selected' : '' }}>{{ __('Open Source') }}</option>
                            </select>
                            @error('license')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Requirements -->
                <div class="form-group">
                    <label for="requirements">{{ __('System Requirements') }}</label>
                    <textarea class="form-control @error('requirements') is-invalid @enderror" id="requirements" name="requirements" rows="3" placeholder="{{ __('Minimum system requirements...') }}">{{ old('requirements') }}</textarea>
                    @error('requirements')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Links & Downloads -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('Links & Downloads') }}</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- Demo URL -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="demo_url">{{ __('Demo URL') }}</label>
                            <input type="url" class="form-control @error('demo_url') is-invalid @enderror" id="demo_url" name="demo_url" value="{{ old('demo_url') }}" placeholder="https://demo.example.com">
                            @error('demo_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Download URL -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="download_url">{{ __('Download URL') }}</label>
                            <input type="url" class="form-control @error('download_url') is-invalid @enderror" id="download_url" name="download_url" value="{{ old('download_url') }}" placeholder="https://download.example.com">
                            @error('download_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- Documentation URL -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="documentation_url">{{ __('Documentation URL') }}</label>
                            <input type="url" class="form-control @error('documentation_url') is-invalid @enderror" id="documentation_url" name="documentation_url" value="{{ old('documentation_url') }}" placeholder="https://docs.example.com">
                            @error('documentation_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Repository URL -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="repository_url">{{ __('Repository URL') }}</label>
                            <input type="url" class="form-control @error('repository_url') is-invalid @enderror" id="repository_url" name="repository_url" value="{{ old('repository_url') }}" placeholder="https://github.com/user/repo">
                            @error('repository_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- SEO & Settings -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('SEO & Settings') }}</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- English Meta Title -->
                    <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') }}" maxlength="60">
                            <small class="form-text text-muted">{{ __('60 characters max. Auto-generated if empty.') }}</small>
                            @error('meta_title_en')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Arabic Meta Title -->
                    <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') }}" maxlength="60" dir="rtl">
                            <small class="form-text text-muted">{{ __('60 characters max. Auto-generated if empty.') }}</small>
                            @error('meta_title_ar')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- English Meta Description -->
                    <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="3" maxlength="160">{{ old('meta_description_en') }}</textarea>
                            <small class="form-text text-muted">{{ __('160 characters max. Auto-generated if empty.') }}</small>
                            @error('meta_description_en')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Arabic Meta Description -->
                    <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="3" maxlength="160" dir="rtl">{{ old('meta_description_ar') }}</textarea>
                            <small class="form-text text-muted">{{ __('160 characters max. Auto-generated if empty.') }}</small>
                            @error('meta_description_ar')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Tags -->
                <div class="form-group">
                    <label for="tags">{{ __('Tags') }}</label>
                    <input type="text" class="form-control @error('tags') is-invalid @enderror" id="tags" name="tags" value="{{ old('tags') }}" placeholder="{{ __('Enter tags separated by commas') }}">
                    <small class="form-text text-muted">{{ __('Separate tags with commas') }}</small>
                    @error('tags')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Submit Buttons -->
        <div class="card shadow mb-4">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <a href="{{ route('admin.products.list', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">{{ __('Cancel') }}</a>
                    <div>
                        <button type="submit" class="btn btn-primary">{{ __('Create Product') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</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 src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize TinyMCE for English description
    tinymce.init({
        selector: '#description_en',
        height: 400,
        menubar: false,
        plugins: 'lists link image code',
        toolbar: 'bold italic underline | bullist numlist | link image | code',
        images_upload_handler: function(blobInfo, success, failure) {
            let formData = new FormData();
            formData.append('image', blobInfo.blob(), blobInfo.filename());

            $.ajax({
                url: '{{ route("admin.products.upload-image", ["locale" => app()->getLocale()]) }}',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        success(response.url);
                    } else {
                        failure('Upload failed');
                    }
                },
                error: function() {
                    failure('Upload failed');
                }
            });
        }
    });

    // Initialize TinyMCE for Arabic description
    tinymce.init({
        selector: '#description_ar',
        height: 400,
        menubar: false,
        plugins: 'lists link image code',
        toolbar: 'bold italic underline | bullist numlist | link image | code',
        directionality: 'rtl',
        language: 'ar',
        images_upload_handler: function(blobInfo, success, failure) {
            let formData = new FormData();
            formData.append('image', blobInfo.blob(), blobInfo.filename());

            $.ajax({
                url: '{{ route("admin.products.upload-image", ["locale" => app()->getLocale()]) }}',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        success(response.url);
                    } else {
                        failure('Upload failed');
                    }
                },
                error: function() {
                    failure('Upload failed');
                }
            });
        }
    });

    // Auto-generate slugs
    $('#name_en').on('input', function() {
        if (!$('#slug_en').val()) {
            $('#slug_en').val(slugify($(this).val()));
        }
    });

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

    // Auto-generate meta titles
    $('#name_en').on('input', function() {
        if (!$('#meta_title_en').val()) {
            $('#meta_title_en').val($(this).val().substring(0, 60));
        }
    });

    $('#name_ar').on('input', function() {
        if (!$('#meta_title_ar').val()) {
            $('#meta_title_ar').val($(this).val().substring(0, 60));
        }
    });

    // Auto-generate meta descriptions
    $('#summary_en').on('input', function() {
        if (!$('#meta_description_en').val()) {
            $('#meta_description_en').val($(this).val().substring(0, 160));
        }
    });

    $('#summary_ar').on('input', function() {
        if (!$('#meta_description_ar').val()) {
            $('#meta_description_ar').val($(this).val().substring(0, 160));
        }
    });

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