@extends('layouts.app')
@section('content')
    @include('layouts.sidebar')
    <style>
        .form-outline input::placeholder {
            font-size: 0.7em;
            /* Adjust the font size as needed */
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked+.slider {
            background-color: #2196F3;
        }

        input:focus+.slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input:checked+.slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }
    </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 ">Add Navigation Setting</h2>
                </div>
                <div class="block-content block-content-full">
                    <form action="{{ route('settings.store') }}" method="POST">
                        @csrf
                        @method('POST')

                        <!-- heading -->
                        <div class="form-outline mb-4 col-8">
                            <h6>Heading</h6>
                            <input type="text" name="heading" maxlength="255" minlength="3" required
                                value="{{ old('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">
                            {{-- <div class="sub-heading-fieldset">
                                <div class="form-outline mb-4 col-8">
                                    <input type="text" name="sub_heading[0][heading]" required
                                        value="{{ old('sub_heading.0.heading') }}" class="form-control form-control-lg"
                                        placeholder="Field" />
                                </div>
                                <div class="form-outline mb-4 col-8">
                                    <input type="text" name="sub_heading[0][url]" required
                                        value="{{ old('sub_heading.0.url') }}" class="form-control form-control-lg"
                                        placeholder="URL" />
                                </div>
                                <button type="button" class="remove-fieldset btn btn-danger">Remove</button>
                            </div> --}}
                        </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">Store</button>

                        </div>

                        {{-- <div class="form-group pt-2">
                            <a href="{{ route('settings.index') }}"><button type="button"
                                    class="btn btn-secondary">Back</button></a>
                            <button type="submit" class="btn btn-primary">Submit</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 = 1;

            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">
                    <h6>Heading</h6>
                    <input type="text" name="sub_heading[${index}][heading]" required 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 class="form-control form-control-lg" placeholder="URL" />
                </div>
                <button type="button" class="remove-fieldset btn btn-danger">Remove</button>
                <br>
                <br>
            `;
                subHeadingFields.appendChild(newFieldset);
            }
        });
    </script>
@endsection