@extends('components.dashboard.layouts.master')

@section('styles')
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <style>
        .setting-nav-active {
            background: #F57141;
            color: white;
        }
        /* Container for each input set */
        .repeater-item {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;  /* Adds space between each input set */
            padding: 10px;
            border: 1px solid #ddd; /* Border for visual separation */
            border-radius: 5px;     /* Slightly rounded corners */
            background-color: #f9f9f9; /* Light background color */
        }

        /* Style for icon input (file input) */
        .icon-input {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            cursor: pointer;
            background-color: #fff;
            transition: background-color 0.3s ease;
        }

        /* When hovering over the file input, change background color */
        .icon-input:hover {
            background-color: #f0f0f0;
        }

        /* Style for text input */
        .text-input {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            width: 200px;
            box-sizing: border-box; /* Ensures padding doesn't affect width */
            transition: border-color 0.3s ease;
        }

        /* When the text input is focused, change border color */
        .text-input:focus {
            border-color: #F57141;
            outline: none;
        }

        /* Style for the remove button */
        .remove-btn {
            background-color: #f44336; /* Red background for remove button */
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s ease;
        }

        /* Change the remove button color on hover */
        .remove-btn:hover {
            background-color: #d32f2f;
        }

        /* Style for the Add More button */
        #add-more-btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            border: none;
            margin-top: 20px;
            transition: background-color 0.3s ease;
        }

        /* Change color when hovering over the Add More button */
        #add-more-btn:hover {
            background-color: #45a049;
        }

        /* Disable the Add More button when max items are reached */
        #add-more-btn:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

    </style>

@endsection

@section('title')
    {{ __("dashboard.settings") }}
@endsection

