@extends('layouts.admin_main')

@section('content')
<div class="content-wrapper">
    <div class="card">
        <div class="card-header">
            <span>General Settings</span>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            @if (session('status'))
            <h5 class="alert alert-success" id="status">{{ session('status') }}</h5>
            @endif
            <div id="success_message"></div>

            <div class="col-7">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title" style="color: #2590e4;font-weight:600;font-size: 16px">Why Us Settings</h3>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('admin.update-why-us') }}" method="POST">
                            @csrf

                            <!-- Heading -->
                            <div class="form-group">
                                <label for="heading">Heading</label>
                                <input type="text" name="heading" id="heading" class="form-control" value="{{ $whyUs->heading ?? '' }}">
                            </div>

                            <!-- Description -->
                            <div class="form-group">
                                <label for="description">Description</label>
                                <textarea name="description" id="description" class="form-control">{{ $whyUs->description ?? '' }}</textarea>
                            </div>

                            <!-- Accordion Items -->
                            <div id="accordion-items">
                                @if(!is_null($whyUs) && !is_null($whyUs->accordion_items))
                                    @foreach($whyUs->accordion_items as $key => $item)
                                    <div class="accordion-item mb-3" data-index="{{ $key }}">
                                        <h5>Accordion Item {{ $key + 1 }}</h5>
                                        <label for="accordion_title_{{ $key }}">Accordion Title</label>
                                        <input type="text" name="accordion_items[{{ $key }}][title]" class="form-control" value="{{ $item['title'] }}">

                                        <label for="accordion_content_{{ $key }}">Accordion Content</label>
                                        <textarea name="accordion_items[{{ $key }}][content]" class="form-control">{{ $item['content'] }}</textarea>

                                        <button type="button" class="btn btn-danger remove-accordion-item">Remove</button>
                                    </div>
                                    @endforeach
                                @endif
                            </div>

                            <button type="button" class="btn btn-secondary" id="add-accordion-item">Add Accordion Item</button>
                            <button type="submit" class="btn btn-primary">Save Changes</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        let index = {{ isset($whyUs->accordion_items) ? count($whyUs->accordion_items) : 1 }};
        document.getElementById('add-accordion-item').addEventListener('click', function() {
            const newAccordionItem = document.createElement('div');
            newAccordionItem.className = 'accordion-item mb-3';
            newAccordionItem.setAttribute('data-index', index);

            newAccordionItem.innerHTML = `
                <h5>Accordion Item ${index + 1}</h5>
                <label for="accordion_title_${index}">Accordion Title</label>
                <input type="text" name="accordion_items[${index}][title]" class="form-control" required>

                <label for="accordion_content_${index}">Accordion Content</label>
                <textarea name="accordion_items[${index}][content]" class="form-control" required></textarea>

                <button type="button" class="btn btn-danger remove-accordion-item">Remove</button>
            `;
            document.getElementById('accordion-items').appendChild(newAccordionItem);
            index++;
        });

        document.getElementById('accordion-items').addEventListener('click', function(e) {
            if (e.target.classList.contains('remove-accordion-item')) {
                e.target.closest('.accordion-item').remove();
            }
        });
    });
</script>

@endsection