@extends('layouts.dashboard')
@section('title', __('Edit section'))
@section('page_title', __($definition['name']))

@section('content')
    <form action="{{ route('admin.homepage.update', $section) }}" method="POST" enctype="multipart/form-data">
        @csrf @method('PUT')
        <div class="lf-toolbar">
            <div class="d-flex align-items-center gap-3">
                <a href="{{ route('admin.homepage.index') }}" class="btn btn-light btn-sm"><i class="bi bi-arrow-left"></i></a>
                <div>
                    <h5 class="mb-0 fw-bold"><i class="bi {{ $definition['icon'] }} text-primary me-2"></i>{{ __($definition['name']) }}</h5>
                    <div class="small text-muted">{{ __($definition['description']) }}</div>
                </div>
            </div>
            <div class="d-flex gap-2">
                <span class="badge {{ $section->status ? 'bg-success' : 'bg-secondary' }} align-self-center">{{ $section->status ? __('Visible') : __('Hidden') }}</span>
                <button type="submit" form="lfResetForm" class="btn btn-outline-secondary" data-confirm="{{ __('Restore this section to its default text and settings?') }}"><i class="bi bi-arrow-counterclockwise me-1"></i>{{ __('Reset') }}</button>
                <button class="btn btn-primary"><i class="bi bi-check2 me-1"></i>{{ __('Save changes') }}</button>
            </div>
        </div>

        <div class="row g-3">
            <div class="col-lg-8">
                <div class="card mb-3">
                    <div class="card-header"><i class="bi bi-type text-primary me-2"></i>{{ __('Text') }}</div>
                    <div class="card-body">
                        <div class="row g-3">
                            @if($section->section_type !== 'banner')
                                <div class="col-md-8">
                                    <label class="form-label">{{ __('Title') }}</label>
                                    <input type="text" name="title" class="form-control" value="{{ old('title', $section->title) }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">{{ __('Eyebrow / subtitle') }}</label>
                                    <input type="text" name="subtitle" class="form-control" value="{{ old('subtitle', $section->subtitle) }}">
                                </div>
                            @endif
                            @if(!empty($definition['has_content']))
                                <div class="col-12">
                                    <label class="form-label">{{ __('Content (HTML allowed)') }}</label>
                                    <textarea name="content" rows="10" class="form-control font-monospace small">{{ old('content', $section->content) }}</textarea>
                                </div>
                            @endif
                            @if(!empty($definition['has_button']))
                                <div class="col-md-5">
                                    <label class="form-label">{{ __('Button text') }}</label>
                                    <input type="text" name="button_text" class="form-control" value="{{ old('button_text', $section->button_text) }}">
                                </div>
                                <div class="col-md-7">
                                    <label class="form-label">{{ __('Button link') }}</label>
                                    <input type="text" name="button_url" class="form-control" value="{{ old('button_url', $section->button_url) }}" placeholder="/courses">
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                @php($contentFields = collect($definition['fields'] ?? [])->filter(fn ($f) => ($f['group'] ?? null) !== 'Appearance'))
                @php($appearanceFields = collect($definition['fields'] ?? [])->filter(fn ($f) => ($f['group'] ?? null) === 'Appearance'))

                @if($contentFields->isNotEmpty())
                    <div class="card mb-3">
                        <div class="card-header"><i class="bi bi-sliders text-primary me-2"></i>{{ __('Options') }}</div>
                        <div class="card-body">
                            <div class="row g-3">
                                @foreach($contentFields as $f)
                                    @include('admin.homepage._field', ['f' => $f, 'settings' => $settings])
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                @if($appearanceFields->isNotEmpty())
                    <div class="card">
                        <div class="card-header"><i class="bi bi-palette text-primary me-2"></i>{{ __('Appearance') }}</div>
                        <div class="card-body">
                            <div class="row g-3">
                                @foreach($appearanceFields as $f)
                                    @include('admin.homepage._field', ['f' => $f, 'settings' => $settings])
                                @endforeach
                            </div>
                            <div class="form-text mt-2">{{ __('Backgrounds alternate down the page by default. Give two neighbouring sections the same background only when you want them to read as one block.') }}</div>
                        </div>
                    </div>
                @endif
            </div>

            <div class="col-lg-4">
                @if(!empty($definition['has_image']))
                    <div class="card mb-3">
                        <div class="card-header"><i class="bi bi-image text-primary me-2"></i>{{ __('Image') }}</div>
                        <div class="card-body">
                            @if($section->image)
                                <img src="{{ media_url($section->image) }}" class="img-fluid rounded-3 mb-2" alt="">
                                <div class="form-check mb-2"><input type="checkbox" class="form-check-input" name="remove_image" value="1" id="rmimg"><label class="form-check-label small" for="rmimg">{{ __('Remove current image') }}</label></div>
                            @endif
                            <input type="file" name="image" class="form-control" accept="image/*">
                            <div class="form-text">{{ __('Optional. Falls back to a featured course thumbnail when empty.') }}</div>
                        </div>
                    </div>
                @endif
                <div class="card">
                    <div class="card-header"><i class="bi bi-info-circle text-primary me-2"></i>{{ __('About this section') }}</div>
                    <div class="card-body small text-muted">
                        <p class="mb-2">{{ __($definition['description']) }}</p>
                        <p class="mb-2">{{ __('Type') }}: <code>{{ $section->section_type }}</code></p>
                        @if(!empty($definition['requires_module']))<p class="mb-2"><i class="bi bi-puzzle me-1"></i>{{ __('Requires module') }}: <strong>{{ $definition['requires_module'] }}</strong> ({{ module_enabled($definition['requires_module']) ? __('enabled') : __('disabled') }})</p>@endif
                        <p class="mb-0">{{ __('Visibility and order are managed from the builder list.') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <form id="lfResetForm" action="{{ route('admin.homepage.reset', $section) }}" method="POST" class="d-none">@csrf</form>
@endsection

@push('scripts')
<script>
(function () {
    document.querySelectorAll('.lf-rep-add').forEach(function (b) {
        b.addEventListener('click', function () {
            var rep = document.getElementById(b.dataset.target), fields = JSON.parse(rep.dataset.fields), key = rep.dataset.key, i = Date.now();
            var row = document.createElement('div'); row.className = 'lf-rep-row border rounded-3 p-2 d-flex gap-2 align-items-start flex-wrap';
            fields.forEach(function (f) {
                var w = document.createElement('div'); w.className = 'flex-grow-1'; w.style.minWidth = '160px';
                var input = f.type === 'image' ? '<input type="file" name="settings[' + key + '][' + i + '][' + f.key + ']" class="form-control form-control-sm" accept="image/*">' : '<input type="text" name="settings[' + key + '][' + i + '][' + f.key + ']" class="form-control form-control-sm">';
                w.innerHTML = '<label class="form-label small mb-1">' + f.label + '</label>' + input; row.appendChild(w);
            });
            var del = document.createElement('button'); del.type = 'button'; del.className = 'btn btn-sm btn-light text-danger lf-rep-del mt-4'; del.innerHTML = '<i class="bi bi-trash"></i>'; row.appendChild(del);
            rep.appendChild(row);
        });
    });
    document.addEventListener('click', function (e) { var d = e.target.closest('.lf-rep-del'); if (d) d.closest('.lf-rep-row').remove(); });
})();
</script>
@endpush