<!-- BEGIN: Content-->
@section('content')
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        @if(session()->has('error'))
            <div class="alert alert-success alert-dismissible mb-2" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <i data-feather="x"></i>{{ session()->get('error') }}
                </button>
            </div>
        @endif
        <div class="content-wrapper">
            <x-dashboard.layouts.breadcrumb now="{{ __('Settings') }}">
            </x-dashboard.layouts.breadcrumb>
            <div class="content-header row"></div>
            <div class="content-body">
                <div class="row">
                    {{-- Side navigation --}}
                    <div class="col-3 bg-white text-center p-2 m-1" style="height: fit-content">
                        <div class="text-center">
                            <ul>
                                <p class="p-1 m-1 {{ $page == 'terms-and-conditions' ? 'setting-nav-active' : '' }}">
                                    <a href="{{ route('admin.settings.index', ['page' => 'terms-and-conditions']) }}"
                                       class="{{ $page == 'terms-and-conditions' ? 'setting-nav-active' : '' }}">
                                        {{ __('dashboard.terms_and_conditions') }}
                                    </a>
                                </p>
                            </ul>
                        </div>
                        <ul>
                            <p class="p-1 m-1 {{ $page == 'privacy-policy' ? 'setting-nav-active' : '' }}">
                                <a href="{{ route('admin.settings.index', ['page' => 'privacy-policy']) }}"
                                   class="{{ $page == 'privacy-policy' ? 'setting-nav-active' : '' }}">
                                    {{ __('dashboard.privacy_policy') }}
                                </a>
                            </p>
                        </ul>
                        <ul>
                            <p class="p-1 m-1 {{ $page == 'about-us' ? 'setting-nav-active' : '' }}">
                                <a href="{{ route('admin.settings.index', ['page' => 'about-us']) }}"
                                   class="{{ $page == 'about-us' ? 'setting-nav-active' : '' }}">
                                    {{ __('dashboard.about_us') }}
                                </a>
                            </p>
                        </ul>
                        <ul>
                            <p class="p-1 m-1 {{ $page == 'app-contacts' ? 'setting-nav-active' : '' }}">
                                <a href="{{ route('admin.settings.index', ['page' => 'app-contacts']) }}"
                                   class="{{ $page == 'app-contacts' ? 'setting-nav-active' : '' }}">
                                    {{ __('dashboard.app_contacts') }}
                                </a>
                            </p>
                        </ul>
                        <ul>
                            <p class="p-1 m-1 {{ $page == 'jobs' ? 'setting-nav-active' : '' }}">
                                <a href="{{ route('admin.settings.index', ['page' => 'jobs']) }}"
                                   class="{{ $page == 'jobs' ? 'setting-nav-active' : '' }}">
                                    {{ __('dashboard.jobs') }}
                                </a>
                            </p>
                        </ul>
                    </div>
                    {{-- Setting content --}}
                    <div class="col-8 bg-white p-5 m-1">
                        @if ($page === 'terms-and-conditions')
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">{{ __('dashboard.terms_and_conditions') }}</h4>
                                </div>
                                <div class="card-content">
                                    <div class="card-body">
                                        <form method="POST" action="{{ route('admin.settings.store') }}" enctype="multipart/form-data">
                                            @csrf

                                            <input type="hidden" name="key" value="{{$page}}">

                                            {{-- English Content --}}
                                            <div class="mb-3">
                                                <label for="english_content">{{ __('dashboard.english_content') }}</label>
                                                <textarea name="value[en]" id="english_content" class="form-control" rows="10">{{ $setting['value']['en'] ?? old('value.en', '') }}</textarea>
                                                @error('value.en') <span class="text-danger">{{ $message }}</span> @enderror
                                            </div>

                                            {{-- Arabic Content --}}
                                            <div class="mb-3">
                                                <label for="arabic_content">{{ __('dashboard.arabic_content') }}</label>
                                                <textarea name="value[ar]" id="arabic_content" class="form-control" rows="10" dir="rtl">{{ $setting['value']['ar'] ?? old('value.ar', '') }}</textarea>
                                                @error('value.ar') <span class="text-danger">{{ $message }}</span> @enderror
                                            </div>

                                            <div class="d-flex justify-content-center mb-3">
                                                <button type="submit" class="btn btn-primary">{{ __('dashboard.save') }}</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        @elseif($page === 'privacy-policy')
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">{{ __('dashboard.privacy_policy') }}</h4>
                                </div>
                                <div class="card-content">
                                    <div class="card-body">
                                        <form method="POST" action="{{ route('admin.settings.store') }}" enctype="multipart/form-data">
                                        @csrf
                                            @if($setting)  @endif
                                            <input type="hidden" name="key" value="{{$page}}">

                                            {{-- English Content --}}
                                            <div class="mb-3">
                                                <label for="english_content">{{ __('dashboard.english_content') }}</label>
                                                <textarea name="value[en]" id="english_content" class="form-control" rows="10">{{ $setting['value']['en'] ?? old('value.en') }}</textarea>
                                                @error('value.en') <span class="text-danger">{{ $message }}</span> @enderror
                                            </div>

                                            {{-- Arabic Content --}}
                                            <div class="mb-3">
                                                <label for="arabic_content">{{ __('dashboard.arabic_content') }}</label>
                                                <textarea name="value[ar]" id="arabic_content" class="form-control" rows="10" dir="rtl">{{ $setting['value']['ar'] ?? old('value.ar') }}</textarea>
                                                @error('value.ar') <span class="text-danger">{{ $message }}</span> @enderror
                                            </div>

                                            <div class="d-flex justify-content-center mb-3">
                                                <button type="submit" class="btn btn-primary">{{ __('dashboard.save') }}</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                        @elseif($page === 'about-us')
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">{{ __('dashboard.about_us') }}</h4>
                                </div>
                                <div class="card-content">
                                    <div class="card-body">
                                        <form method="POST" action="{{ route('admin.settings.store') }}" enctype="multipart/form-data">
                                        @csrf
                                            @if($setting)  @endif
                                            <input type="hidden" name="key" value="{{$page}}">

                                            {{-- English Content --}}
                                            <div class="mb-3">
                                                <label for="english_content">{{ __('dashboard.english_content') }}</label>
                                                <textarea name="value[en]" id="english_content" class="form-control" rows="10">{{ $setting['value']['en'] ?? old('value.en') }}</textarea>
                                                @error('value.en') <span class="text-danger">{{ $message }}</span> @enderror
                                            </div>

                                            {{-- Arabic Content --}}
                                            <div class="mb-3">
                                                <label for="arabic_content">{{ __('dashboard.arabic_content') }}</label>
                                                <textarea name="value[ar]" id="arabic_content" class="form-control" rows="10" dir="rtl">{{ $setting['value']['ar'] ?? old('value.ar') }}</textarea>
                                                @error('value.ar') <span class="text-danger">{{ $message }}</span> @enderror
                                            </div>

                                            <div class="d-flex justify-content-center mb-3">
                                                <button type="submit" class="btn btn-primary">{{ __('dashboard.save') }}</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                        @elseif($page === 'jobs')
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">{{ __('dashboard.jobs') }}</h4>
                                </div>
                                <div class="card-content">
                                    <div class="card-body">
                                        <form method="POST" action="{{ route('admin.settings.store') }}" enctype="multipart/form-data">
                                        @csrf
                                            @if($setting)  @endif
                                            <input type="hidden" name="key" value="{{$page}}">

                                            {{-- English Content --}}
                                            <div class="mb-3">
                                                <label for="english_content">{{ __('dashboard.english_content') }}</label>
                                                <textarea name="value[en]" id="english_content" class="form-control" rows="10">{{ $setting['value']['en'] ?? old('value.en') }}</textarea>
                                                @error('value.en') <span class="text-danger">{{ $message }}</span> @enderror
                                            </div>

                                            {{-- Arabic Content --}}
                                            <div class="mb-3">
                                                <label for="arabic_content">{{ __('dashboard.arabic_content') }}</label>
                                                <textarea name="value[ar]" id="arabic_content" class="form-control" rows="10" dir="rtl">{{ $setting['value']['ar'] ?? old('value.ar') }}</textarea>
                                                @error('value.ar') <span class="text-danger">{{ $message }}</span> @enderror
                                            </div>

                                            <div class="d-flex justify-content-center mb-3">
                                                <button type="submit" class="btn btn-primary">{{ __('dashboard.save') }}</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                        @elseif($page === 'app-contacts')
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">{{ __('dashboard.app_contacts') }}</h4>
                                </div>
                                <div class="card-content">
                                    <div class="card-body">
                                        {{-- Form for App Contacts --}}
                                        <form method="POST" action="{{ route('admin.settings.store') }}" enctype="multipart/form-data">
                                            @csrf

                                            <!-- Hidden key input -->
                                            <input type="hidden" name="key" value="app-contacts">

                                            @php
                                                // Get contacts data from setting or empty array
                                                $contacts = $setting['value'] ?? [];

                                                // Get old input if available (from validation errors)
                                                $oldInput = old('value', []);

                                                // Merge old input with existing settings
                                                $contacts = array_merge($contacts, $oldInput);

                                                // Handle phone numbers
                                                $phoneNumbers = $contacts['phones'] ?? [''];
                                                if (is_string($phoneNumbers)) {
                                                    $phoneNumbers = array_filter(explode(',', $phoneNumbers));
                                                    if (empty($phoneNumbers)) {
                                                        $phoneNumbers = [''];
                                                    }
                                                }
                                            @endphp

                                            <div class="mb-4">
                                                <label class="form-label fw-bold mb-3">{{ __('dashboard.phone_numbers') }}</label>
                                                <div id="phone-numbers-container" class="row g-4">
                                                    @if(count($phoneNumbers) > 0)
                                                        @foreach($phoneNumbers as $index => $number)
                                                            <div class="col-md-6 phone-number-group mb-3">
                                                                <div class="position-relative" style="padding-right: 40px;">
                                                                    <input type="text"
                                                                        name="value[phones][]"
                                                                        class="form-control form-control-lg border-2 py-2 px-3 rounded-3"
                                                                        value="{{ old('value.phones.' . $index, is_array($number) ? ($number['number'] ?? '') : $number) }}"
                                                                        placeholder="+1234567890"
                                                                        style="height: 46px; border-color: #e0e0e0; transition: all 0.3s ease;"
                                                                        required>
                                                                    @if($index > 0)
                                                                        <button type="button" class="btn btn-sm btn-icon btn-outline-danger rounded-circle remove-phone position-absolute"
                                                                                style="width: 28px; height: 28px; padding: 0; top: 50%; transform: translateY(-50%); right: 5px;">
                                                                            <i class="fa fa-times" style="font-size: 0.7rem;"></i>
                                                                        </button>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <div class="col-md-6 phone-number-group mb-3">
                                                            <div class="position-relative" style="padding-right: 40px;">
                                                                <input type="text"
                                                                    name="value[phones][]"
                                                                    class="form-control form-control-lg border-2 py-2 px-3 rounded-3"
                                                                    value=""
                                                                    placeholder="+1234567890"
                                                                    style="height: 46px; border-color: #e0e0e0; transition: all 0.3s ease;">
                                                            </div>
                                                        </div>
                                                    @endif
                                                </div>
                                                <div class="text-center mt-3">
                                                    <button type="button" id="add-phone" class="btn btn-icon btn-primary rounded-circle" style="width: 36px; height: 36px;">
                                                        <i class="fa fa-plus"></i>
                                                    </button>
                                                </div>
                                                @error('value.phones.*')
                                                    <div class="text-danger mt-2 d-flex align-items-center justify-content-center">
                                                        <i class="fa fa-exclamation-circle me-1"></i>
                                                        <span>{{ $message }}</span>
                                                    </div>
                                                @enderror
                                            </div>

                                            <script>
                                                document.addEventListener('DOMContentLoaded', function() {
                                                    // Add new phone number field
                                                    document.getElementById('add-phone').addEventListener('click', function() {
                                                        const container = document.getElementById('phone-numbers-container');
                                                        const phoneGroups = container.querySelectorAll('.phone-number-group');
                                                        const newIndex = phoneGroups.length;

                                                        const newGroup = document.createElement('div');
                                                        newGroup.className = 'col-md-6 phone-number-group mb-3';
                                                        newGroup.innerHTML = `
                                                            <div class="position-relative" style="padding-right: 40px;">
                                                                <input type="text"
                                                                    name="value[phones][]"
                                                                    class="form-control form-control-lg border-2 py-2 px-3 rounded-3"
                                                                    value=""
                                                                    placeholder="+1234567890"
                                                                    style="height: 46px; border-color: #e0e0e0; transition: all 0.3s ease;"
                                                                    required>
                                                                <button type="button" class="btn btn-sm btn-icon btn-outline-danger rounded-circle remove-phone position-absolute"
                                                                        style="width: 28px; height: 28px; padding: 0; top: 50%; transform: translateY(-50%); right: 5px;">
                                                                    <i class="fa fa-times" style="font-size: 0.7rem;"></i>
                                                                </button>
                                                            </div>
                                                        `;
                                                        container.appendChild(newGroup);

                                                        // Add event listener to the new remove button
                                                        newGroup.querySelector('.remove-phone').addEventListener('click', function() {
                                                            container.removeChild(newGroup);
                                                        });
                                                    });

                                                    // Add event listeners to existing remove buttons
                                                    document.querySelectorAll('.remove-phone').forEach(button => {
                                                        button.addEventListener('click', function() {
                                                            const container = document.getElementById('phone-numbers-container');
                                                            const groups = container.querySelectorAll('.phone-number-group');
                                                            if (groups.length > 1) {
                                                                this.closest('.phone-number-group').remove();
                                                            } else {
                                                                // If it's the last phone number, just clear the value
                                                                this.closest('.phone-number-group').querySelector('input').value = '';
                                                            }
                                                        });
                                                    });
                                                });
                                            </script>

                                            <div class="mb-3">
                                                <label>{{ __('dashboard.whatsapp') }}</label>
                                                <input type="text"
                                                    name="value[whatsapp]"
                                                    class="form-control"
                                                    value="{{ old('value.whatsapp', $contacts['whatsapp'] ?? '') }}"
                                                    placeholder="+1234567890"
                                                    required>
                                                @error('value.whatsapp')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>

                                            <div class="mb-3">
                                                <label>{{ __('dashboard.email') }}</label>
                                                <input type="email"
                                                    name="value[email]"
                                                    class="form-control"
                                                    value="{{ old('value.email', $contacts['email'] ?? '') }}"
                                                    placeholder="contact@example.com"
                                                    required>
                                                @error('value.email')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label>{{ __('dashboard.facebook') }}</label>
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">https://facebook.com/</span>
                                                            </div>
                                                            <input type="text"
                                                                name="value[facebook]"
                                                                class="form-control"
                                                                value="{{ old('value.facebook', $contacts['facebook'] ?? '') }}"
                                                                placeholder="username">
                                                        </div>
                                                        @error('value.facebook')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label>{{ __('dashboard.instagram') }}</label>
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">https://instagram.com/</span>
                                                            </div>
                                                            <input type="text"
                                                                name="value[instagram]"
                                                                class="form-control"
                                                                value="{{ old('value.instagram', $contacts['instagram'] ?? '') }}"
                                                                placeholder="username">
                                                        </div>
                                                        @error('value.instagram')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label>{{ __('dashboard.linkedin') }}</label>
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">https://linkedin.com/in/</span>
                                                            </div>
                                                            <input type="text"
                                                                name="value[linkedin]"
                                                                class="form-control"
                                                                value="{{ old('value.linkedin', $contacts['linkedin'] ?? '') }}"
                                                                placeholder="username">
                                                        </div>
                                                        @error('value.linkedin')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label>{{ __('dashboard.twitter') }}</label>
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">https://twitter.com/</span>
                                                            </div>
                                                            <input type="text"
                                                                name="value[twitter]"
                                                                class="form-control"
                                                                value="{{ old('value.twitter', $contacts['twitter'] ?? '') }}"
                                                                placeholder="username">
                                                        </div>
                                                        @error('value.twitter')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label>{{ __('dashboard.youtube') }}</label>
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">https://youtube.com/</span>
                                                            </div>
                                                            <input type="text"
                                                                name="value[youtube]"
                                                                class="form-control"
                                                                value="{{ old('value.youtube', $contacts['youtube'] ?? '') }}"
                                                                placeholder="username">
                                                        </div>
                                                        @error('value.youtube')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label>{{ __('dashboard.tiktok') }}</label>
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">https://tiktok.com/</span>
                                                            </div>
                                                            <input type="text"
                                                                name="value[tiktok]"
                                                                class="form-control"
                                                                value="{{ old('value.tiktok', $contacts['tiktok'] ?? '') }}"
                                                                placeholder="username">
                                                        </div>
                                                        @error('value.tiktok')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label>{{ __('dashboard.address') }}</label>
                                                <textarea name="value[address]" class="form-control" rows="2">{{ old('value.address', $contacts['address'] ?? '') }}</textarea>
                                                @error('value.address') <span class="text-danger">{{ $message }}</span> @enderror
                                            </div>

                                            <div class="d-flex justify-content-end">
                                                <button type="submit" class="btn btn-primary">{{ __('dashboard.save') }}</button>
                                            </div>


                                        </form>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<!-- END: Content-->

