@extends('layouts.admin')

@section('title', 'افزودن نمونه کار جدید')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">افزودن نمونه کار جدید</h1>
        <a href="{{ route('admin.portfolios.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-right ms-2"></i>
            بازگشت به لیست
        </a>
    </div>

    <div class="card">
        <div class="card-body">
            <form action="{{ route('admin.portfolios.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row">
                    <div class="col-md-8">
                        <div class="mb-3">
                            <label for="title" class="form-label">عنوان پروژه</label>
                            <input type="text" 
                                   class="form-control @error('title') is-invalid @enderror" 
                                   id="title" 
                                   name="title" 
                                   value="{{ old('title') }}" 
                                   required>
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">توضیحات</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" 
                                      name="description" 
                                      rows="5" 
                                      required>{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="challenges" class="form-label">چالش‌ها</label>
                            <textarea class="form-control @error('challenges') is-invalid @enderror" 
                                      id="challenges" 
                                      name="challenges" 
                                      rows="3" 
                                      required>{{ old('challenges') }}</textarea>
                            @error('challenges')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="results" class="form-label">نتایج</label>
                            <textarea class="form-control @error('results') is-invalid @enderror" 
                                      id="results" 
                                      name="results" 
                                      rows="3" 
                                      required>{{ old('results') }}</textarea>
                            @error('results')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="client" class="form-label">مشتری</label>
                            <input type="text" 
                                   class="form-control @error('client') is-invalid @enderror" 
                                   id="client" 
                                   name="client" 
                                   value="{{ old('client') }}" 
                                   required>
                            @error('client')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="category" class="form-label">دسته‌بندی</label>
                            <select class="form-select @error('category') is-invalid @enderror" 
                                    id="category" 
                                    name="category" 
                                    required>
                                <option value="">انتخاب دسته‌بندی</option>
                                <option value="طراحی وب" {{ old('category') == 'طراحی وب' ? 'selected' : '' }}>طراحی وب</option>
                                <option value="توسعه وب" {{ old('category') == 'توسعه وب' ? 'selected' : '' }}>توسعه وب</option>
                                <option value="اپلیکیشن موبایل" {{ old('category') == 'اپلیکیشن موبایل' ? 'selected' : '' }}>اپلیکیشن موبایل</option>
                                <option value="طراحی UI/UX" {{ old('category') == 'طراحی UI/UX' ? 'selected' : '' }}>طراحی UI/UX</option>
                            </select>
                            @error('category')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="technologies" class="form-label">تکنولوژی‌ها</label>
                            <select class="form-select @error('technologies') is-invalid @enderror" 
                                    id="technologies" 
                                    name="technologies[]" 
                                    multiple 
                                    required>
                                <option value="HTML5" {{ in_array('HTML5', old('technologies', [])) ? 'selected' : '' }}>HTML5</option>
                                <option value="CSS3" {{ in_array('CSS3', old('technologies', [])) ? 'selected' : '' }}>CSS3</option>
                                <option value="JavaScript" {{ in_array('JavaScript', old('technologies', [])) ? 'selected' : '' }}>JavaScript</option>
                                <option value="Vue.js" {{ in_array('Vue.js', old('technologies', [])) ? 'selected' : '' }}>Vue.js</option>
                                <option value="React" {{ in_array('React', old('technologies', [])) ? 'selected' : '' }}>React</option>
                                <option value="Laravel" {{ in_array('Laravel', old('technologies', [])) ? 'selected' : '' }}>Laravel</option>
                                <option value="PHP" {{ in_array('PHP', old('technologies', [])) ? 'selected' : '' }}>PHP</option>
                                <option value="MySQL" {{ in_array('MySQL', old('technologies', [])) ? 'selected' : '' }}>MySQL</option>
                                <option value="MongoDB" {{ in_array('MongoDB', old('technologies', [])) ? 'selected' : '' }}>MongoDB</option>
                                <option value="Node.js" {{ in_array('Node.js', old('technologies', [])) ? 'selected' : '' }}>Node.js</option>
                                <option value="Docker" {{ in_array('Docker', old('technologies', [])) ? 'selected' : '' }}>Docker</option>
                                <option value="AWS" {{ in_array('AWS', old('technologies', [])) ? 'selected' : '' }}>AWS</option>
                            </select>
                            @error('technologies')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="project_url" class="form-label">آدرس پروژه</label>
                            <input type="url" 
                                   class="form-control @error('project_url') is-invalid @enderror" 
                                   id="project_url" 
                                   name="project_url" 
                                   value="{{ old('project_url') }}">
                            @error('project_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="thumbnail" class="form-label">تصویر شاخص</label>
                            <input type="file" 
                                   class="form-control @error('thumbnail') is-invalid @enderror" 
                                   id="thumbnail" 
                                   name="thumbnail" 
                                   accept="image/*"
                                   required>
                            @error('thumbnail')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="gallery" class="form-label">گالری تصاویر</label>
                            <input type="file" 
                                   class="form-control @error('gallery') is-invalid @enderror" 
                                   id="gallery" 
                                   name="gallery[]" 
                                   accept="image/*"
                                   multiple
                                   required>
                            @error('gallery')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" 
                                       class="form-check-input @error('is_active') is-invalid @enderror" 
                                       id="is_active" 
                                       name="is_active" 
                                       value="1" 
                                       {{ old('is_active') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">فعال</label>
                                @error('is_active')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" 
                                       class="form-check-input @error('is_featured') is-invalid @enderror" 
                                       id="is_featured" 
                                       name="is_featured" 
                                       value="1" 
                                       {{ old('is_featured') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_featured">نمونه کار ویژه</label>
                                @error('is_featured')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="text-end mt-4">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save ms-2"></i>
                        ذخیره نمونه کار
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Initialize select2 for technologies
    $(document).ready(function() {
        $('#technologies').select2({
            placeholder: 'تکنولوژی‌ها را انتخاب کنید',
            allowClear: true,
            dir: 'rtl'
        });
    });
</script>
@endpush
@endsection