@extends('layouts.admin')

@section('title', __('Create Portfolio Project'))

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard', ['locale' => app()->getLocale()]) }}">{{ __('Dashboard') }}</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.portfolio.dashboard', ['locale' => app()->getLocale()]) }}">{{ __('Portfolio') }}</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.portfolio.projects.index', ['locale' => app()->getLocale()]) }}">{{ __('Projects') }}</a></li>
                        <li class="breadcrumb-item active">{{ __('Create') }}</li>
                    </ol>
                </div>
                <h4 class="page-title">{{ __('Create Portfolio Project') }}</h4>
            </div>
        </div>
    </div>

    <!-- Form -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form id="projectForm" method="POST" action="{{ route('admin.portfolio.projects.store', ['locale' => app()->getLocale()]) }}" enctype="multipart/form-data">
                        @csrf

                        <!-- Basic Information -->
                        <div class="row">
                            <div class="col-12">
                                <h5 class="mb-3">{{ __('Basic Information') }}</h5>
                            </div>
                        </div>

                        <!-- English Title -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="title_en" class="form-label">{{ __('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') }}" required>
                                @error('title_en')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

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

                        <!-- Category and Client -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="portfolio_category_id" class="form-label">{{ __('Category') }} <span class="text-danger">*</span></label>
                                <select class="form-select @error('portfolio_category_id') is-invalid @enderror" id="portfolio_category_id" name="portfolio_category_id" required>
                                    <option value="">{{ __('Select Category') }}</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" {{ old('portfolio_category_id') == $category->id ? 'selected' : '' }}>
                                            {{ $category->name_en }} @if($category->name_ar) ({{ $category->name_ar }}) @endif
                                        </option>
                                    @endforeach
                                </select>
                                @error('portfolio_category_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="client_id" class="form-label">{{ __('Client') }}</label>
                                <select class="form-select @error('client_id') is-invalid @enderror" id="client_id" name="client_id">
                                    <option value="">{{ __('Select Client') }}</option>
                                    @foreach($clients as $client)
                                        <option value="{{ $client->id }}" {{ old('client_id') == $client->id ? 'selected' : '' }}>
                                            {{ $client->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('client_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Challenge (English & Arabic) -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="challenge_en" class="form-label">{{ __('Challenge (English)') }} <span class="text-danger">*</span></label>
                                <textarea class="form-control @error('challenge_en') is-invalid @enderror" id="challenge_en" name="challenge_en" rows="3" required>{{ old('challenge_en') }}</textarea>
                                @error('challenge_en')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="challenge_ar" class="form-label">{{ __('Challenge (Arabic)') }} <span class="text-danger">*</span></label>
                                <textarea class="form-control @error('challenge_ar') is-invalid @enderror" id="challenge_ar" name="challenge_ar" rows="3" required dir="rtl">{{ old('challenge_ar') }}</textarea>
                                @error('challenge_ar')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Solution (English & Arabic) -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="solution_en" class="form-label">{{ __('Solution (English)') }} <span class="text-danger">*</span></label>
                                <textarea class="form-control @error('solution_en') is-invalid @enderror" id="solution_en" name="solution_en" rows="4" required>{{ old('solution_en') }}</textarea>
                                @error('solution_en')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="solution_ar" class="form-label">{{ __('Solution (Arabic)') }} <span class="text-danger">*</span></label>
                                <textarea class="form-control @error('solution_ar') is-invalid @enderror" id="solution_ar" name="solution_ar" rows="4" required dir="rtl">{{ old('solution_ar') }}</textarea>
                                @error('solution_ar')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

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

                            <div class="col-md-6">
                                <label for="results_ar" class="form-label">{{ __('Results (Arabic)') }}</label>
                                <textarea class="form-control @error('results_ar') is-invalid @enderror" id="results_ar" name="results_ar" rows="3" dir="rtl">{{ old('results_ar') }}</textarea>
                                @error('results_ar')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Technologies Used -->
                        <div class="row mb-3">
                            <div class="col-12">
                                <label for="technologies_used" class="form-label">{{ __('Technologies Used') }}</label>
                                <input type="text" class="form-control @error('technologies_used') is-invalid @enderror" id="technologies_used" name="technologies_used" value="{{ old('technologies_used') }}" placeholder="{{ __('e.g., Laravel, Vue.js, MySQL') }}">
                                @error('technologies_used')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">{{ __('Separate technologies with commas') }}</small>
                            </div>
                        </div>

                        <!-- Project Details -->
                        <div class="row">
                            <div class="col-12">
                                <h5 class="mb-3">{{ __('Project Details') }}</h5>
                            </div>
                        </div>

                        <!-- Budget and Duration -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="budget" class="form-label">{{ __('Budget ($)') }}</label>
                                <input type="number" class="form-control @error('budget') is-invalid @enderror" id="budget" name="budget" value="{{ old('budget') }}" step="0.01" min="0">
                                @error('budget')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label for="duration" class="form-label">{{ __('Duration (Months)') }}</label>
                                <input type="number" class="form-control @error('duration') is-invalid @enderror" id="duration" name="duration" value="{{ old('duration') }}" min="0">
                                @error('duration')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

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

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

                            <div class="col-md-6">
                                <label for="demo_url" class="form-label">{{ __('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>

                        <!-- Featured Image -->
                        <div class="row mb-3">
                            <div class="col-12">
                                <label for="featured_image" class="form-label">{{ __('Featured Image') }} <span class="text-danger">*</span></label>
                                <input type="file" class="form-control @error('featured_image') is-invalid @enderror" id="featured_image" name="featured_image" accept="image/*" required>
                                @error('featured_image')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">{{ __('Recommended size: 800x600px. Max file size: 2MB') }}</small>
                                <div id="imagePreview" class="mt-2" style="display: none;">
                                    <img id="previewImg" src="" alt="Preview" class="img-thumbnail" style="max-width: 200px;">
                                </div>
                            </div>
                        </div>

                        <!-- Gallery Images -->
                        <div class="row mb-3">
                            <div class="col-12">
                                <label for="gallery_images" class="form-label">{{ __('Gallery Images') }}</label>
                                <input type="file" class="form-control @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
                                <small class="form-text text-muted">{{ __('Select multiple images. Max 10 images, each up to 2MB') }}</small>
                            </div>
                        </div>

                        <!-- Status Options -->
                        <div class="row mb-3">
                            <div class="col-12">
                                <h5 class="mb-3">{{ __('Status & Visibility') }}</h5>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <div class="form-check form-switch">
                                    <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">
                                        {{ __('Active') }}
                                    </label>
                                </div>
                                <small class="form-text text-muted">{{ __('Show this project on the website') }}</small>
                            </div>

                            <div class="col-md-4">
                                <div class="form-check form-switch">
                                    <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">
                                        {{ __('Featured') }}
                                    </label>
                                </div>
                                <small class="form-text text-muted">{{ __('Highlight this project on the homepage') }}</small>
                            </div>

                            <div class="col-md-4">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="show_in_portfolio" name="show_in_portfolio" value="1" {{ old('show_in_portfolio', true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_in_portfolio">
                                        {{ __('Show in Portfolio') }}
                                    </label>
                                </div>
                                <small class="form-text text-muted">{{ __('Include in portfolio listing') }}</small>
                            </div>
                        </div>

                        <!-- Sort Order -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <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
                                <small class="form-text text-muted">{{ __('Lower numbers appear first') }}</small>
                            </div>
                        </div>

                        <!-- SEO Meta -->
                        <div class="row mb-3">
                            <div class="col-12">
                                <h5 class="mb-3">{{ __('SEO & Meta Information') }}</h5>
                            </div>
                        </div>

                        <!-- Meta Title -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <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') }}" maxlength="60">
                                @error('meta_title_en')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">{{ __('Max 60 characters') }}</small>
                            </div>

                            <div class="col-md-6">
                                <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') }}" maxlength="60" dir="rtl">
                                @error('meta_title_ar')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">{{ __('Max 60 characters') }}</small>
                            </div>
                        </div>

                        <!-- Meta Description -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <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="2" maxlength="160">{{ old('meta_description_en') }}</textarea>
                                @error('meta_description_en')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">{{ __('Max 160 characters') }}</small>
                            </div>

                            <div class="col-md-6">
                                <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="2" maxlength="160" dir="rtl">{{ old('meta_description_ar') }}</textarea>
                                @error('meta_description_ar')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">{{ __('Max 160 characters') }}</small>
                            </div>
                        </div>

                        <!-- Actions -->
                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex justify-content-end">
                                    <a href="{{ route('admin.portfolio.projects.index', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary me-2">
                                        <i class="mdi mdi-arrow-left me-1"></i>{{ __('Cancel') }}
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="mdi mdi-content-save me-1"></i>{{ __('Create Project') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.card {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #dee2e6;
}

.form-label {
    font-weight: 600;
    color: #495057;
}

.text-danger {
    color: #dc3545 !important;
}

.img-thumbnail {
    border: 1px solid #dee2e6;
}

[dir="rtl"] {
    text-align: right;
}

.form-text {
    font-size: 0.875em;
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Image Preview
    $('#featured_image').on('change', function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#previewImg').attr('src', e.target.result);
                $('#imagePreview').show();
            };
            reader.readAsDataURL(file);
        } else {
            $('#imagePreview').hide();
        }
    });

    // Character Counter for Meta Fields
    $('#meta_title_en, #meta_title_ar').on('input', function() {
        const maxLength = 60;
        const currentLength = $(this).val().length;
        const counter = $(this).next('.form-text').find('.char-counter');

        if (counter.length === 0) {
            $(this).next('.form-text').append(` <span class="char-counter text-muted">(${currentLength}/${maxLength})</span>`);
        } else {
            counter.text(`(${currentLength}/${maxLength})`);
        }

        if (currentLength > maxLength) {
            $(this).addClass('is-invalid');
        } else {
            $(this).removeClass('is-invalid');
        }
    });

    $('#meta_description_en, #meta_description_ar').on('input', function() {
        const maxLength = 160;
        const currentLength = $(this).val().length;
        const counter = $(this).next('.form-text').find('.char-counter');

        if (counter.length === 0) {
            $(this).next('.form-text').append(` <span class="char-counter text-muted">(${currentLength}/${maxLength})</span>`);
        } else {
            counter.text(`(${currentLength}/${maxLength})`);
        }

        if (currentLength > maxLength) {
            $(this).addClass('is-invalid');
        } else {
            $(this).removeClass('is-invalid');
        }
    });

    // Form Validation
    $('#projectForm').on('submit', function(e) {
        let isValid = true;

        // Check required fields
        const requiredFields = ['title_en', 'title_ar', 'portfolio_category_id', 'challenge_en', 'challenge_ar', 'solution_en', 'solution_ar'];

        requiredFields.forEach(field => {
            const $field = $(`#${field}`);
            if (!$field.val().trim()) {
                $field.addClass('is-invalid');
                isValid = false;
            } else {
                $field.removeClass('is-invalid');
            }
        });

        // Check featured image
        const $featuredImage = $('#featured_image');
        if (!$featuredImage[0].files[0]) {
            $featuredImage.addClass('is-invalid');
            isValid = false;
        } else {
            $featuredImage.removeClass('is-invalid');
        }

        if (!isValid) {
            e.preventDefault();
            // Scroll to first error
            const firstError = $('.is-invalid').first();
            if (firstError.length) {
                $('html, body').animate({
                    scrollTop: firstError.offset().top - 100
                }, 500);
            }
            return false;
        }
    });

    // Initialize tooltips
    $('[data-bs-toggle="tooltip"]').tooltip();
});
</script>
@endpush