@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.homepage.index') }}" class="btn btn-modern-primary">
        <i class="bi bi-arrow-left me-2"></i>Back to Homepage
    </a>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    @switch($sectionType)
                        @case('welcome')
                            <i class="bi bi-house-door me-2"></i>
                            @break
                        @case('toppers')
                            <i class="bi bi-trophy me-2"></i>
                            @break
                        @case('reasons')
                            <i class="bi bi-check-circle me-2"></i>
                            @break
                        @case('collaborators')
                            <i class="bi bi-handshake me-2"></i>
                            @break
                    @endswitch
                    {{ $sectionTypes[$sectionType] }} Settings
                </h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.homepage.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('welcome')
                            @include('admin.homepage.sections.welcome')
                            @break
                        @case('reasons')
                            @include('admin.homepage.sections.reasons')
                            @break
                        @case('collaborators')
                            @include('admin.homepage.sections.collaborators')
                            @break
                        @case('toppers')
                            @include('admin.homepage.sections.toppers')
                            @break
                    @endswitch

                    <!-- Submit Buttons -->
                    <div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top">
                        <a href="{{ route('admin.homepage.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>

@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('image', {prefix: '/admin/filemanager'})
                .on('filemanager.selected', function(e, data) {
                    $('#' + inputId).val(data.url);
                    if (previewId) {
                        $('#' + previewId).html('<img src="' + data.url + '" class="img-fluid rounded" style="max-height: 200px;">');
                    }
                });
        });
    });
</script>
@endpush
@endsection