@extends('admin.layouts.base')

@section('title', 'About Us Settings')

@section('content')
<div id="kt_app_content_container" class="app-container">
    <div class="card shadow-sm border-0">
        <!-- Header -->
        <div class="card-header border-0 pt-8 pb-0">
            <div class="card-title">
                <h3 class="fw-bold text-gray-900">About Us Page Settings</h3>
            </div>
        </div>

        <!-- Body -->
        <div class="card-body pt-6">
            <!-- Success Message -->
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show mb-7" role="alert">
                    <i class="bi bi-check-circle-fill me-2"></i>
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <!-- Error Messages -->
            @if($errors->any())
                <div class="alert alert-danger alert-dismissible fade show mb-7" role="alert">
                    <strong>Please fix the following errors:</strong>
                    <ul class="mt-3 mb-0">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <form action="{{ route('admin.about.update') }}" method="POST" enctype="multipart/form-data" id="aboutForm">
                @csrf
                @method('PUT')

                <!-- Hero Section -->
                <div class="mb-10 pb-8 border-bottom">
                    <h4 class="fw-bold mb-6 text-primary border-bottom pb-3">Hero Section</h4>
                    <div class="row g-6">
                        <div class="col-lg-6">
                            <div class="mb-6">
                                <label class="form-label fw-semibold">Heading Highlight <span class="text-danger">(Appears in Red)</span></label>
                                <input type="text" name="hero_heading_highlight" class="form-control form-control-solid"
                                       placeholder="e.g. Welcome to" 
                                       value="{{ old('hero_heading_highlight', $about->hero_heading_highlight) }}">
                                <small class="text-muted">Short highlight text shown in red color</small>
                            </div>

                            <div class="mb-6">
                                <label class="form-label fw-semibold">Heading Main</label>
                                <input type="text" name="hero_heading_main" class="form-control form-control-solid"
                                       placeholder="e.g. Our Company Story & Values"
                                       value="{{ old('hero_heading_main', $about->hero_heading_main) }}">
                                <small class="text-muted">Main headline of the hero section</small>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="mb-6">
                                <label class="form-label fw-semibold">Description</label>
                                <textarea name="hero_description" class="form-control ckeditor" rows="7"
                                          placeholder="Write a compelling introduction about your company, mission, and what makes you unique...">{{ old('hero_description', $about->hero_description) }}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="mt-6">
                        <label class="form-label fw-semibold">Banner Image</label>
                        @if($about->hero_banner_image)
                            <div class="mb-4">
                                <img src="{{ asset('storage/' . $about->hero_banner_image) }}" alt="Current Hero Banner" 
                                     class="img-thumbnail rounded border" style="max-height: 200px;">
                                <small class="text-muted d-block mt-2">Current banner image</small>
                            </div>
                        @endif
                        <input type="file" name="hero_banner_image" class="form-control" accept="image/*">
                        <small class="text-muted d-block mt-2">
                            Recommended size: 1920x800px • Formats: JPEG, PNG, WEBP • Max: 2MB • Use high-quality hero image
                        </small>
                    </div>
                </div>

                <!-- Summary Section -->
                <div class="mb-10 pb-8 border-bottom">
                    <h4 class="fw-bold mb-6 text-primary border-bottom pb-3">Summary Section</h4>
                    <div class="row g-6">
                        <div class="col-lg-6">
                            <div class="mb-6">
                                <label class="form-label fw-semibold">Heading Highlight <span class="text-danger">(Red)</span></label>
                                <input type="text" name="summary_heading_highlight" class="form-control form-control-solid"
                                       placeholder="e.g. Who We Are"
                                       value="{{ old('summary_heading_highlight', $about->summary_heading_highlight) }}">
                            </div>

                            <div class="mb-6">
                                <label class="form-label fw-semibold">Heading Main</label>
                                <input type="text" name="summary_heading_main" class="form-control form-control-solid"
                                       placeholder="e.g. Building Trust Through Excellence"
                                       value="{{ old('summary_heading_main', $about->summary_heading_main) }}">
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="mb-6">
                                <label class="form-label fw-semibold">Description</label>
                                <textarea name="summary_description" class="form-control ckeditor" rows="6"
                                          placeholder="Provide a brief overview of your company history, values, team, or unique strengths...">{{ old('summary_description', $about->summary_description) }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Workflow Section -->
                <div class="mb-10 pb-8 border-bottom">
                    <h4 class="fw-bold mb-6 text-primary border-bottom pb-3">Workflow Section</h4>
                    <div class="row g-6">
                        <div class="col-lg-6">
                            <div class="mb-6">
                                <label class="form-label fw-semibold">Heading Highlight <span class="text-danger">(Red)</span></label>
                                <input type="text" name="workflow_heading_highlight" class="form-control form-control-solid"
                                       placeholder="e.g. Our Process"
                                       value="{{ old('workflow_heading_highlight', $about->workflow_heading_highlight) }}">
                            </div>

                            <div class="mb-6">
                                <label class="form-label fw-semibold">Heading Main</label>
                                <input type="text" name="workflow_heading_main" class="form-control form-control-solid"
                                       placeholder="e.g. How We Deliver Exceptional Results"
                                       value="{{ old('workflow_heading_main', $about->workflow_heading_main) }}">
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="mb-6">
                                <label class="form-label fw-semibold">Description</label>
                                <textarea name="workflow_description" class="form-control ckeditor" rows="5"
                                          placeholder="Explain your step-by-step process, methodology, or how you work with clients...">{{ old('workflow_description', $about->workflow_description) }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Cost Section -->
                <div class="mb-10 pb-8 border-bottom">
                    <h4 class="fw-bold mb-6 text-primary border-bottom pb-3">Cost / Pricing Section</h4>
                    <div class="row g-6">
                        <div class="col-lg-4">
                            <div class="mb-6">
                                <label class="form-label fw-semibold">Heading Highlight <span class="text-danger">(Red)</span></label>
                                <input type="text" name="cost_heading_highlight" class="form-control form-control-solid"
                                       placeholder="e.g. Transparent Pricing"
                                       value="{{ old('cost_heading_highlight', $about->cost_heading_highlight) }}">
                            </div>

                            <div class="mb-6">
                                <label class="form-label fw-semibold">Heading Main</label>
                                <input type="text" name="cost_heading_main" class="form-control form-control-solid"
                                       placeholder="e.g. Fair & Competitive Rates"
                                       value="{{ old('cost_heading_main', $about->cost_heading_main) }}">
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="mb-6">
                                <label class="form-label fw-semibold">Subtitle</label>
                                <input type="text" name="cost_subtitle" class="form-control form-control-solid"
                                       placeholder="e.g. No hidden fees. Get a custom quote today."
                                       value="{{ old('cost_subtitle', $about->cost_subtitle) }}">
                            </div>

                            <div class="mb-6">
                                <label class="form-label fw-semibold">Quote Button Text</label>
                                <input type="text" name="cost_quote_button_text" class="form-control form-control-solid"
                                       placeholder="e.g. Get Your Free Quote"
                                       value="{{ old('cost_quote_button_text', $about->cost_quote_button_text) }}">
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <label class="form-label fw-semibold">Section Image</label>
                            @if($about->cost_image)
                                <div class="mb-4">
                                    <img src="{{ asset('storage/' . $about->cost_image) }}" alt="Current Cost Section Image"
                                         class="img-thumbnail rounded border" style="max-height: 200px;">
                                    <small class="text-muted d-block mt-2">Current image</small>
                                </div>
                            @endif
                            <input type="file" name="cost_image" class="form-control" accept="image/*">
                            <small class="text-muted d-block mt-2">Recommended: 800x600px or square • High-quality visual</small>
                        </div>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="text-end mt-10 pt-6 border-top">
                    <button type="submit" class="btn btn-success btn-lg px-10 py-3" id="saveBtn">
                        <span class="indicator-label">Save Changes</span>
                        <span class="indicator-progress d-none">
                            Saving... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                        </span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('script')
    <!-- CKEditor 5 Classic -->
    <script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Initialize all CKEditor instances
            document.querySelectorAll('.ckeditor').forEach((textarea) => {
                ClassicEditor
                    .create(textarea, {
                        toolbar: [
                            'heading', '|',
                            'bold', 'italic', 'underline', 'strikethrough', 'link', '|',
                            'bulletedList', 'numberedList', 'outdent', 'indent', '|',
                            'blockQuote', 'insertTable', 'mediaEmbed', '|',
                            'undo', 'redo'
                        ],
                        heading: {
                            options: [
                                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                                { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                                { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                                { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' }
                            ]
                        }
                    })
                    .catch(error => {
                        console.error('CKEditor initialization error:', error);
                    });
            });

            // Save button loading state
            const form = document.getElementById('aboutForm');
            const saveBtn = document.getElementById('saveBtn');

            form.addEventListener('submit', function () {
                saveBtn.disabled = true;
                saveBtn.querySelector('.indicator-label').classList.add('d-none');
                saveBtn.querySelector('.indicator-progress').classList.remove('d-none');
            });
        });
    </script>
@endsection