@extends('layouts.admin')

@section('title', 'Edit ' . $sectionTypes[$sectionType])

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3">Edit {{ $sectionTypes[$sectionType] }}</h1>
    <a href="{{ route('admin.about-us.index') }}" class="btn btn-modern-primary">
        <i class="bi bi-arrow-left me-2"></i>Back to About Us
    </a>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    @switch($sectionType)
                        @case('hero')
                            <i class="bi bi-star me-2"></i>
                            @break
                        @case('journey')
                            <i class="bi bi-compass me-2"></i>
                            @break
                        @case('what_we_do')
                            <i class="bi bi-gear me-2"></i>
                            @break
                        @case('ethos')
                            <i class="bi bi-heart me-2"></i>
                            @break
                    @endswitch
                    {{ $sectionTypes[$sectionType] }} Settings
                </h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.about-us.update', $sectionType) }}">
                    @csrf
                    @method('PUT')

                    <!-- Common Fields -->
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="is_active" class="form-label">Status</label>
                            <div class="form-check form-switch">
                                <input type="hidden" name="is_active" value="0">
                                <input type="checkbox" name="is_active" id="is_active"
                                       class="form-check-input" value="1"
                                       {{ old('is_active', $section->is_active) ? 'checked' : '' }}>
                                <label for="is_active" class="form-check-label">Active</label>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="sort_order" class="form-label">Sort Order</label>
                            <input type="number" name="sort_order" id="sort_order"
                                   class="form-control" value="{{ old('sort_order', $section->sort_order) }}"
                                   min="0">
                        </div>
                    </div>

                    <!-- Section-Specific Fields -->
                    @switch($sectionType)
                        @case('hero')
                            @include('admin.about-us.sections.hero')
                            @break
                        @case('journey')
                            @include('admin.about-us.sections.journey')
                            @break
                        @case('what_we_do')
                            @include('admin.about-us.sections.what_we_do')
                            @break
                        @case('ethos')
                            @include('admin.about-us.sections.ethos')
                            @break
                    @endswitch

                    <!-- Submit Buttons -->
                    <div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top">
                        <a href="{{ route('admin.about-us.index') }}" class="btn btn-secondary">
                            <i class="bi bi-x-circle me-2"></i>Cancel
                        </a>
                        <button type="submit" class="btn btn-modern-primary">
                            <i class="bi bi-check-circle me-2"></i>Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="{{ asset('vendor/laravel-filemanager/js/stand-alone-button.js') }}"></script>
<script>
// Initialize file managers for any file inputs
$(document).ready(function() {
    // Initialize any file manager buttons
    $('[data-bs-toggle="filemanager"]').each(function() {
        const $btn = $(this);
        const inputId = $btn.data('input');
        const previewId = $btn.data('preview');

        $btn.filemanager('file', {
            prefix: '/admin/filemanager'
        });

        // Update preview when file is selected
        if (previewId) {
            $(document).on('FileManager:Selected', function(e, data) {
                if (data.input === inputId) {
                    $('#' + previewId).attr('src', data.url);
                }
            });
        }
    });
});
</script>
@endpush