@extends('layouts.app')
@section('content')
    @include('layouts.sidebar')
    <style>
        .form-outline input::placeholder {
            font-size: 0.7em;
        }
    </style>
    <main id="" class="side_user">
        <div class="content">
            <div class="block block-rounded px-5">
                <div class="block-header">
                    &nbsp; <h2 class="block-title ">Edit Navigation Setting</h2>
                </div>
                <div class="block-content block-content-full">
                    <form action="{{ route('settings.update', $setting->id) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="form-outline mb-4 col-8">
                            <h6>Heading</h6>
                            <input type="text" name="heading" maxlength="255" minlength="3" required
                                value="{{ old('heading', $setting->heading) }}" class="form-control form-control-lg"
                                placeholder="Enter Heading" />
                        </div>
                        @error('heading')
                            <span class="text text-danger">{{ $message }}</span>
                        @enderror

                        <button type="button" id="add-fieldset" class="btn btn-success">Add Sub Heading</button>
                        <br>
                        <br>

                        <div id="sub-heading-fields">
                            @foreach (old('sub_heading', $setting->subHeadings) as $index => $sub_heading)
                                <div class="sub-heading-fieldset">
                                    <input type="hidden" name="sub_heading[{{ $index }}][id]"
                                        value="{{ $sub_heading->id }}">
                                    <div class="form-outline mb-4 col-8">
                                        <h6>Heading</h6>
                                        <input type="text" name="sub_heading[{{ $index }}][heading]" required
                                            value="{{ old("sub_heading.$index.heading", $sub_heading->heading) }}"
                                            class="form-control form-control-lg" placeholder="Field" />
                                    </div>
                                    <div class="form-outline mb-4 col-8">
                                        <h6>URL</h6>
                                        <input type="text" name="sub_heading[{{ $index }}][url]" required
                                            value="{{ old("sub_heading.$index.url", $sub_heading->url) }}"
                                            class="form-control form-control-lg" placeholder="URL" />
                                    </div>
                                    <button type="button" class="remove-fieldset btn btn-danger">Remove</button>
                                    <br>
                                    <br>
                                </div>
                            @endforeach
                        </div>

                        <div class="form-group pt-2">
                            <a href="{{ Route('settings.index') }}"><button type="button" class="backbtn">Back</button></a>
                            <button type="submit" id="submitted" class="addbtn">Update</button>

                        </div>


                    </form>
                </div>
            </div>
        </div>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const subHeadingFields = document.getElementById('sub-heading-fields');
            const addFieldsetButton = document.getElementById('add-fieldset');
            let fieldsetCount = {{ count(old('sub_heading', $setting->subHeadings)) }};

            addFieldsetButton.addEventListener('click', function() {
                addFieldset(fieldsetCount++);
            });

            subHeadingFields.addEventListener('click', function(event) {
                if (event.target.classList.contains('remove-fieldset')) {
                    event.target.closest('.sub-heading-fieldset').remove();
                }
            });

            function addFieldset(index) {
                const newFieldset = document.createElement('div');
                newFieldset.classList.add('sub-heading-fieldset');
                newFieldset.innerHTML = `
                <div class="form-outline mb-4 col-8">
                    <input type="text" name="sub_heading[${index}][heading]"  class="form-control form-control-lg" placeholder="Field" />
                </div>
                <div class="form-outline mb-4 col-8">
                    <input type="text" name="sub_heading[${index}][url]"  class="form-control form-control-lg" placeholder="URL" />
                </div>

                <br>
                <br>
            `;
                subHeadingFields.appendChild(newFieldset);
            }
        });
    </script>
@endsection