@extends('admin.layouts.app')

@section('title', 'Edit About Section - ' . ucfirst(str_replace('_', ' ', $section->section_key)))

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div>
                        <h1 class="h3">Edit About Section</h1>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                                <li class="breadcrumb-item"><a href="{{ route('admin.about.index') }}">About Management</a>
                                </li>
                                <li class="breadcrumb-item active">
                                    {{ ucfirst(str_replace('_', ' ', $section->section_key)) }}</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="btn-group">
                        <a href="{{ route('admin.about.preview') }}" class="btn btn-outline-primary" target="_blank">
                            <i class="bi bi-eye"></i> Preview Page
                        </a>
                        <a href="{{ route('admin.about.index') }}" class="btn btn-secondary">
                            <i class="bi bi-arrow-left"></i> Back to About Management
                        </a>
                    </div>
                </div>
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

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

        <form action="{{ route('admin.about.update-section', $section->section_key) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="row">
                <!-- Main Content -->
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="bi bi-pencil me-2"></i>Edit
                                {{ ucfirst(str_replace('_', ' ', $section->section_key)) }} Section
                            </h5>
                        </div>
                        <div class="card-body">
                            <!-- Title -->
                            <div class="mb-3">
                                <label for="title" class="form-label">Section Title <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('title') is-invalid @enderror"
                                    id="title" name="title" value="{{ old('title', $section->title) }}" required>
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Content -->
                            <div class="mb-3">
                                <label for="content" class="form-label">Content</label>
                                <textarea class="form-control @error('content') is-invalid @enderror" id="content" name="content" rows="6">{{ old('content', $section->content) }}</textarea>
                                @error('content')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">You can use HTML tags for formatting.</div>
                            </div>

                            <!-- Dynamic Data Fields -->
                            <div class="mb-3">
                                <label class="form-label">Additional Data</label>
                                <div class="border rounded p-3 bg-light">
                                    @if ($section->section_key === 'about_hero')
                                        <!-- Hero Section Fields -->
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label for="data_subtitle" class="form-label">Subtitle</label>
                                                <input type="text" class="form-control" id="data_subtitle"
                                                    name="data[subtitle]"
                                                    value="{{ old('data.subtitle', $section->data['subtitle'] ?? '') }}">
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label for="data_button_text" class="form-label">Button Text</label>
                                                <input type="text" class="form-control" id="data_button_text"
                                                    name="data[button_text]"
                                                    value="{{ old('data.button_text', $section->data['button_text'] ?? '') }}">
                                            </div>
                                            <div class="col-12 mb-3">
                                                <label for="data_button_link" class="form-label">Button Link</label>
                                                <input type="url" class="form-control" id="data_button_link"
                                                    name="data[button_link]"
                                                    value="{{ old('data.button_link', $section->data['button_link'] ?? '') }}">
                                            </div>
                                        </div>
                                    @elseif($section->section_key === 'about_story')
                                        <!-- Story Section Fields -->
                                        <div class="mb-3">
                                            <label class="form-label">Statistics</label>
                                            <div id="statistics-container">
                                                @php $stats = $section->data['stats'] ?? [] @endphp
                                                @foreach ($stats as $index => $stat)
                                                    <div class="row mb-2 statistic-row">
                                                        <div class="col-md-4">
                                                            <input type="text" class="form-control"
                                                                name="data[stats][{{ $index }}][number]"
                                                                placeholder="Number" value="{{ $stat['number'] ?? '' }}">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <input type="text" class="form-control"
                                                                name="data[stats][{{ $index }}][label]"
                                                                placeholder="Label" value="{{ $stat['label'] ?? '' }}">
                                                        </div>
                                                        <div class="col-md-2">
                                                            <button type="button"
                                                                class="btn btn-outline-danger btn-sm remove-stat">
                                                                <i class="bi bi-trash"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                            <button type="button" class="btn btn-outline-primary btn-sm"
                                                id="add-statistic">
                                                <i class="bi bi-plus"></i> Add Statistic
                                            </button>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-8 mb-3">
                                                <label for="data_quote_text" class="form-label">Quote Text</label>
                                                <textarea class="form-control" id="data_quote_text" name="data[quote_text]" rows="3">{{ old('data.quote_text', $section->data['quote_text'] ?? '') }}</textarea>
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <label for="data_quote_author" class="form-label">Quote Author</label>
                                                <input type="text" class="form-control" id="data_quote_author"
                                                    name="data[quote_author]"
                                                    value="{{ old('data.quote_author', $section->data['quote_author'] ?? '') }}">
                                            </div>
                                        </div>
                                    @elseif($section->section_key === 'about_cta')
                                        <!-- CTA Section Fields -->
                                        <div class="mb-3">
                                            <label class="form-label">Call-to-Action Buttons</label>
                                            <div id="buttons-container">
                                                @php $buttons = $section->data['buttons'] ?? [] @endphp
                                                @foreach ($buttons as $index => $button)
                                                    <div class="row mb-2 button-row">
                                                        <div class="col-md-4">
                                                            <input type="text" class="form-control"
                                                                name="data[buttons][{{ $index }}][text]"
                                                                placeholder="Button Text"
                                                                value="{{ $button['text'] ?? '' }}">
                                                        </div>
                                                        <div class="col-md-4">
                                                            <input type="url" class="form-control"
                                                                name="data[buttons][{{ $index }}][link]"
                                                                placeholder="Button Link"
                                                                value="{{ $button['link'] ?? '' }}">
                                                        </div>
                                                        <div class="col-md-2">
                                                            <select class="form-select"
                                                                name="data[buttons][{{ $index }}][style]">
                                                                <option value="primary"
                                                                    {{ ($button['style'] ?? '') === 'primary' ? 'selected' : '' }}>
                                                                    Primary</option>
                                                                <option value="secondary"
                                                                    {{ ($button['style'] ?? '') === 'secondary' ? 'selected' : '' }}>
                                                                    Secondary</option>
                                                                <option value="outline"
                                                                    {{ ($button['style'] ?? '') === 'outline' ? 'selected' : '' }}>
                                                                    Outline</option>
                                                            </select>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <button type="button"
                                                                class="btn btn-outline-danger btn-sm remove-button">
                                                                <i class="bi bi-trash"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                            <button type="button" class="btn btn-outline-primary btn-sm"
                                                id="add-button">
                                                <i class="bi bi-plus"></i> Add Button
                                            </button>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4">
                    <!-- Section Settings -->
                    <div class="card mb-3">
                        <div class="card-header">
                            <h6 class="mb-0">Section Settings</h6>
                        </div>
                        <div class="card-body">
                            <!-- Status -->
                            <div class="mb-3">
                                <label class="form-label">Status</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="is_active" name="is_active"
                                        value="1" {{ old('is_active', $section->is_active) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_active">
                                        Active (visible on website)
                                    </label>
                                </div>
                            </div>

                            <!-- Sort Order -->
                            <div class="mb-3">
                                <label for="sort_order" class="form-label">Sort Order</label>
                                <input type="number" class="form-control" id="sort_order" name="sort_order"
                                    value="{{ old('sort_order', $section->sort_order) }}" min="0">
                                <div class="form-text">Lower numbers appear first</div>
                            </div>

                            <!-- Section Key (Read-only) -->
                            <div class="mb-3">
                                <label class="form-label">Section Key</label>
                                <input type="text" class="form-control" value="{{ $section->section_key }}" readonly>
                                <div class="form-text">This identifies the section in the template</div>
                            </div>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="card">
                        <div class="card-header">
                            <h6 class="mb-0">Actions</h6>
                        </div>
                        <div class="card-body">
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-check-lg me-2"></i>Update Section
                                </button>
                                <a href="{{ route('admin.about.preview') }}" class="btn btn-outline-primary"
                                    target="_blank">
                                    <i class="bi bi-eye me-2"></i>Preview Changes
                                </a>
                                <a href="{{ route('admin.about.index') }}" class="btn btn-outline-secondary">
                                    <i class="bi bi-arrow-left me-2"></i>Cancel
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    @push('scripts')
        <script>
            // Add statistic functionality
            document.getElementById('add-statistic')?.addEventListener('click', function() {
                const container = document.getElementById('statistics-container');
                const index = container.children.length;
                const html = `
        <div class="row mb-2 statistic-row">
            <div class="col-md-4">
                <input type="text" class="form-control"
                       name="data[stats][${index}][number]"
                       placeholder="Number">
            </div>
            <div class="col-md-6">
                <input type="text" class="form-control"
                       name="data[stats][${index}][label]"
                       placeholder="Label">
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-outline-danger btn-sm remove-stat">
                    <i class="bi bi-trash"></i>
                </button>
            </div>
        </div>
    `;
                container.insertAdjacentHTML('beforeend', html);
            });

            // Remove statistic functionality
            document.addEventListener('click', function(e) {
                if (e.target.closest('.remove-stat')) {
                    e.target.closest('.statistic-row').remove();
                }
            });

            // Add button functionality
            document.getElementById('add-button')?.addEventListener('click', function() {
                const container = document.getElementById('buttons-container');
                const index = container.children.length;
                const html = `
        <div class="row mb-2 button-row">
            <div class="col-md-4">
                <input type="text" class="form-control"
                       name="data[buttons][${index}][text]"
                       placeholder="Button Text">
            </div>
            <div class="col-md-4">
                <input type="url" class="form-control"
                       name="data[buttons][${index}][link]"
                       placeholder="Button Link">
            </div>
            <div class="col-md-2">
                <select class="form-select" name="data[buttons][${index}][style]">
                    <option value="primary">Primary</option>
                    <option value="secondary">Secondary</option>
                    <option value="outline">Outline</option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-outline-danger btn-sm remove-button">
                    <i class="bi bi-trash"></i>
                </button>
            </div>
        </div>
    `;
                container.insertAdjacentHTML('beforeend', html);
            });

            // Remove button functionality
            document.addEventListener('click', function(e) {
                if (e.target.closest('.remove-button')) {
                    e.target.closest('.button-row').remove();
                }
            });
        </script>
    @endpush
@endsection