@extends('admin.layouts.app')

@section('title', 'Create About Page')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Create About Page</h3>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.about.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="row">
                            <div class="col-md-8">
                                <div class="card">
                                    <div class="card-header">
                                        <h4>Basic Information</h4>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="title">Title *</label>
                                            <input type="text" name="title" id="title" class="form-control" value="{{ old('title') }}" required>
                                            @error('title')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label for="content">Content *</label>
                                            <textarea name="content" id="content" class="form-control" rows="5" required>{{ old('content') }}</textarea>
                                            @error('content')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label for="mission">Mission *</label>
                                            <textarea name="mission" id="mission" class="form-control" rows="3" required>{{ old('mission') }}</textarea>
                                            @error('mission')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label for="vision">Vision *</label>
                                            <textarea name="vision" id="vision" class="form-control" rows="3" required>{{ old('vision') }}</textarea>
                                            @error('vision')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label for="values">Values *</label>
                                            <textarea name="values" id="values" class="form-control" rows="3" required>{{ old('values') }}</textarea>
                                            @error('values')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label for="why_choose_us">Why Choose Us *</label>
                                            <textarea name="why_choose_us" id="why_choose_us" class="form-control" rows="3" required>{{ old('why_choose_us') }}</textarea>
                                            @error('why_choose_us')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="card mt-3">
                                    <div class="card-header">
                                        <h4>Achievements List</h4>
                                    </div>
                                    <div class="card-body">
                                        <div id="achievements-container">
                                            <div class="achievement-item mb-2">
                                                <div class="input-group">
                                                    <input type="text" name="achievements_list[]" class="form-control" placeholder="Enter achievement">
                                                    <button type="button" class="btn btn-danger remove-achievement">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="button" id="add-achievement" class="btn btn-secondary mt-2">
                                            <i class="fas fa-plus"></i> Add Achievement
                                        </button>
                                        @error('achievements_list')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="card">
                                    <div class="card-header">
                                        <h4>Statistics</h4>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="years_experience">Years Experience *</label>
                                            <input type="number" name="years_experience" id="years_experience" class="form-control" value="{{ old('years_experience', 0) }}" min="0" required>
                                            @error('years_experience')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label for="expert_instructors">Expert Instructors *</label>
                                            <input type="number" name="expert_instructors" id="expert_instructors" class="form-control" value="{{ old('expert_instructors', 0) }}" min="0" required>
                                            @error('expert_instructors')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label for="students_worldwide">Students Worldwide *</label>
                                            <input type="number" name="students_worldwide" id="students_worldwide" class="form-control" value="{{ old('students_worldwide', 0) }}" min="0" required>
                                            @error('students_worldwide')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="card mt-3">
                                    <div class="card-header">
                                        <h4>Images</h4>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="main_image">Main Image</label>
                                            <input type="file" name="main_image" id="main_image" class="form-control-file">
                                            @error('main_image')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label for="gallery_image_1">Gallery Image 1</label>
                                            <input type="file" name="gallery_image_1" id="gallery_image_1" class="form-control-file">
                                            @error('gallery_image_1')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label for="gallery_image_2">Gallery Image 2</label>
                                            <input type="file" name="gallery_image_2" id="gallery_image_2" class="form-control-file">
                                            @error('gallery_image_2')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label for="gallery_image_3">Gallery Image 3</label>
                                            <input type="file" name="gallery_image_3" id="gallery_image_3" class="form-control-file">
                                            @error('gallery_image_3')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="card mt-3">
                                    <div class="card-header">
                                        <h4>SEO Settings</h4>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="meta_title">Meta Title</label>
                                            <input type="text" name="meta_title" id="meta_title" class="form-control" value="{{ old('meta_title') }}">
                                            <small class="form-text text-muted">Recommended: 50-60 characters</small>
                                            @error('meta_title')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label for="meta_description">Meta Description</label>
                                            <textarea name="meta_description" id="meta_description" class="form-control" rows="3">{{ old('meta_description') }}</textarea>
                                            <small class="form-text text-muted">Recommended: 150-160 characters</small>
                                            @error('meta_description')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label for="meta_keywords">Meta Keywords</label>
                                            <input type="text" name="meta_keywords" id="meta_keywords" class="form-control" value="{{ old('meta_keywords') }}">
                                            <small class="form-text text-muted">Separate keywords with commas</small>
                                            @error('meta_keywords')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="card mt-3">
                                    <div class="card-header">
                                        <h4>Status</h4>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" name="is_active" class="custom-control-input" id="is_active" value="1" checked>
                                                <label class="custom-control-label" for="is_active">Active</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mt-3">
                            <button type="submit" class="btn btn-success">
                                <i class="fas fa-save"></i> Create About Page
                            </button>
                            <a href="{{ route('admin.about.index') }}" class="btn btn-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add achievement field
    document.getElementById('add-achievement').addEventListener('click', function() {
        const container = document.getElementById('achievements-container');
        const newItem = document.createElement('div');
        newItem.className = 'achievement-item mb-2';
        newItem.innerHTML = `
            <div class="input-group">
                <input type="text" name="achievements_list[]" class="form-control" placeholder="Enter achievement">
                <button type="button" class="btn btn-danger remove-achievement">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        `;
        container.appendChild(newItem);
    });

    // Remove achievement field
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-achievement') || e.target.closest('.remove-achievement')) {
            const button = e.target.classList.contains('remove-achievement') ? e.target : e.target.closest('.remove-achievement');
            const achievementItem = button.closest('.achievement-item');
            if (document.querySelectorAll('.achievement-item').length > 1) {
                achievementItem.remove();
            }
        }
    });
});
</script>