@section('script')
    <!-- Include the Quill library -->
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <!-- Include the Quill library -->
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script>
        // Initialize editors
        var quillEN = new Quill('#editor-en', {
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline'],        // toggled buttons
                    [{'list': 'ordered'}, {'list': 'bullet'}],
                    [{'header': [1, 2, 3, 4, 5, 6, false]}],
                    [{'color': []}, {'background': []}],    // dropdown with defaults from theme
                    ['clean']                               // remove formatting button
                ]
            },
            theme: 'snow'
        });

        var quillAR = new Quill('#editor-ar', {
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline'],        // toggled buttons
                    [{'list': 'ordered'}, {'list': 'bullet'}],
                    [{'header': [1, 2, 3, 4, 5, 6, false]}],
                    [{'color': []}, {'background': []}],    // dropdown with defaults from theme
                    ['clean']                               // remove formatting button
                ]
            },
            theme: 'snow'
        });

        // Set direction and alignment for Arabic editor
        quillAR.format('align', 'right');
        quillAR.format('direction', 'rtl');

        function submitFormUsageTerm() {
            // Get content from editors and set to hidden textareas
            document.querySelector('textarea[name="termsContent[en]"]').value = quillEN.root.innerHTML;
            document.querySelector('textarea[name="termsContent[ar]"]').value = quillAR.root.innerHTML;
            document.getElementById('formUsageTermPage').submit();
        }
    </script>
    <script>
        const maxItems = 4;

        // Function to add new items
        function addItem(event) {
            event.preventDefault();  // Prevents the default form submission behavior

            const container = document.querySelector('.repeater-container');
            const currentItems = container.querySelectorAll('.repeater-item').length;

            if (currentItems < maxItems) {
                const newItem = document.createElement('div');
                newItem.classList.add('repeater-item');

                // Generate a unique index for the input fields (based on current number of items)
                const index = currentItems;

                // Create file input for icon
                const iconInput = document.createElement('input');
                iconInput.type = 'file';
                iconInput.classList.add('icon-input');
                iconInput.accept = 'image/*';
                iconInput.name = `feature-icon[${index}]`;  // Dynamic name for file input

                // Create text input for feature name
                const textInput = document.createElement('input');
                textInput.type = 'text';
                textInput.classList.add('text-input');
                textInput.placeholder = 'Enter text';
                textInput.name = `feature-name[${index}]`;  // Dynamic name for text input

                // Create remove button
                const removeBtn = document.createElement('button');
                removeBtn.classList.add('remove-btn');
                removeBtn.textContent = 'Remove';
                removeBtn.onclick = function() {
                    removeItem(removeBtn);
                };

                // Append inputs and remove button to new item
                newItem.appendChild(iconInput);
                newItem.appendChild(textInput);
                newItem.appendChild(removeBtn);

                // Add new item to the container
                container.appendChild(newItem);

                // Disable the add button if we reach max items
                if (container.querySelectorAll('.repeater-item').length >= maxItems) {
                    document.getElementById('add-more-btn').disabled = true;
                }
            }
        }

        // Function to remove an item
        function removeItem(button) {
            const itemToRemove = button.parentElement;
            itemToRemove.remove();

            // Enable Add More button if we have less than max items
            const container = document.querySelector('.repeater-container');
            if (container.querySelectorAll('.repeater-item').length < maxItems) {
                document.getElementById('add-more-btn').disabled = false;
            }
        }
    </script>


@endsection