@extends('backend.layout.main')

@section('content')
    <x-admin.header pageTitle="Donate Page" currentPage="Donate Page"></x-admin.header>

    <div class="main-content-inner">
        <div class="row justify-content-center">
            <div class="col-xl-10 col-lg-10 col-md-12 col-sm-12 col-10 col-xs-12">
                <div class="row">
                    <div class="col-12 mt-5">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="header-title">Donate Page Content</h4>

                                <x-form :action="route('donate-page.store')" method="POST" :has-files="true">
                                    {{-- Section 2: Introduction --}}
                                    <div class="form-group">
                                        <x-input.label for="introduction">Introduction</x-input.label>
                                        <textarea name="introduction" id="introduction" class="form-control" rows="4" aria-label="Introduction">{{ old('introduction', $data->introduction) }}</textarea>
                                    </div>

                                    {{-- Section 3: Ways to Get Involved --}}
                                    <h5 class="mt-4 mb-2">Ways to Get Involved</h5>
                                    <p class="text-muted small">Recommended image size: 410×258 px. Leave image empty to keep current.</p>

                                    <div id="ways-container">
                                        @forelse ($data->ways as $index => $way)
                                            <div class="card mb-3 way-row">
                                                <div class="card-body">
                                                    <input type="hidden" name="ways[{{ $index }}][id]" value="{{ $way->id }}">
                                                    <div class="form-group">
                                                        <x-input.label>Title</x-input.label>
                                                        <input type="text" class="form-control" name="ways[{{ $index }}][title]" value="{{ old("ways.{$index}.title", $way->title) }}" placeholder="e.g. Volunteer">
                                                    </div>
                                                    <div class="form-group">
                                                        <x-input.label>Description</x-input.label>
                                                        <textarea class="form-control" name="ways[{{ $index }}][description]" rows="3" placeholder="Description">{{ old("ways.{$index}.description", $way->description) }}</textarea>
                                                    </div>
                                                    <div class="form-group">
                                                        <x-input.label>Image (410×258)</x-input.label>
                                                        <input type="file" class="form-control-file" name="ways[{{ $index }}][image]" accept="image/*">
                                                        @if($way->image)
                                                            <div class="mt-2">
                                                                <img src="{{ asset('storage/' . $way->image) }}" alt="" style="max-width: 200px; max-height: 120px; object-fit: cover;">
                                                                <p class="text-muted small mt-1">Current image</p>
                                                            </div>
                                                        @endif
                                                    </div>
                                                    <div class="d-flex justify-content-end mt-2 pt-2 border-top">
                                                        <button type="button" class="btn btn-sm btn-outline-danger way-remove" title="Remove this way" aria-label="Remove this way">
                                                            <i class="fa fa-times"></i> Remove
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        @empty
                                            <div class="card mb-3 way-row">
                                                <div class="card-body">
                                                    <input type="hidden" name="ways[0][id]" value="">
                                                    <div class="form-group">
                                                        <label class="col-form-label">Title</label>
                                                        <input type="text" class="form-control" name="ways[0][title]" placeholder="e.g. Volunteer">
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-form-label">Description</label>
                                                        <textarea class="form-control" name="ways[0][description]" rows="3" placeholder="Description"></textarea>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-form-label">Image (410×258)</label>
                                                        <input type="file" class="form-control-file" name="ways[0][image]" accept="image/*">
                                                    </div>
                                                    <div class="d-flex justify-content-end mt-2 pt-2 border-top">
                                                        <button type="button" class="btn btn-sm btn-outline-danger way-remove" title="Remove this way" aria-label="Remove this way">
                                                            <i class="fa fa-times"></i> Remove
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforelse
                                    </div>
                                    <button type="button" class="btn btn-outline-secondary btn-sm mb-4" id="add-way">+ Add another way</button>

                                    {{-- Section 4: Call to Action --}}
                                    <h5 class="mt-4 mb-2">Call to Action</h5>
                                    <div class="form-group">
                                        <x-input.label for="cta_title">Title</x-input.label>
                                        <textarea name="cta_title" id="cta_title" class="form-control" rows="2" aria-label="CTA title">{{ old('cta_title', $data->cta_title) }}</textarea>
                                    </div>
                                    <div class="form-group">
                                        <x-input.label for="cta_background_image">Background image (1920×520)</x-input.label>
                                        <input type="file" class="form-control-file" id="cta_background_image" name="cta_background_image" accept="image/*">
                                        @if($data->cta_background_image)
                                            <div class="mt-2">
                                                <img src="{{ asset('storage/' . $data->cta_background_image) }}" alt="" style="max-width: 100%; max-height: 200px; object-fit: cover;">
                                                <p class="text-muted small mt-1">Current image</p>
                                            </div>
                                        @endif
                                    </div>

                                    <div class="d-flex justify-content-end mr-0 mt-4">
                                        <x-admin.submit type="submit" color="primary">Save</x-admin.submit>
                                    </div>
                                </x-form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <template id="way-row-template">
        <div class="card mb-3 way-row">
            <div class="card-body">
                <div class="form-group">
                    <x-input.label>Title</x-input.label>
                    <input type="text" class="form-control" name="ways[__INDEX__][title]" placeholder="e.g. Volunteer">
                </div>
                <div class="form-group">
                    <x-input.label>Description</x-input.label>
                    <textarea class="form-control" name="ways[__INDEX__][description]" rows="3" placeholder="Description"></textarea>
                </div>
                <div class="form-group">
                    <x-input.label>Image (410×258)</x-input.label>
                    <input type="file" class="form-control-file" name="ways[__INDEX__][image]" accept="image/*">
                </div>
                <div class="d-flex justify-content-end mt-2 pt-2 border-top">
                    <button type="button" class="btn btn-sm btn-outline-danger way-remove" title="Remove this way" aria-label="Remove this way">
                        <i class="fa fa-times"></i> Remove
                    </button>
                </div>
            </div>
        </div>
    </template>

    @push('scripts')
    <script>
        (function () {
            var container = document.getElementById('ways-container');
            var addBtn = document.getElementById('add-way');

            addBtn.addEventListener('click', function () {
                var template = document.getElementById('way-row-template');
                var index = container.querySelectorAll('.way-row').length;
                var html = template.innerHTML.replace(/__INDEX__/g, index);
                container.insertAdjacentHTML('beforeend', html);
            });

            container.addEventListener('click', function (e) {
                var removeBtn = e.target.closest('.way-remove');
                if (!removeBtn) return;
                var row = removeBtn.closest('.way-row');
                if (row) row.remove();
            });
        })();
    </script>
    @endpush
@endsection