@include('Partials.sidebar')

<section class="main_content dashboard_part large_header_bg">

    @include('Partials.header')

    <div class="main_content_iner default_main_contaner_iner">

        @if ($errors->any())
            <div>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="page-body">
            <div class="container-fluid">
                <div class="page-title">
                    <div class="row">
                        <div class="col-md-6 ps-0">
                            <h3>Collection</h3>
                        </div>
                        <div class="col-md-6 ps-0">
                            <a href="/collection-inner/page/dashboard" class="btn btn-primary">View All</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="location-form" style="width: 100%">

                            <div class="location-form-header">
                                <h3>Collection</h3>
                            </div>
                            <div class="location-form-body">
                                <form id="home_banner_section_form"
                                    action="{{ url('/collection-inner/page/update/' . $collections->id) }}"
                                    method="POST" enctype="multipart/form-data">
                                    @csrf
                                    @method('PUT')
                                    <div class="border-box">
                                        <div class="row">
                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="Name">Property Name:</label>
                                                    <input type="text" id="property_name" name="property_name"
                                                        class="form-control"
                                                        value="{{ old('property_name', $collections['property_name'] ?? '')}}"
                                                        required>
                                                </div>
                                            </div>
                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="slug">Property Slug:</label>
                                                    <label>Ex: Property Name (all small letters with - between
                                                        words)</label>
                                                    <input type="text" id="slug" name="slug" class="form-control"
                                                        value="{{old('slug', $collections['slug'] ?? '')}}" required>
                                                </div>
                                            </div>
                                            <div class="col-xl-6 col-sm-6">
                                                <div class="form-group">
                                                    <label for="banner_image">Banner Image:<br /> (*Dimension - 1920px X
                                                        957px)</label>
                                                    <div id="image-repeater-0">
                                                        <div class="image-input-wrapper" style="margin-top: 10px;">
                                                            <div class="image-preview"
                                                                onclick="document.getElementById('banner_image').click();">

                                                                @if (isset($collections->banner_image) && !empty($collections->banner_image))
                                                                    <img id="preview-0"
                                                                        src="{{ isset($collections->banner_image) ? asset($collections->banner_image) : '' }}"
                                                                        alt="Image Preview"
                                                                        style="max-width: 200px; display: {{ isset($collections->banner_image) ? 'block' : 'none' }};" />
                                                                @else
                                                                    <img id="preview-0" src="" alt="Image Preview"
                                                                        style="max-width: 200px; display:none;" />
                                                                @endif

                                                            </div><br>
                                                            <label for="banner_image" class="custom-file-upload">
                                                                <i class="fas fa-cloud-upload-alt"></i> Choose
                                                                Image
                                                            </label>
                                                            <input id="banner_image" class="file_input" type="file"
                                                                name="banner_image" accept=".png, .jpg, .jpeg, .webp"
                                                                onchange="previewImage(this, 0, 1920, 957, 'The Banner image must be 1920px x 957px.')" />
                                                            <div id="preview-container-0"></div>
                                                        </div>
                                                    </div>
                                                    <input type="hidden" id="existing_collections_banner_image"
                                                        value="{{ $collections->banner_image }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Second Section -->
                                    <label for="second section">Second Section:</label>

                                    <div class="border-box">
                                        <div class="row">
                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="title">Title:</label>
                                                    <input type="text" id="title" name="title" class="form-control"
                                                        value="{{old('title', $secondSections['title']) ?? ''}}"
                                                        required>
                                                </div>
                                            </div>
                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="sub_title">Sub Title:</label>
                                                    <input type="text" id="sub_title" name="sub_title"
                                                        class="form-control"
                                                        value="{{old('sub_title', $secondSections['sub_title']) ?? ''}}"
                                                        required>
                                                </div>
                                            </div>
                                            <div class="col-xl-6 col-sm-6">
                                                <div class="form-group">
                                                    <label for="left_image">Left Image: (*Dimension - 700px X
                                                        800px)</label>
                                                    <div id="image-repeater-1">
                                                        <div class="image-input-wrapper" style="margin-top: 10px;">
                                                            <div class="image-preview"
                                                                onclick="document.getElementById('left_image').click();">

                                                                @if (isset($secondSections->left_image) && !empty($secondSections->left_image))
                                                                    <img id="preview-1"
                                                                        src="{{ isset($secondSections->left_image) ? asset($secondSections->left_image) : '' }}"
                                                                        alt="Image Preview"
                                                                        style="max-width: 200px; display: {{ isset($secondSections->left_image) ? 'block' : 'none' }};" />
                                                                @else
                                                                    <img id="preview-1" src="" alt="Image Preview"
                                                                        style="max-width: 200px; display:none;" />
                                                                @endif

                                                            </div><br>
                                                            <label for="left_image" class="custom-file-upload">
                                                                <i class="fas fa-cloud-upload-alt"></i> Choose
                                                                Image
                                                            </label>
                                                            <input id="left_image" class="file_input" type="file"
                                                                name="left_image" accept=".png, .jpg, .jpeg, .webp"
                                                                onchange="previewImage(this, 1, 700, 800, 'The Left image must be 700px x 800px.')" />
                                                            <div id="preview-container-1"></div>
                                                        </div>
                                                    </div>
                                                    <input type="hidden" id="existing_collection_about_left_image"
                                                        value="{{ $secondSections->left_image }}">
                                                </div>
                                            </div>
                                            <div class="col-xl-6 col-sm-6">
                                                <div class="form-group">
                                                    <label for="right_image">Right Image: (*Dimension - 700px X
                                                        334px)</label>
                                                    <div id="image-repeater-2">
                                                        <div class="image-input-wrapper" style="margin-top: 10px;">
                                                            <div class="image-preview"
                                                                onclick="document.getElementById('right_image').click();">

                                                                @if (isset($secondSections->right_image) && !empty($secondSections->right_image))
                                                                    <img id="preview-2"
                                                                        src="{{ isset($secondSections->right_image) ? asset($secondSections->right_image) : '' }}"
                                                                        alt="Image Preview"
                                                                        style="max-width: 200px; display: {{ isset($secondSections->right_image) ? 'block' : 'none' }};" />
                                                                @else
                                                                    <img id="preview-2" src="" alt="Image Preview"
                                                                        style="max-width: 200px; display:none;" />
                                                                @endif

                                                            </div><br>
                                                            <label for="right_image" class="custom-file-upload">
                                                                <i class="fas fa-cloud-upload-alt"></i> Choose
                                                                Image
                                                            </label>
                                                            <input id="right_image" class="file_input" type="file"
                                                                name="right_image" accept=".png, .jpg, .jpeg, .webp"
                                                                onchange="previewImage(this, 2, 700, 334, 'The Right image must be 700px x 334px.')" />
                                                            <div id="preview-container-2"></div>
                                                        </div>
                                                    </div>
                                                    <input type="hidden" id="existing_collection_about_right_image"
                                                        value="{{ $secondSections->right_image }}">
                                                </div>
                                            </div>
                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="Description" class="form-label">Description:</label>
                                                    <textarea rows="5" id="second_section_description"
                                                        name="second_section_description" required
                                                        class="form-control">{{old('description', $secondSections['description']) ?? ''}}</textarea>
                                                </div>
                                            </div>
                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <div id="image-repeater-3">
                                                        <label>Brochure PDF File</label>
                                                        <div class="image-input-wrapper" style="margin-top: 10px;">
                                                            <div class="image-preview"
                                                                onclick="document.getElementById('brochure_pdf').click();">
                                                                <label>{{ isset($secondSections['brochure_pdf']) ? asset($secondSections['brochure_pdf']) : '' }}</label>
                                                            </div><br>
                                                            <label for="brochure_pdf" class="custom-file-upload">
                                                                <i class="fas fa-cloud-upload-alt"></i>
                                                                Choose File
                                                            </label>
                                                            <input class="file_input" type="file" id="brochure_pdf"
                                                                name="brochure_pdf" accept=".pdf"
                                                                onchange="previewPDF(this, 3)" />
                                                            <div id="preview-container-3">
                                                                <iframe id="pdf-preview-3"
                                                                    src="{{ isset($secondSections['brochure_pdf']) ? asset($secondSections['brochure_pdf']) : '' }}"
                                                                    style="width: 100%; height: 500px;"
                                                                    frameborder="0"></iframe>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Walkthrough Section -->
                                    <label for="Walkthrough Section">Walkthrough Section:</label>
                                    <div class="border-box">
                                        <div class="row">
                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="walkthrough_link">Walkthrough Link:</label>
                                                    <input type="text" id="walkthrough_link" name="walkthrough_link"
                                                        class="form-control"
                                                        value="{{old('walkthrough_link', $collections['walkthrough_link']) ?? ''}}"
                                                        required>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Amenities Section -->
                                    <label for="Amenities Section">Amenities Section:</label>
                                    <div class="border-box">
                                        <div class="row">
                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="amenity_section_title">Amenity Section Title:</label>
                                                    <input type="text" id="amenity_section_title"
                                                        name="amenity_section_title" class="form-control"
                                                        value="{{old('amenity_section_title', $amenitiesSections['title']) ?? ''}}"
                                                        required>
                                                </div>
                                            </div>
                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="Amenity Section Description" class="form-label">Amenity
                                                        Section Description:</label>
                                                    <textarea rows="5" id="amenity_section_description"
                                                        name="amenity_section_description" required
                                                        class="form-control">{{old('amenity_section_description', $amenitiesSections['description']) ?? ''}}</textarea>
                                                </div>
                                            </div>
                                        </div>

                                        <div id="slide-container">
                                            <label for="amenity_slides">Amenity Slides:</label>
                                            @php
                                                $amenitiesSlides = json_decode($amenitiesSections->slides, true);
                                            @endphp
                                            @if (!empty($amenitiesSlides) && count($amenitiesSlides) > 0)
                                                @foreach ($amenitiesSlides as $index => $amenityslide)  
                                                                                                                                                                                                                                            <div class="border-box amenity-slide-section"
                                                        id="amenity-slide-section-{{$index}}">
                                                        <div class="row">
                                                            <div class="col-xl-12 col-sm-6">
                                                                <div class="form-group">
                                                                    <label for="amenity_title-{{$index}}">Amenity
                                                                        Title:</label>
                                                                    <input type="text" id="amenity_title-{{$index}}"
                                                                        name="amenity_title-{{$index}}" class="form-control"
                                                                        required
                                                                        value="{{ old('amenity_title', $amenityslide['amenity_title'] ?? '')}}">
                                                                </div>
                                                            </div>
                                                            <div class="col-xl-6 col-sm-6">
                                                                <div class="form-group">
                                                                    <label for="amenity_image-{{$index}}">Amenity
                                                                        Image: (*Dimension -
                                                                        700px X
                                                                        602px)</label>
                                                                    <div id="amenity-image-repeater-{{$index}}">
                                                                        <div class="image-input-wrapper"
                                                                            style="margin-top: 10px;">
                                                                            <div class="image-preview"
                                                                                onclick="document.getElementById('amenity_image-{{$index}}').click();">

                                                                                @if (isset($amenityslide['amenity_image']) && !empty($amenityslide['amenity_image']))
                                                                                    <img id="amenity-image-preview-{{$index}}"
                                                                                        src="{{ isset($amenityslide['amenity_image']) ? asset($amenityslide['amenity_image']) : '' }}"
                                                                                        alt="Image Preview"
                                                                                        style="max-width: 200px; display: {{ isset($amenityslide['amenity_image']) ? 'block' : 'none' }};" />
                                                                                @else
                                                                                    <img id="amenity-image-preview-{{$index}}"
                                                                                        src="" alt="Image Preview"
                                                                                        style="max-width: 200px; display:none;" />
                                                                                @endif

                                                                            </div><br>
                                                                            <label for="amenity_image-{{$index}}"
                                                                                class="custom-file-upload">
                                                                                <i class="fas fa-cloud-upload-alt"></i> Choose
                                                                                Image
                                                                            </label>
                                                                            <input id="amenity_image-{{$index}}"
                                                                                class="file_input" type="file"
                                                                                name="amenity_image-{{$index}}"
                                                                                accept=".png, .jpg, .jpeg, .webp"
                                                                                onchange="previewAmenityImage(this, {{$index}}, 700, 602, 'The Amenity image must be 700px x 602px.')" />
                                                                            <div
                                                                                id="amenity-image-preview-container-{{$index}}">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <button type="button" class="btn btn-danger remove-slide"
                                                            onclick="removeAmenitySlide(this)">Remove</button>
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="border-box amenity-slide-section" id="amenity-slide-section-0">
                                                    <div class="row">
                                                        <div class="col-xl-12 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="amenity_title-0">Amenity
                                                                    Title:</label>
                                                                <input type="text" id="amenity_title-0"
                                                                    name="amenity_title-0" class="form-control" required
                                                                    value="">
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-6 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="amenity_image-0">Amenity
                                                                    Image: (*Dimension -
                                                                    700px X
                                                                    602px)</label>
                                                                <div id="amenity-image-repeater-0">
                                                                    <div class="image-input-wrapper"
                                                                        style="margin-top: 10px;">
                                                                        <div class="image-preview"
                                                                            onclick="document.getElementById('amenity_image-0').click();">

                                                                            <img id="amenity-image-preview-0" src=""
                                                                                alt="Image Preview"
                                                                                style="max-width: 200px; display: none;" />
                                                                        </div><br>
                                                                        <label for="amenity_image-0"
                                                                            class="custom-file-upload">
                                                                            <i class="fas fa-cloud-upload-alt"></i> Choose
                                                                            Image
                                                                        </label>
                                                                        <input id="amenity_image-0" class="file_input"
                                                                            type="file" name="amenity_image-0"
                                                                            accept=".png, .jpg, .jpeg, .webp"
                                                                            onchange="previewAmenityImage(this, 0, 700, 602, 'The Amenity image must be 700px x 602px.')" />
                                                                        <div id="amenity-image-preview-container-0">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <button type="button" class="btn btn-danger remove-slide"
                                                        onclick="removeAmenitySlide(this)">Remove</button>
                                                </div>

                                            @endif
                                        </div>
                                        <button type="button" class="btn btn-success" id="add-new-amenity">Add New
                                            Amenity</button>
                                    </div>

                                    <!-- Salient Features Section -->
                                    <label for="Salient Features Section">Salient Features Section:</label>
                                    <div class="border-box">
                                        <div class="row">
                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="Salient Features Section Title">Salient Features Section
                                                        Title:</label>
                                                    <input type="text" id="salient_features_section_title"
                                                        name="salient_features_section_title" class="form-control"
                                                        required
                                                        value="{{ old('salient_features_section_title', $featuresSections['title'] ?? '')}}">
                                                </div>
                                            </div>
                                            <!-- <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="Salient Features Section Description"
                                                        class="form-label">Salient Features Section Description:</label>
                                                    <textarea rows="5" id="salient_features_section_description"
                                                        name="salient_features_section_description" required
                                                        class="form-control">{{ old('salient_features_section_description', $featuresSections['description'] ?? '')}}</textarea>
                                                </div>
                                            </div> -->
                                        </div>

                                        <div id="salient-features-slide-container">
                                            <label for="Salient Features Slides">Salient Features Slides:</label>
                                            @php
                                                $featuresSlides = json_decode($featuresSections->slide_images, true);
                                            @endphp
                                            @if (!empty($featuresSlides) && count($featuresSlides) > 0)
                                                @foreach ($featuresSlides as $index => $featuresSlide)
                                                    <div class="border-box salient-features-slide-section"
                                                        id="salient-features-slide-section-{{$index}}">
                                                        <div class="row">
                                                            <div class="col-xl-12 col-sm-6">
                                                                <div class="form-group">
                                                                    <label for="SalientFeaturesSlideTitle-{{$index}}">Salient
                                                                        Feature:</label>
                                                                    <input type="text" id="salient_feature-{{$index}}"
                                                                        name="salient_feature-{{$index}}" class="form-control"
                                                                        required
                                                                        value="{{ old('salient_feature', $featuresSlide['salient_feature'] ?? '')}}">
                                                                </div>
                                                            </div>
                                                            <div class="col-xl-12 col-sm-6">
                                                                <div class="form-group">
                                                                    <label for="salient_features_slide_image-{{$index}}">Slide
                                                                        Image:
                                                                        (*Dimension -
                                                                        864px X
                                                                        855px)</label>
                                                                    <div id="salient_features_slide_image-repeater-{{$index}}">
                                                                        <div class="image-input-wrapper"
                                                                            style="margin-top: 10px;">
                                                                            <div class="image-preview"
                                                                                onclick="document.getElementById('salient_features_slide_image-{{$index}}').click();">

                                                                                @if (isset($featuresSlide['salient_features_slide_image']) && !empty($featuresSlide['salient_features_slide_image']))
                                                                                    <img id="salient_features_slide_image-preview-{{$index}}"
                                                                                        src="{{ isset($featuresSlide['salient_features_slide_image']) ? asset($featuresSlide['salient_features_slide_image']) : '' }}"
                                                                                        alt="Image Preview"
                                                                                        style="max-width: 200px; display: {{ isset($featuresSlide['salient_features_slide_image']) ? 'block' : 'none' }};" />
                                                                                @else
                                                                                    <img id="salient_features_slide_image-preview-{{$index}}"
                                                                                        src="" alt="Image Preview"
                                                                                        style="max-width: 200px; display:none;" />
                                                                                @endif

                                                                            </div><br>
                                                                            <label for="salient_features_slide_image-{{$index}}"
                                                                                class="custom-file-upload">
                                                                                <i class="fas fa-cloud-upload-alt"></i> Choose
                                                                                Image
                                                                            </label>
                                                                            <input id="salient_features_slide_image-{{$index}}"
                                                                                class="file_input" type="file"
                                                                                name="salient_features_slide_image-{{$index}}"
                                                                                accept=".png, .jpg, .jpeg, .webp"
                                                                                onchange="previewFeaturesImage(this, {{$index}}, 864, 855, 'The Feature Slide image must be 864px x 855px.')" />
                                                                            <div
                                                                                id="salient_features_slide_image-preview-container-{{$index}}">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <button type="button" class="btn btn-danger remove-slide"
                                                            onclick="removeFeatureSlide(this)">Remove</button>
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="border-box salient-features-slide-section"
                                                    id="salient-features-slide-section-0">
                                                    <div class="row">
                                                        <div class="col-xl-12 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="SalientFeaturesSlideTitle-0">Salient
                                                                    Feature:</label>
                                                                <input type="text" id="salient_feature-0"
                                                                    name="salient_feature-0" class="form-control" required
                                                                    value="">
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-12 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="salient_features_slide_image-0">Slide
                                                                    Image:
                                                                    (*Dimension -
                                                                    864px X
                                                                    855px)</label>
                                                                <div id="salient_features_slide_image-repeater-0">
                                                                    <div class="image-input-wrapper"
                                                                        style="margin-top: 10px;">
                                                                        <div class="image-preview"
                                                                            onclick="document.getElementById('salient_features_slide_image-0').click();">

                                                                            <img id="salient_features_slide_image-preview-0"
                                                                                src="" alt="Image Preview"
                                                                                style="max-width: 200px; display: none;" />
                                                                        </div><br>
                                                                        <label for="salient_features_slide_image-0"
                                                                            class="custom-file-upload">
                                                                            <i class="fas fa-cloud-upload-alt"></i> Choose
                                                                            Image
                                                                        </label>
                                                                        <input id="salient_features_slide_image-0"
                                                                            class="file_input" type="file"
                                                                            name="salient_features_slide_image-0"
                                                                            accept=".png, .jpg, .jpeg, .webp"
                                                                            onchange="previewFeaturesImage(this, 0, 864, 855, 'The Feature Slide image must be 864px x 855px.')" />
                                                                        <div
                                                                            id="salient_features_slide_image-preview-container-0">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <button type="button" class="btn btn-danger remove-slide"
                                                        onclick="removeFeatureSlide(this)">Remove</button>
                                                </div>

                                            @endif
                                        </div>
                                        <button type="button" class="btn btn-success" id="add-new-feature">Add New
                                            Slide</button>

                                        <br /><br />
                                        <div id="salient-features-thumb-slide-container">
                                            <label for="Salient Features Thumb Slides">Salient Features Thumb
                                                Slides:</label>
                                            @php
                                                $featuresSlideThumbs = json_decode($featuresSections->thumb_images, true);                                               
                                            @endphp
                                            @if (!empty($featuresSlideThumbs) && count($featuresSlideThumbs) > 0)
                                                @foreach ($featuresSlideThumbs as $index => $featuresSlideThumb)
                                                    <div class="border-box salient-features-thumb-slide-section"
                                                        id="salient-features-thumb-slide-section-{{$index}}">
                                                        <div class="row">
                                                            <div class="col-xl-12 col-sm-6">
                                                                <div class="form-group">
                                                                    <label for="SalientFeatureDescription-{{$index}}"
                                                                        class="form-label">Salient Feature
                                                                        Description:</label>
                                                                    <textarea rows="5"
                                                                        id="salient_feature_description-{{$index}}"
                                                                        name="salient_feature_description-{{$index}}" required
                                                                        class="form-control">{{ old('salient_feature_description', $featuresSlideThumb['salient_features_description'] ?? '')}}</textarea>
                                                                </div>
                                                            </div>
                                                            <div class="col-xl-12 col-sm-6">
                                                                <div class="form-group">
                                                                    <label
                                                                        for="salient_features_thumb_slide_image-{{$index}}">Slide
                                                                        Thumb Image: (*Dimension -
                                                                        864px X
                                                                        855px)</label>
                                                                    <div
                                                                        id="salient_features_thumb_slide_image-repeater-{{$index}}">
                                                                        <div class="image-input-wrapper"
                                                                            style="margin-top: 10px;">
                                                                            <div class="image-preview"
                                                                                onclick="document.getElementById('salient_features_thumb_slide_image-{{$index}}').click();">

                                                                                @if (isset($featuresSlideThumb['salient_features_thumb_slide_image']) && !empty($featuresSlideThumb['salient_features_thumb_slide_image']))
                                                                                    <img id="salient_features_thumb_slide_image-preview-{{$index}}"
                                                                                        src="{{ isset($featuresSlideThumb['salient_features_thumb_slide_image']) ? asset($featuresSlideThumb['salient_features_thumb_slide_image']) : '' }}"
                                                                                        alt="Image Preview"
                                                                                        style="max-width: 200px; display: {{ isset($featuresSlideThumb['salient_features_thumb_slide_image']) ? 'block' : 'none' }};" />
                                                                                @else
                                                                                    <img id="salient_features_thumb_slide_image-preview-{{$index}}"
                                                                                        src="" alt="Image Preview"
                                                                                        style="max-width: 200px; display:none;" />
                                                                                @endif

                                                                            </div><br>
                                                                            <label
                                                                                for="salient_features_thumb_slide_image-{{$index}}"
                                                                                class="custom-file-upload">
                                                                                <i class="fas fa-cloud-upload-alt"></i> Choose
                                                                                Image
                                                                            </label>
                                                                            <input
                                                                                id="salient_features_thumb_slide_image-{{$index}}"
                                                                                class="file_input" type="file"
                                                                                name="salient_features_thumb_slide_image-{{$index}}"
                                                                                accept=".png, .jpg, .jpeg, .webp"
                                                                                onchange="previewFeaturesThumbImage(this, {{$index}}, 864, 855, 'The Feature Slide Thumb image must be 864px x 855px.')" />
                                                                            <div
                                                                                id="salient_features_thumb_slide_image-preview-container-{{$index}}">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <button type="button" class="btn btn-danger remove-slide"
                                                            onclick="removeFeatureThumbSlide(this)">Remove</button>
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="border-box salient-features-thumb-slide-section"
                                                    id="salient-features-thumb-slide-section-0">
                                                    <div class="row">
                                                        <div class="col-xl-12 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="SalientFeatureDescription-0"
                                                                    class="form-label">Salient Feature
                                                                    Description:</label>
                                                                <textarea rows="5" id="salient_feature_description-0"
                                                                    name="salient_feature_description-0" required
                                                                    class="form-control"></textarea>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-12 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="salient_features_thumb_slide_image-0">Slide
                                                                    Thumb Image: (*Dimension -
                                                                    864px X
                                                                    855px)</label>
                                                                <div id="salient_features_thumb_slide_image-repeater-0">
                                                                    <div class="image-input-wrapper"
                                                                        style="margin-top: 10px;">
                                                                        <div class="image-preview"
                                                                            onclick="document.getElementById('salient_features_thumb_slide_image-0').click();">

                                                                            <img id="salient_features_thumb_slide_image-preview-0"
                                                                                src="" alt="Image Preview"
                                                                                style="max-width: 200px; display: none;" />
                                                                        </div><br>
                                                                        <label for="salient_features_thumb_slide_image-0"
                                                                            class="custom-file-upload">
                                                                            <i class="fas fa-cloud-upload-alt"></i> Choose
                                                                            Image
                                                                        </label>
                                                                        <input id="salient_features_thumb_slide_image-0"
                                                                            class="file_input" type="file"
                                                                            name="salient_features_thumb_slide_image-0"
                                                                            accept=".png, .jpg, .jpeg, .webp"
                                                                            onchange="previewFeaturesThumbImage(this, 0, 864, 855, 'The Feature Slide Thumb image must be 864px x 855px.')" />
                                                                        <div
                                                                            id="salient_features_thumb_slide_image-preview-container-0">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <button type="button" class="btn btn-danger remove-slide"
                                                        onclick="removeFeatureThumbSlide(this)">Remove</button>
                                                </div>

                                            @endif
                                        </div>
                                        <button type="button" class="btn btn-success" id="add-new-feature-thumb">Add New
                                            Thumb</button>

                                    </div>

                                    <!-- Living Spaces Section -->
                                    <label for="Living Spaces Section">Living Spaces Section:</label>
                                    <div class="border-box">
                                        <div class="row">
                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="living_spaces_section_title">Living Spaces Section
                                                        Title:</label>
                                                    <input type="text" id="living_spaces_section_title"
                                                        name="living_spaces_section_title" class="form-control"
                                                        value="{{ old('living_spaces_section_title', $livingSections['title'] ?? '')}}"
                                                        required>
                                                </div>
                                            </div>
                                        </div>

                                        <div id="living-spaces-slide-container">
                                            <label for="living_spaces_slides">Living Spaces Slides:</label>
                                            @php
                                                $livingSlides = json_decode($livingSections->slides, true);                                                
                                            @endphp
                                            @if (!empty($livingSlides) && count($livingSlides) > 0)
                                                @foreach ($livingSlides as $index => $livingSlide)  
                                                                                                                                                                                                                            <div class="border-box living-spaces-slide-section"
                                                        id="living-spaces-slide-section-{{$index}}">
                                                        <div class="row">
                                                            <div class="col-xl-12 col-sm-6">
                                                                <div class="form-group">
                                                                    <label for="living_spaces_slide_title-{{$index}}">Living
                                                                        Spaces Slide
                                                                        Title:</label>
                                                                    <input type="text" id="living_spaces_slide_title-{{$index}}"
                                                                        name="living_spaces_slide_title-{{$index}}"
                                                                        class="form-control" required
                                                                        value="{{ old('living_spaces_slide_title', $livingSlide['title'] ?? '')}}">
                                                                </div>
                                                            </div>

                                                            <div class="col-xl-12 col-sm-6">
                                                                <div class="form-group">
                                                                    <label for="living_spaces_description-{{$index}}"
                                                                        class="form-label">Living Spaces Slide
                                                                        Description:</label>
                                                                    <textarea rows="5"
                                                                        id="living_spaces_slide_description-{{$index}}"
                                                                        name="living_spaces_slide_description-{{$index}}"
                                                                        required
                                                                        class="form-control">{{ old('living_spaces_slide_description', $livingSlide['description'] ?? '')}}</textarea>
                                                                </div>
                                                            </div>

                                                            <div class="col-xl-6 col-sm-6">
                                                                <div class="form-group">
                                                                    <label for="living_spaces_image-{{$index}}">Living Spaces
                                                                        Slide
                                                                        Image: (*Dimension -
                                                                        826px X
                                                                        680px)</label>
                                                                    <div id="living-image-repeater-{{$index}}">
                                                                        <div class="image-input-wrapper"
                                                                            style="margin-top: 10px;">
                                                                            <div class="image-preview"
                                                                                onclick="document.getElementById('living_spaces_image-{{$index}}').click();">

                                                                                @if (isset($livingSlide['image']) && !empty($livingSlide['image']))
                                                                                    <img id="living-image-preview-{{$index}}"
                                                                                        src="{{ isset($livingSlide['image']) ? asset($livingSlide['image']) : '' }}"
                                                                                        alt="Image Preview"
                                                                                        style="max-width: 200px; display: {{ isset($livingSlide['image']) ? 'block' : 'none' }};" />
                                                                                @else
                                                                                    <img id="living-image-preview-{{$index}}" src=""
                                                                                        alt="Image Preview"
                                                                                        style="max-width: 200px; display:none;" />
                                                                                @endif

                                                                            </div><br>
                                                                            <label for="living_spaces_image-{{$index}}"
                                                                                class="custom-file-upload">
                                                                                <i class="fas fa-cloud-upload-alt"></i> Choose
                                                                                Image
                                                                            </label>
                                                                            <input id="living_spaces_image-{{$index}}"
                                                                                class="file_input" type="file"
                                                                                name="living_spaces_image-{{$index}}"
                                                                                accept=".png, .jpg, .jpeg, .webp"
                                                                                onchange="previewLivingImage(this, {{$index}}, 826, 680, 'The Living Spaces Slide image must be 826px x 680px.')" />
                                                                            <div id="living-image-preview-container-{{$index}}">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <button type="button" class="btn btn-danger remove-slide"
                                                            onclick="removeLivingSlide(this)">Remove</button>
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="border-box living-spaces-slide-section"
                                                    id="living-spaces-slide-section-0">
                                                    <div class="row">
                                                        <div class="col-xl-12 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="living_spaces_slide_title-0">Living
                                                                    Spaces Slide
                                                                    Title:</label>
                                                                <input type="text" id="living_spaces_slide_title-0"
                                                                    name="living_spaces_slide_title-0" class="form-control"
                                                                    required value="">
                                                            </div>
                                                        </div>

                                                        <div class="col-xl-12 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="living_spaces_description-0"
                                                                    class="form-label">Living Spaces Slide
                                                                    Description:</label>
                                                                <textarea rows="5" id="living_spaces_slide_description-0"
                                                                    name="living_spaces_slide_description-0" required
                                                                    class="form-control"></textarea>
                                                            </div>
                                                        </div>

                                                        <div class="col-xl-6 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="living_spaces_image-0">Living Spaces
                                                                    Slide
                                                                    Image: (*Dimension -
                                                                    826px X
                                                                    680px)</label>
                                                                <div id="living-image-repeater-0">
                                                                    <div class="image-input-wrapper"
                                                                        style="margin-top: 10px;">
                                                                        <div class="image-preview"
                                                                            onclick="document.getElementById('living_spaces_image-0').click();">

                                                                            <img id="living-image-preview-0" src=""
                                                                                alt="Image Preview"
                                                                                style="max-width: 200px; display: none;" />
                                                                        </div><br>
                                                                        <label for="living_spaces_image-0"
                                                                            class="custom-file-upload">
                                                                            <i class="fas fa-cloud-upload-alt"></i> Choose
                                                                            Image
                                                                        </label>
                                                                        <input id="living_spaces_image-0" class="file_input"
                                                                            type="file" name="living_spaces_image-0"
                                                                            multiple accept=".png, .jpg, .jpeg, .webp"
                                                                            onchange="previewLivingImage(this, 0, 826, 680, 'The Living Spaces Slide image must be 826px x 680px.')" />
                                                                        <div id="living-image-preview-container-0">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <button type="button" class="btn btn-danger remove-slide"
                                                        onclick="removeLivingSlide(this)">Remove</button>
                                                </div>

                                            @endif
                                        </div>
                                        <button type="button" class="btn btn-success" id="add-new-living">Add New
                                            Slide</button>
                                    </div>

                                    <!-- Layouts Section-->
                                    <label for="Layouts Section">Layouts Section:</label>
                                    <div class="border-box">
                                        <div class="row">
                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="Layouts Section Title">Layouts Section
                                                        Title:</label>
                                                    <input type="text" id="layouts_section_title"
                                                        name="layouts_section_title" class="form-control" required
                                                        value="{{ old('layouts_section_title', $layoutSections['title'] ?? '')}}">
                                                </div>
                                            </div>

                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="First Tab Title">First Tab Title:</label>
                                                    <input type="text" id="first_tab_title" name="first_tab_title"
                                                        class="form-control" required
                                                        value="{{ old('first_tab_title', $layoutSections['first_tab_title'] ?? '')}}">
                                                </div>
                                            </div>
                                            <div class="col-xl-12 col-sm-6">
                                                <div id="first_tab_slide_container">
                                                    @php
                                                        $layoutFirstSlides = json_decode($layoutSections->first_slides, true);
                                                    @endphp
                                                    @if (!empty($layoutFirstSlides) && count($layoutFirstSlides) > 0)
                                                        @foreach ($layoutFirstSlides as $index => $layoutFirstSlide)
                                                            <div class="border-box first_tab_slides"
                                                                id="first_tab_slides-{{$index}}">
                                                                <div class="row">
                                                                    <div class="col-xl-12 col-sm-6">
                                                                        <div class="form-group">
                                                                            <label for="FirstTabSlideTitle-{{$index}}">First
                                                                                Tab Slide
                                                                                Title:</label>
                                                                            <input type="text"
                                                                                id="first_tab_slide_title-{{$index}}"
                                                                                name="first_tab_slide_title-{{$index}}"
                                                                                class="form-control" required
                                                                                value="{{ old('first_tab_slide_title', $layoutFirstSlide['title'] ?? '')}}">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-xl-12 col-sm-6">
                                                                        <div class="form-group">
                                                                            <label for="FirstTabSlideDescription-{{$index}}"
                                                                                class="form-label">First Tab Slide
                                                                                Description:</label>
                                                                            <textarea rows="5"
                                                                                id="first_tab_slide_description-{{$index}}"
                                                                                name="first_tab_slide_description-{{$index}}"
                                                                                required
                                                                                class="form-control">{{ old('first_tab_slide_description', $layoutFirstSlide['description'] ?? '')}}</textarea>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-xl-12 col-sm-6">
                                                                        <div class="form-group">
                                                                            <label
                                                                                for="layout_first_tab_slide_image-{{$index}}">First
                                                                                Tab Slide Image: (*Dimension -
                                                                                387px X
                                                                                491px)</label>
                                                                            <div
                                                                                id="layout_first_tab_slide_image-repeater-{{$index}}">
                                                                                <div class="image-input-wrapper"
                                                                                    style="margin-top: 10px;">
                                                                                    <div class="image-preview"
                                                                                        onclick="document.getElementById('layout_first_tab_slide_image-{{$index}}').click();">

                                                                                        @if (isset($layoutFirstSlide['image']) && !empty($layoutFirstSlide['image']))
                                                                                            <img id="layout_first_tab_slide_image-preview-{{$index}}"
                                                                                                src="{{ isset($layoutFirstSlide['image']) ? asset($layoutFirstSlide['image']) : '' }}"
                                                                                                alt="Image Preview"
                                                                                                style="max-width: 200px; display: {{ isset($layoutFirstSlide['image']) ? 'block' : 'none' }};" />
                                                                                        @else
                                                                                            <img id="layout_first_tab_slide_image-preview-{{$index}}"
                                                                                                src="" alt="Image Preview"
                                                                                                style="max-width: 200px; display:none;" />
                                                                                        @endif

                                                                                    </div><br>
                                                                                    <label
                                                                                        for="layout_first_tab_slide_image-{{$index}}"
                                                                                        class="custom-file-upload">
                                                                                        <i class="fas fa-cloud-upload-alt"></i>
                                                                                        Choose
                                                                                        Image
                                                                                    </label>
                                                                                    <input
                                                                                        id="layout_first_tab_slide_image-{{$index}}"
                                                                                        class="file_input" type="file"
                                                                                        name="layout_first_tab_slide_image-{{$index}}"
                                                                                        accept=".png, .jpg, .jpeg, .webp"
                                                                                        onchange="previewLayoutFirstTabSlideImage(this, {{$index}}, 387, 491, 'The Slide image must be 387px x 491px.')" />
                                                                                    <div
                                                                                        id="layout_first_tab_slide_image-preview-container-{{$index}}">
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <button type="button" class="btn btn-danger remove-slide"
                                                                    onclick="removeLayoutFirstTabSlide(this)">Remove</button>
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <div class="border-box first_tab_slides" id="first_tab_slides-0">
                                                            <div class="row">
                                                                <div class="col-xl-12 col-sm-6">
                                                                    <div class="form-group">
                                                                        <label for="FirstTabSlideTitle-0">First
                                                                            Tab Slide
                                                                            Title:</label>
                                                                        <input type="text" id="first_tab_slide_title-0"
                                                                            name="first_tab_slide_title-0"
                                                                            class="form-control" required value="">
                                                                    </div>
                                                                </div>
                                                                <div class="col-xl-12 col-sm-6">
                                                                    <div class="form-group">
                                                                        <label for="FirstTabSlideDescription-0"
                                                                            class="form-label">First Tab Slide
                                                                            Description:</label>
                                                                        <textarea rows="5"
                                                                            id="first_tab_slide_description-0"
                                                                            name="first_tab_slide_description-0" required
                                                                            class="form-control"></textarea>
                                                                    </div>
                                                                </div>
                                                                <div class="col-xl-12 col-sm-6">
                                                                    <div class="form-group">
                                                                        <label for="layout_first_tab_slide_image-0">First
                                                                            Tab Slide Image: (*Dimension -
                                                                            387px X
                                                                            491px)</label>
                                                                        <div id="layout_first_tab_slide_image-repeater-0">
                                                                            <div class="image-input-wrapper"
                                                                                style="margin-top: 10px;">
                                                                                <div class="image-preview"
                                                                                    onclick="document.getElementById('layout_first_tab_slide_image-0').click();">

                                                                                    <img id="layout_first_tab_slide_image-preview-0"
                                                                                        src="" alt="Image Preview"
                                                                                        style="max-width: 200px; display: none;" />
                                                                                </div><br>
                                                                                <label for="layout_first_tab_slide_image-0"
                                                                                    class="custom-file-upload">
                                                                                    <i class="fas fa-cloud-upload-alt"></i>
                                                                                    Choose
                                                                                    Image
                                                                                </label>
                                                                                <input id="layout_first_tab_slide_image-0"
                                                                                    class="file_input" type="file"
                                                                                    name="layout_first_tab_slide_image-0"
                                                                                    accept=".png, .jpg, .jpeg, .webp"
                                                                                    onchange="previewLayoutFirstTabSlideImage(this, 0, 387, 491, 'The Slide image must be 387px x 491px.')" />
                                                                                <div
                                                                                    id="layout_first_tab_slide_image-preview-container-0">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <button type="button" class="btn btn-danger remove-slide"
                                                                onclick="removeLayoutFirstTabSlide(this)">Remove</button>
                                                        </div>

                                                    @endif
                                                </div>
                                                <button type="button" class="btn btn-success"
                                                    id="add-new-first-tab-slide">Add New</button><br /><br />
                                            </div>

                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="Second Tab Title">Second Tab Title:</label>
                                                    <input type="text" id="second_tab_title" name="second_tab_title"
                                                        class="form-control" required
                                                        value="{{ old('second_tab_title', $layoutSections['second_tab_title'] ?? '')}}">
                                                </div>
                                            </div>
                                            <div class="col-xl-12 col-sm-6">
                                                <div id="second_tab_slide_container">
                                                    @php
                                                        $layoutSecondSlides = json_decode($layoutSections->second_slides, true);
                                                    @endphp
                                                    @if (!empty($layoutSecondSlides) && count($layoutSecondSlides) > 0)
                                                        @foreach ($layoutSecondSlides as $index => $layoutSecondSlide)
                                                            <div class="border-box second_tab_slides"
                                                                id="second_tab_slides-{{$index}}">
                                                                <div class="row">
                                                                    <div class="col-xl-12 col-sm-6">
                                                                        <div class="form-group">
                                                                            <label for="SecondTabSlideTitle-{{$index}}">Second
                                                                                Tab Slide
                                                                                Title:</label>
                                                                            <input type="text"
                                                                                id="second_tab_slide_title-{{$index}}"
                                                                                name="second_tab_slide_title-{{$index}}"
                                                                                class="form-control" required
                                                                                value="{{ old('second_tab_slide_title', $layoutSecondSlide['title'] ?? '')}}">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-xl-12 col-sm-6">
                                                                        <div class="form-group">
                                                                            <label for="SecondTabSlideDescription-{{$index}}"
                                                                                class="form-label">Second Tab Slide
                                                                                Description:</label>
                                                                            <textarea rows="5"
                                                                                id="second_tab_slide_description-{{$index}}"
                                                                                name="second_tab_slide_description-{{$index}}" required
                                                                                class="form-control"> {{ old('second_tab_slide_description', $layoutSecondSlide['description'] ?? '')}}</textarea>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-xl-12 col-sm-6">
                                                                        <div class="form-group">
                                                                            <label
                                                                                for="layout_second_tab_slide_image-{{$index}}">Second
                                                                                Tab Slide Image: (*Dimension -
                                                                                387px X
                                                                                491px)</label>
                                                                            <div
                                                                                id="layout_second_tab_slide_image-repeater-{{$index}}">
                                                                                <div class="image-input-wrapper"
                                                                                    style="margin-top: 10px;">
                                                                                    <div class="image-preview"
                                                                                        onclick="document.getElementById('layout_second_tab_slide_image-{{$index}}').click();">

                                                                                        @if (isset($layoutSecondSlide['image']) && !empty($layoutSecondSlide['image']))
                                                                                            <img id="layout_second_tab_slide_image-preview-{{$index}}"
                                                                                                src="{{ isset($layoutSecondSlide['image']) ? asset($layoutSecondSlide['image']) : '' }}"
                                                                                                alt="Image Preview"
                                                                                                style="max-width: 200px; display: {{ isset($layoutSecondSlide['image']) ? 'block' : 'none' }};" />
                                                                                        @else
                                                                                            <img id="layout_second_tab_slide_image-preview-{{$index}}"
                                                                                                src="" alt="Image Preview"
                                                                                                style="max-width: 200px; display:none;" />
                                                                                        @endif

                                                                                    </div><br>
                                                                                    <label
                                                                                        for="layout_second_tab_slide_image-{{$index}}"
                                                                                        class="custom-file-upload">
                                                                                        <i class="fas fa-cloud-upload-alt"></i>
                                                                                        Choose
                                                                                        Image
                                                                                    </label>
                                                                                    <input
                                                                                        id="layout_second_tab_slide_image-{{$index}}"
                                                                                        class="file_input" type="file"
                                                                                        name="layout_second_tab_slide_image[]"
                                                                                        multiple
                                                                                        accept=".png, .jpg, .jpeg, .webp"
                                                                                        onchange="previewLayoutSecondTabSlideImage(this, {{$index}}, 387, 491, 'The Slide image must be 387px x 491px.')" />
                                                                                    <div
                                                                                        id="layout_second_tab_slide_image-preview-container-{{$index}}">
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <button type="button" class="btn btn-danger remove-slide"
                                                                    onclick="removeLayoutSecondTabSlide(this)">Remove</button>
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <div class="border-box second_tab_slides" id="second_tab_slides-0">
                                                            <div class="row">
                                                                <div class="col-xl-12 col-sm-6">
                                                                    <div class="form-group">
                                                                        <label for="SecondTabSlideTitle-0">Second
                                                                            Tab Slide
                                                                            Title:</label>
                                                                        <input type="text" id="second_tab_slide_title-0"
                                                                            name="second_tab_slide_title-0"
                                                                            class="form-control" required value="">
                                                                    </div>
                                                                </div>
                                                                <div class="col-xl-12 col-sm-6">
                                                                    <div class="form-group">
                                                                        <label for="SecondTabSlideDescription-0"
                                                                            class="form-label">Second Tab Slide
                                                                            Description:</label>
                                                                        <textarea rows="5"
                                                                            id="second_tab_slide_description-0"
                                                                            name="second_tab_slide_description-0" required
                                                                            class="form-control"> </textarea>
                                                                    </div>
                                                                </div>
                                                                <div class="col-xl-12 col-sm-6">
                                                                    <div class="form-group">
                                                                        <label for="layout_second_tab_slide_image-0">Second
                                                                            Tab Slide Image: (*Dimension -
                                                                            387px X
                                                                            491px)</label>
                                                                        <div id="layout_second_tab_slide_image-repeater-0">
                                                                            <div class="image-input-wrapper"
                                                                                style="margin-top: 10px;">
                                                                                <div class="image-preview"
                                                                                    onclick="document.getElementById('layout_second_tab_slide_image-0').click();">

                                                                                    <img id="layout_second_tab_slide_image-preview-0"
                                                                                        src="" alt="Image Preview"
                                                                                        style="max-width: 200px; display: none;" />
                                                                                </div><br>
                                                                                <label for="layout_second_tab_slide_image-0"
                                                                                    class="custom-file-upload">
                                                                                    <i class="fas fa-cloud-upload-alt"></i>
                                                                                    Choose
                                                                                    Image
                                                                                </label>
                                                                                <input id="layout_second_tab_slide_image-0"
                                                                                    class="file_input" type="file"
                                                                                    name="layout_second_tab_slide_image-0"
                                                                                    multiple
                                                                                    accept=".png, .jpg, .jpeg, .webp"
                                                                                    onchange="previewLayoutSecondTabSlideImage(this, 0, 387, 491, 'The Slide image must be 387px x 491px.')" />
                                                                                <div
                                                                                    id="layout_second_tab_slide_image-preview-container-0">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <button type="button" class="btn btn-danger remove-slide"
                                                                onclick="removeLayoutSecondTabSlide(this)">Remove</button>
                                                        </div>

                                                    @endif
                                                </div>
                                                <button type="button" class="btn btn-success"
                                                    id="add-new-second-tab-slide">Add New</button><br /><br />
                                            </div>

                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="Third Tab Title">Third Tab Title:</label>
                                                    <input type="text" id="third_tab_title" name="third_tab_title"
                                                        class="form-control" required
                                                        value="{{ old('third_tab_title', $layoutSections['third_tab_title'] ?? '')}}">
                                                </div>
                                            </div>

                                            <div class="col-xl-12 col-sm-6">
                                                <div id="third_tab_slide_container">
                                                    @php
                                                        $layoutThirdSlides = json_decode($layoutSections->third_slides, true);
                                                    @endphp
                                                    @if (!empty($layoutThirdSlides) && count($layoutThirdSlides) > 0)
                                                        @foreach ($layoutThirdSlides as $index => $layoutThirdSlide)
                                                            <div class="border-box third_tab_slides"
                                                                id="third_tab_slides-{{$index}}">
                                                                <div class="row">
                                                                    <div class="col-xl-12 col-sm-6">
                                                                        <div class="form-group">
                                                                            <label for="ThirdTabSlideTitle-{{$index}}">Third
                                                                                Tab Slide
                                                                                Title:</label>
                                                                            <input type="text"
                                                                                id="third_tab_slide_title-{{$index}}"
                                                                                name="third_tab_slide_title-{{$index}}"
                                                                                class="form-control" required
                                                                                value="{{ old('third_tab_slide_title', $layoutThirdSlide['title'] ?? '')}}">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-xl-12 col-sm-6">
                                                                        <div class="form-group">
                                                                            <label for="ThirdTabSlideDescription-{{$index}}"
                                                                                class="form-label">Third Tab Slide
                                                                                Description:</label>
                                                                            <textarea rows="5"
                                                                                id="third_tab_slide_description-{{$index}}"
                                                                                name="third_tab_slide_description-{{$index}}"
                                                                                required
                                                                                class="form-control"> {{ old('third_tab_slide_description', $layoutThirdSlide['description'] ?? '')}}</textarea>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-xl-12 col-sm-6">
                                                                        <div class="form-group">
                                                                            <label
                                                                                for="layout_third_tab_slide_image-{{$index}}">Third
                                                                                Tab Slide Image: (*Dimension -
                                                                                387px X
                                                                                491px)</label>
                                                                            <div
                                                                                id="layout_third_tab_slide_image-repeater-{{$index}}">
                                                                                <div class="image-input-wrapper"
                                                                                    style="margin-top: 10px;">
                                                                                    <div class="image-preview"
                                                                                        onclick="document.getElementById('layout_third_tab_slide_image-{{$index}}').click();">

                                                                                        @if (isset($layoutThirdSlide['image']) && !empty($layoutThirdSlide['image']))
                                                                                            <img id="layout_third_tab_slide_image-preview-{{$index}}"
                                                                                                src="{{ isset($layoutThirdSlide['image']) ? asset($layoutThirdSlide['image']) : '' }}"
                                                                                                alt="Image Preview"
                                                                                                style="max-width: 200px; display: {{ isset($layoutThirdSlide['image']) ? 'block' : 'none' }};" />
                                                                                        @else
                                                                                            <img id="layout_third_tab_slide_image-preview-{{$index}}"
                                                                                                src="" alt="Image Preview"
                                                                                                style="max-width: 200px; display:none;" />
                                                                                        @endif

                                                                                    </div><br>
                                                                                    <label
                                                                                        for="layout_third_tab_slide_image-{{$index}}"
                                                                                        class="custom-file-upload">
                                                                                        <i class="fas fa-cloud-upload-alt"></i>
                                                                                        Choose
                                                                                        Image
                                                                                    </label>
                                                                                    <input
                                                                                        id="layout_third_tab_slide_image-{{$index}}"
                                                                                        class="file_input" type="file"
                                                                                        name="layout_third_tab_slide_image-{{$index}}"
                                                                                        multiple
                                                                                        accept=".png, .jpg, .jpeg, .webp"
                                                                                        onchange="previewLayoutThirdTabSlideImage(this, {{$index}}, 387, 491, 'The Slide image must be 387px x 491px.')" />
                                                                                    <div
                                                                                        id="layout_third_tab_slide_image-preview-container-{{$index}}">
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <button type="button" class="btn btn-danger remove-slide"
                                                                    onclick="removeLayoutThirdTabSlide(this)">Remove</button>
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <div class="border-box third_tab_slides" id="third_tab_slides-0">
                                                            <div class="row">
                                                                <div class="col-xl-12 col-sm-6">
                                                                    <div class="form-group">
                                                                        <label for="ThirdTabSlideTitle-0">Third
                                                                            Tab Slide
                                                                            Title:</label>
                                                                        <input type="text" id="third_tab_slide_title-0"
                                                                            name="third_tab_slide_title-0"
                                                                            class="form-control" required value="">
                                                                    </div>
                                                                </div>
                                                                <div class="col-xl-12 col-sm-6">
                                                                    <div class="form-group">
                                                                        <label for="ThirdTabSlideDescription-0"
                                                                            class="form-label">Third Tab Slide
                                                                            Description:</label>
                                                                        <textarea rows="5"
                                                                            id="third_tab_slide_description-0"
                                                                            name="third_tab_slide_description-0" required
                                                                            class="form-control"> </textarea>
                                                                    </div>
                                                                </div>
                                                                <div class="col-xl-12 col-sm-6">
                                                                    <div class="form-group">
                                                                        <label for="layout_third_tab_slide_image-0">Third
                                                                            Tab Slide Image: (*Dimension -
                                                                            387px X
                                                                            491px)</label>
                                                                        <div id="layout_third_tab_slide_image-repeater-0">
                                                                            <div class="image-input-wrapper"
                                                                                style="margin-top: 10px;">
                                                                                <div class="image-preview"
                                                                                    onclick="document.getElementById('layout_third_tab_slide_image-0').click();">

                                                                                    <img id="layout_third_tab_slide_image-preview-0"
                                                                                        src="" alt="Image Preview"
                                                                                        style="max-width: 200px; display: none;" />
                                                                                </div><br>
                                                                                <label for="layout_third_tab_slide_image-0"
                                                                                    class="custom-file-upload">
                                                                                    <i class="fas fa-cloud-upload-alt"></i>
                                                                                    Choose
                                                                                    Image
                                                                                </label>
                                                                                <input id="layout_third_tab_slide_image-0"
                                                                                    class="file_input" type="file"
                                                                                    name="layout_third_tab_slide_image-0"
                                                                                    multiple
                                                                                    accept=".png, .jpg, .jpeg, .webp"
                                                                                    onchange="previewLayoutThirdTabSlideImage(this, 0, 387, 491, 'The Slide image must be 387px x 491px.')" />
                                                                                <div
                                                                                    id="layout_third_tab_slide_image-preview-container-0">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <button type="button" class="btn btn-danger remove-slide"
                                                                onclick="removeLayoutThirdTabSlide(this)">Remove</button>
                                                        </div>

                                                    @endif
                                                </div>
                                                <button type="button" class="btn btn-success"
                                                    id="add-new-third-tab-slide">Add New</button><br /><br />
                                            </div>

                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="Fourth Tab Title">Fourth Tab Title:</label>
                                                    <input type="text" id="fourth_tab_title" name="fourth_tab_title"
                                                        class="form-control" required
                                                        value="{{ old('fourth_tab_title', $layoutSections['fourth_tab_title'] ?? '')}}">
                                                </div>
                                            </div>

                                            <div class="col-xl-12 col-sm-6">
                                                <div id="fourth_tab_slide_container">
                                                    @php
                                                        $layoutFourthSlides = json_decode($layoutSections->fourth_slides, true);
                                                    @endphp
                                                    @if (!empty($layoutFourthSlides) && count($layoutFourthSlides) > 0)
                                                        @foreach ($layoutFourthSlides as $index => $layoutFourthSlide)
                                                            <div class="border-box fourth_tab_slides"
                                                                id="fourth_tab_slides-{{$index}}">
                                                                <div class="row">
                                                                    <div class="col-xl-12 col-sm-6">
                                                                        <div class="form-group">
                                                                            <label for="FourthTabSlideTitle-{{$index}}">Fourth
                                                                                Tab Slide
                                                                                Title:</label>
                                                                            <input type="text"
                                                                                id="fourth_tab_slide_title-{{$index}}"
                                                                                name="fourth_tab_slide_title-{{$index}}"
                                                                                class="form-control" required
                                                                                value="{{ old('fourth_tab_slide_title', $layoutFourthSlide['title'] ?? '')}}">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-xl-12 col-sm-6">
                                                                        <div class="form-group">
                                                                            <label for="FourthTabSlideDescription-{{$index}}"
                                                                                class="form-label">Fourth Tab Slide
                                                                                Description:</label>
                                                                            <textarea rows="5"
                                                                                id="fourth_tab_slide_description-{{$index}}"
                                                                                name="fourth_tab_slide_description-{{$index}}"
                                                                                required
                                                                                class="form-control">{{ old('fourth_tab_slide_description', $layoutFourthSlide['description'] ?? '')}}</textarea>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-xl-12 col-sm-6">
                                                                        <div class="form-group">
                                                                            <label
                                                                                for="layout_fourth_tab_slide_image-{{$index}}">Fourth
                                                                                Tab Slide Image: (*Dimension -
                                                                                387px X
                                                                                491px)</label>
                                                                            <div
                                                                                id="layout_fourth_tab_slide_image-repeater-{{$index}}">
                                                                                <div class="image-input-wrapper"
                                                                                    style="margin-top: 10px;">
                                                                                    <div class="image-preview"
                                                                                        onclick="document.getElementById('layout_fourth_tab_slide_image-{{$index}}').click();">

                                                                                        @if (isset($layoutFourthSlide['image']) && !empty($layoutFourthSlide['image']))
                                                                                            <img id="layout_fourth_tab_slide_image-preview-{{$index}}"
                                                                                                src="{{ isset($layoutFourthSlide['image']) ? asset($layoutFourthSlide['image']) : '' }}"
                                                                                                alt="Image Preview"
                                                                                                style="max-width: 200px; display: {{ isset($layoutFourthSlide['image']) ? 'block' : 'none' }};" />
                                                                                        @else
                                                                                            <img id="layout_fourth_tab_slide_image-preview-{{$index}}"
                                                                                                src="" alt="Image Preview"
                                                                                                style="max-width: 200px; display:none;" />
                                                                                        @endif

                                                                                    </div><br>
                                                                                    <label
                                                                                        for="layout_fourth_tab_slide_image-{{$index}}"
                                                                                        class="custom-file-upload">
                                                                                        <i class="fas fa-cloud-upload-alt"></i>
                                                                                        Choose
                                                                                        Image
                                                                                    </label>
                                                                                    <input
                                                                                        id="layout_fourth_tab_slide_image-{{$index}}"
                                                                                        class="file_input" type="file"
                                                                                        name="layout_fourth_tab_slide_image-{{$index}}"
                                                                                        accept=".png, .jpg, .jpeg, .webp"
                                                                                        onchange="previewLayoutFourthTabSlideImage(this, {{$index}}, 387, 491, 'The Slide image must be 387px x 491px.')" />
                                                                                    <div
                                                                                        id="layout_fourth_tab_slide_image-preview-container-{{$index}}">
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <button type="button" class="btn btn-danger remove-slide"
                                                                    onclick="removeLayoutFourthTabSlide(this)">Remove</button>
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <div class="border-box fourth_tab_slides" id="fourth_tab_slides-0">
                                                            <div class="row">
                                                                <div class="col-xl-12 col-sm-6">
                                                                    <div class="form-group">
                                                                        <label for="FourthTabSlideTitle-0">Fourth
                                                                            Tab Slide
                                                                            Title:</label>
                                                                        <input type="text" id="fourth_tab_slide_title-0"
                                                                            name="fourth_tab_slide_title-0"
                                                                            class="form-control" required value="">
                                                                    </div>
                                                                </div>
                                                                <div class="col-xl-12 col-sm-6">
                                                                    <div class="form-group">
                                                                        <label for="FourthTabSlideDescription-0"
                                                                            class="form-label">Fourth Tab Slide
                                                                            Description:</label>
                                                                        <textarea rows="5"
                                                                            id="fourth_tab_slide_description-0"
                                                                            name="fourth_tab_slide_description-0" required
                                                                            class="form-control"></textarea>
                                                                    </div>
                                                                </div>
                                                                <div class="col-xl-12 col-sm-6">
                                                                    <div class="form-group">
                                                                        <label for="layout_fourth_tab_slide_image-0">Fourth
                                                                            Tab Slide Image: (*Dimension -
                                                                            387px X
                                                                            491px)</label>
                                                                        <div id="layout_fourth_tab_slide_image-repeater-0">
                                                                            <div class="image-input-wrapper"
                                                                                style="margin-top: 10px;">
                                                                                <div class="image-preview"
                                                                                    onclick="document.getElementById('layout_fourth_tab_slide_image-0').click();">

                                                                                    <img id="layout_fourth_tab_slide_image-preview-0"
                                                                                        src="" alt="Image Preview"
                                                                                        style="max-width: 200px; display: none;" />
                                                                                </div><br>
                                                                                <label for="layout_fourth_tab_slide_image-0"
                                                                                    class="custom-file-upload">
                                                                                    <i class="fas fa-cloud-upload-alt"></i>
                                                                                    Choose
                                                                                    Image
                                                                                </label>
                                                                                <input id="layout_fourth_tab_slide_image-0"
                                                                                    class="file_input" type="file"
                                                                                    name="layout_fourth_tab_slide_image-0"
                                                                                    multiple
                                                                                    accept=".png, .jpg, .jpeg, .webp"
                                                                                    onchange="previewLayoutFourthTabSlideImage(this, 0, 387, 491, 'The Slide image must be 387px x 491px.')" />
                                                                                <div
                                                                                    id="layout_fourth_tab_slide_image-preview-container-0">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <button type="button" class="btn btn-danger remove-slide"
                                                                onclick="removeLayoutFourthTabSlide(this)">Remove</button>
                                                        </div>

                                                    @endif
                                                </div>
                                                <button type="button" class="btn btn-success"
                                                    id="add-new-fourth-tab-slide">Add New</button><br /><br />
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Payment Section-->
                                    <label for="Payment Section">Payment Section:</label>
                                    <div class="border-box">
                                        <div class="row">
                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="payment_section_bg_image">Payment
                                                        Section Background Image: </label><br />
                                                    <label>(*Dimension - 1920px X 984px)</label><br />

                                                    <div id="payment_section_bg_image-repeater-8">
                                                        <div class="image-input-wrapper" style="margin-top: 10px;">
                                                            <div class="image-preview"
                                                                onclick="document.getElementById('payment_section_bg_image').click();">

                                                                @if (isset($paymentSections->payment_section_bg_image) && !empty($paymentSections->payment_section_bg_image))
                                                                    <img id="payment_section_bg_image-preview-8"
                                                                        src="{{ isset($paymentSections->payment_section_bg_image) ? asset($paymentSections->payment_section_bg_image) : '' }}"
                                                                        alt="Image Preview"
                                                                        style="max-width: 200px; display: {{ isset($paymentSections->payment_section_bg_image) ? 'block' : 'none' }};" />
                                                                @else
                                                                    <img id="payment_section_bg_image-preview-8" src=""
                                                                        alt="Image Preview"
                                                                        style="max-width: 200px; display:none;" />
                                                                @endif

                                                            </div><br>
                                                            <label for="payment_section_bg_image"
                                                                class="custom-file-upload">
                                                                <i class="fas fa-cloud-upload-alt"></i>
                                                                Choose Image
                                                            </label>
                                                            <input id="payment_section_bg_image" class="file_input"
                                                                type="file" name="payment_section_bg_image"
                                                                accept=".png, .jpg, .jpeg, .webp, .svg"
                                                                onchange="previewPaymentSectionBGImage(this, 8, 1920, 984, 'The BG image must be 1920px x 984px.')">
                                                            <div id="payment_section_bg_image-preview-container">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <input type="hidden" id="existing_payment_section_bg_image"
                                                        value="{{ $paymentSections->payment_section_bg_image }}">
                                                </div>
                                            </div>

                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="PaymentSectionTitle">Payment Section Title:</label>
                                                    <input type="text" id="payment_section_title"
                                                        name="payment_section_title" class="form-control" required
                                                        value="{{ old('payment_section_title', $paymentSections['title'] ?? '')}}">
                                                </div>
                                            </div>

                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="PaymentSectionSubTitle">Payment Section Sub
                                                        Title:</label>
                                                    <input type="text" id="payment_section_sub_title"
                                                        name="payment_section_sub_title" class="form-control" required
                                                        value="{{ old('payment_section_sub_title', $paymentSections['sub_title'] ?? '')}}">
                                                </div>
                                            </div>

                                            <div class="col-xl-12 col-sm-6">
                                                <label for="PaymentSlides" class="form-label">Payment Slides:</label>
                                                <div id="payment_slides_container">
                                                    @php
                                                        $paymentSlides = json_decode($paymentSections->slides, true);                                                       
                                                    @endphp
                                                    @foreach ($paymentSlides as $index => $paymentSlide)
                                                                                                        <div class="border-box payment_slides"
                                                                                                            id="payment_slides-{{ $index }}">
                                                                                                            <div class="row">
                                                                                                                <div class="border-box">
                                                                                                                    <div class="col-xl-12 col-sm-6">
                                                                                                                        <div class="form-group">
                                                                                                                            <label for="PaymentSectionDescription"
                                                                                                                                class="form-label">Payment Slide
                                                                                                                                Description:</label>
                                                                                                                            <textarea rows="5"
                                                                                                                                id="payment_slide_description-{{ $index }}"
                                                                                                                                name="payment_slide_description-{{ $index }}" required
                                                                                                                                class="form-control">{{ old('payment_slide_description', $paymentSlide['description'] ?? '') }}</textarea>
                                                                                                                        </div>
                                                                                                                    </div>
                                                                                                                </div>

                                                                                                                <div id="payment_slides_columns-{{ $index }}">
                                                                                                                    @php
                                                                                                                        $paymentTitles = $paymentSlide['titles'];
                                                                                                                        $paymentImages = $paymentSlide['images'];
                                                                                                                    @endphp
                                                                                                                    @foreach ($paymentTitles as $innerIndex => $paymentTitle)
                                                                                                                        <div class="border-box payment_columns"
                                                                                                                            id="payment_columns-{{ $innerIndex }}">
                                                                                                                            <div class="row">
                                                                                                                                <div class="col-xl-12 col-sm-6">
                                                                                                                                    <div class="form-group">
                                                                                                                                        <label
                                                                                                                                            for="PaymentSlideTitle-{{$index}}-{{ $innerIndex }}">Payment
                                                                                                                                            Slide Title:</label>
                                                                                                                                        <input type="text"
                                                                                                                                            id="payment_slide_title-{{$index}}-{{ $innerIndex }}"
                                                                                                                                            name="payment_slide_title-{{$index}}-{{ $innerIndex }}"
                                                                                                                                            class="form-control" required
                                                                                                                                            value="{{ old('payment_slide_title', $paymentTitles[$innerIndex] ?? '') }}">
                                                                                                                                    </div>
                                                                                                                                </div>
                                                                                                                                <div class="col-xl-12 col-sm-6">
                                                                                                                                    <div class="form-group">
                                                                                                                                        <label
                                                                                                                                            for="payment_slide_image-{{$index}}-{{ $innerIndex }}">Payment
                                                                                                                                            Slide Image: </label>
                                                                                                                                        <div
                                                                                                                                            id="payment_slide_image-repeater-{{$index}}-{{ $innerIndex }}">
                                                                                                                                            <div class="image-input-wrapper"
                                                                                                                                                style="margin-top: 10px;">
                                                                                                                                                <div class="image-preview"
                                                                                                                                                    onclick="document.getElementById('payment_slide_image-{{$index}}-{{ $innerIndex }}').click();">

                                                                                                                                                    @if (isset($paymentImages[$innerIndex]) && !empty($paymentImages[$innerIndex]))
                                                                                                                                                        <img id="payment_slide_image-preview-{{$index}}-{{ $innerIndex }}"
                                                                                                                                                            src="{{ isset($paymentImages[$innerIndex]) ? asset($paymentImages[$innerIndex]) : '' }}"
                                                                                                                                                            alt="Image Preview"
                                                                                                                                                            style="max-width: 200px; display: {{ isset($paymentImages[$innerIndex]) ? 'block' : 'none' }};" />
                                                                                                                                                    @else
                                                                                                                                                        <img id="payment_slide_image-preview-{{$index}}-{{ $innerIndex }}"
                                                                                                                                                            src=""
                                                                                                                                                            alt="Image Preview"
                                                                                                                                                            style="max-width: 200px; display:none;" />
                                                                                                                                                    @endif

                                                                                                                                                </div><br>
                                                                                                                                                <label
                                                                                                                                                    for="payment_slide_image-{{$index}}-{{ $innerIndex }}"
                                                                                                                                                    class="custom-file-upload">
                                                                                                                                                    <i
                                                                                                                                                        class="fas fa-cloud-upload-alt"></i>
                                                                                                                                                    Choose Image
                                                                                                                                                </label>
                                                                                                                                                <input
                                                                                                                                                    id="payment_slide_image-{{$index}}-{{ $innerIndex }}"
                                                                                                                                                    class="file_input"
                                                                                                                                                    type="file"
                                                                                                                                                    name="payment_slide_image-{{$index}}-{{ $innerIndex }}"
                                                                                                                                                    multiple accept=".svg"
                                                                                                                                                    onchange="previewDynamicPaymentSlideImage(this, {{$index}}, {{ $innerIndex }})">
                                                                                                                                                <div
                                                                                                                                                    id="payment_slide_image-preview-container-{{$index}}-{{$innerIndex}}">
                                                                                                                                                </div>
                                                                                                                                            </div>
                                                                                                                                        </div>
                                                                                                                                    </div>
                                                                                                                                </div>
                                                                                                                            </div>
                                                                                                                            <button type="button"
                                                                                                                                class="btn btn-danger remove-slide"
                                                                                                                                onclick="removePaymentColumn(this)">Remove
                                                                                                                                Column</button>
                                                                                                                        </div>
                                                                                                                    @endforeach
                                                                                                                </div>

                                                                                                                <button type="button"
                                                                                                                    class="btn btn-success add-new-payment-column"
                                                                                                                    data-slide-index="{{ $index }}">Add New
                                                                                                                    Column</button><br /><br />

                                                                                                            </div>
                                                                                                            <br /><button type="button" class="btn btn-danger remove-slide"
                                                                                                                onclick="removePaymentSlide(this)">Remove Slide</button>
                                                                                                        </div>
                                                    @endforeach
                                                </div>
                                                <button type="button" class="btn btn-success"
                                                    id="add-new-payment-slide">Add New Slide</button><br /><br />
                                            </div>

                                        </div>
                                    </div>

                                    <!-- Property Location Section-->
                                    <label for="Property Location Section">Property Location Section:</label>
                                    <div class="border-box">
                                        <div class="row">
                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="PropertyLocationSectionTitle">Property Location Section
                                                        Title:</label>
                                                    <input type="text" id="property_location_section_title"
                                                        name="property_location_section_title" class="form-control"
                                                        required
                                                        value="{{ old('property_location_section_title', $locationSections['title'] ?? '')}}">
                                                </div>
                                            </div>
                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="PropertyLocation" class="form-label">Property
                                                        Location:</label>
                                                    <textarea rows="5" id="property_location" name="property_location"
                                                        required
                                                        class="form-control">{{ old('property_location', $locationSections['property_location'] ?? '')}}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Construction Updates Section-->
                                    <label for="Construction Updates Section">Construction Updates Section:</label>
                                    <div class="border-box">
                                        <div class="row">
                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="ConstructionUpdatesSectionTitle">Construction Updates
                                                        Section
                                                        Title:</label>
                                                    <input type="text" id="construction_updates_section_title"
                                                        name="construction_updates_section_title" class="form-control"
                                                        required
                                                        value="{{ old('construction_updates_section_title', $constructionSections['title'] ?? '')}}">
                                                </div>
                                            </div>
                                            <div class="col-xl-6 col-sm-6">
                                                <div class="form-group">
                                                    <label for="ConstructionUpdatesPlace">Construction Updates
                                                        Place:</label>
                                                    <input type="text" id="construction_updates_place"
                                                        name="construction_updates_place" class="form-control" required
                                                        value="{{ old('construction_updates_place', $constructionSections['place'] ?? '')}}">
                                                </div>
                                            </div>
                                            <div class="col-xl-6 col-sm-6">
                                                <div class="form-group">
                                                    <label for="ConstructionUpdatesPrice">Construction Updates
                                                        Price:</label>
                                                    <input type="text" id="construction_updates_price"
                                                        name="construction_updates_price" class="form-control" required
                                                        value="{{ old('construction_updates_price', $constructionSections['price'] ?? '')}}">
                                                </div>
                                            </div>
                                            <div class="col-xl-6 col-sm-6">
                                                <div class="form-group">
                                                    <label for="ConstructionUpdatesYear">Construction Updates
                                                        Year:</label>
                                                    <input type="text" id="construction_updates_year"
                                                        name="construction_updates_year" class="form-control" required
                                                        value="{{ old('construction_updates_year', $constructionSections['year'] ?? '')}}">
                                                </div>
                                            </div>
                                            <div class="col-xl-6 col-sm-6">
                                                <div class="form-group">
                                                    <label for="ConstructionUpdatesAvailability">Construction Updates
                                                        Availability:</label>
                                                    <input type="text" id="construction_updates_availability"
                                                        name="construction_updates_availability" class="form-control"
                                                        required
                                                        value="{{ old('construction_updates_availability', $constructionSections['availablity'] ?? '')}}">
                                                </div>
                                            </div>
                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="ConstructionUpdatesDescription"
                                                        class="form-label">Construction Updates Description:</label>
                                                    <textarea rows="5" id="construction_updates_description"
                                                        name="construction_updates_description" required
                                                        class="form-control">{{ old('construction_updates_description', $constructionSections['description'] ?? '')}}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!--Last Image Section-->
                                    <label for="Last Section Image">Last Section Image:</label>
                                    <div class="border-box">
                                        <div class="row">
                                            <div class="col-xl-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="last_section_image">Last Section Image
                                                        Image: (*Dimension -
                                                        1602px X
                                                        668px)</label>
                                                    <div id="last_section_image-repeater-6">
                                                        <div class="image-input-wrapper" style="margin-top: 10px;">
                                                            <div class="image-preview"
                                                                onclick="document.getElementById('last_section_image').click();">

                                                                @if (isset($collections->last_image) && !empty($collections->last_image))
                                                                    <img id="last_section_image-preview-6"
                                                                        src="{{ isset($collections->last_image) ? asset($collections->last_image) : '' }}"
                                                                        alt="Image Preview"
                                                                        style="max-width: 200px; display: {{ isset($collections->last_image) ? 'block' : 'none' }};" />
                                                                @else
                                                                    <img id="last_section_image-preview-6" src=""
                                                                        alt="Image Preview"
                                                                        style="max-width: 200px; display:none;" />
                                                                @endif

                                                            </div><br>
                                                            <label for="last_section_image" class="custom-file-upload">
                                                                <i class="fas fa-cloud-upload-alt"></i>
                                                                Choose
                                                                Image
                                                            </label>
                                                            <input id="last_section_image" class="file_input"
                                                                type="file" name="last_section_image" accept=".png"
                                                                onchange="previewLastSectionImage(this, 6, 1602, 668, 'The image must be 1602px x 668px.')" />
                                                            <div id="last_section_image-preview-container-6">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <input type="hidden" id="existing_collection_last_section_image"
                                                        value="{{ $collections->last_image }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <button class="btn btn-primary" type="submit">Update</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>

<script>
    document.getElementById('property_name').addEventListener('input', function () {
        var title = this.value;
        var slug = title.toLowerCase()
            .replace(/[^a-z0-9\s-]/g, '')
            .replace(/\s+/g, '-')
            .replace(/-+/g, '-');

        document.getElementById('slug').value = slug;
    });

    // Function to preview the image
    function previewCustomImage(input, previewId, requiredWidth, requiredHeight, errorMsg) {
        if (input.files && input.files[0]) {
            const file = input.files[0];
            const img = new Image();
            const reader = new FileReader();
            const objectURL = URL.createObjectURL(file);

            // Save the current (old) image source
            const preview = document.getElementById(previewId);
            const oldImageSrc = preview.src;

            img.onload = function () {
                // Validate image dimensions
                if (img.width !== requiredWidth || img.height !== requiredHeight) {
                    alert(errorMsg);
                    // Revert to the old image
                    preview.src = oldImageSrc;
                    input.value = ""; // Reset the file input
                } else {
                    // Display the new image preview
                    reader.onload = function (e) {
                        preview.src = e.target.result;
                        preview.style.display = "block";
                    };
                    reader.readAsDataURL(file);
                }
                URL.revokeObjectURL(objectURL); // Clean up
            };

            img.onerror = function () {
                alert("Invalid image file.");
                // Revert to the old image
                preview.src = oldImageSrc;
                input.value = ""; // Reset the file input
                URL.revokeObjectURL(objectURL);
            };

            img.src = objectURL;
        }
    }

    function previewImage(input, index, requiredWidth, requiredHeight, errorMsg) {
        previewCustomImage(input, `preview-${index}`, requiredWidth, requiredHeight, errorMsg);
    }

    function previewAmenityImage(input, index, requiredWidth, requiredHeight, errorMsg) {
        previewCustomImage(input, `amenity-image-preview-${index}`, requiredWidth, requiredHeight, errorMsg);
    }

    function previewLivingImage(input, index, requiredWidth, requiredHeight, errorMsg) {
        previewCustomImage(input, `living-image-preview-${index}`, requiredWidth, requiredHeight, errorMsg);
    }

    function previewFeaturesImage(input, index, requiredWidth, requiredHeight, errorMsg) {
        previewCustomImage(input, `salient_features_slide_image-preview-${index}`, requiredWidth, requiredHeight, errorMsg);
    }

    function previewFeaturesThumbImage(input, index, requiredWidth, requiredHeight, errorMsg) {
        previewCustomImage(input, `salient_features_thumb_slide_image-preview-${index}`, requiredWidth, requiredHeight, errorMsg);
    }

    function previewLayoutFirstTabSlideImage(input, index, requiredWidth, requiredHeight, errorMsg) {
        previewCustomImage(input, `layout_first_tab_slide_image-preview-${index}`, requiredWidth, requiredHeight, errorMsg);
    }

    function previewLayoutSecondTabSlideImage(input, index, requiredWidth, requiredHeight, errorMsg) {
        previewCustomImage(input, `layout_second_tab_slide_image-preview-${index}`, requiredWidth, requiredHeight, errorMsg);
    }

    function previewLayoutThirdTabSlideImage(input, index, requiredWidth, requiredHeight, errorMsg) {
        previewCustomImage(input, `layout_third_tab_slide_image-preview-${index}`, requiredWidth, requiredHeight, errorMsg);
    }

    function previewLayoutFourthTabSlideImage(input, index, requiredWidth, requiredHeight, errorMsg) {
        previewCustomImage(input, `layout_fourth_tab_slide_image-preview-${index}`, requiredWidth, requiredHeight, errorMsg);
    }

    function previewLastSectionImage(input, index, requiredWidth, requiredHeight, errorMsg) {
        previewCustomImage(input, `last_section_image-preview-${index}`, requiredWidth, requiredHeight, errorMsg);
    }

    function previewPaymentSectionBGImage(input, index, requiredWidth, requiredHeight, errorMsg) {
        previewCustomImage(input, `payment_section_bg_image-preview-${index}`, requiredWidth, requiredHeight, errorMsg);
    }


    function previewPaymentSlideImage(input, index) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function (e) {
                const preview = document.getElementById(`payment_slide_image-preview-${index}`);
                preview.src = e.target.result;
                preview.style.display = 'block';
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    function previewDynamicPaymentSlideImage(input, slideIndex, columnIndex) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function (e) {
                const previewId = `payment_slide_image-preview-${slideIndex}-${columnIndex}`;
                const preview = document.getElementById(previewId);

                if (preview) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                } else {
                    console.error(`Preview element with ID ${previewId} not found.`);
                }
            };
            reader.readAsDataURL(input.files[0]);
        }
    }



    // Function to preview the pdf
    function previewPDF(input, index) {
        var file = input.files[0];
        var previewContainer = document.getElementById('pdf-preview-' + index);

        if (file && file.type === 'application/pdf') {
            var fileURL = URL.createObjectURL(file);
            previewContainer.src = fileURL;
        } else {
            previewContainer.src = "";
            alert('Please select a valid PDF file.');
        }
    }

    //Amenities Remove slide
    function removeAmenitySlide(button) {
        button.closest('.amenity-slide-section').remove();
    }

    // Living Spaces Remove slide
    function removeLivingSlide(button) {
        button.closest('.living-spaces-slide-section').remove();
    }

    //Features Slide Remove slide
    function removeFeatureSlide(button) {
        button.closest('.salient-features-slide-section').remove();
    }

    // Features Thumb Slide Remove slide
    function removeFeatureThumbSlide(button) {
        button.closest('.salient-features-thumb-slide-section').remove();
    }

    // Layout First Tab Slides Remove slide
    function removeLayoutFirstTabSlide(button) {
        button.closest('.first_tab_slides').remove();
    }

    // Layout Second Tab Slides Remove slide
    function removeLayoutSecondTabSlide(button) {
        button.closest('.second_tab_slides').remove();
    }

    // Layout Third Tab Slides Remove slide
    function removeLayoutThirdTabSlide(button) {
        button.closest('.third_tab_slides').remove();
    }

    // Layout Fourth Tab Slides Remove slide
    function removeLayoutFourthTabSlide(button) {
        button.closest('.fourth_tab_slides').remove();
    }

    // Payment Slides Remove slide
    function removePaymentSlide(button) {
        button.closest('.payment_slides').remove();
    }

    // Payment Slides Remove column
    function removePaymentColumn(button) {
        button.closest('.payment_columns').remove();
    }


</script>

<script>

    jQuery(document).ready(function ($) {

        // Amenities Slides
        let AmenityslideIndex = {{ isset($amenitiesSlides) && count($amenitiesSlides) > 0 ? count($amenitiesSlides) : 1 }};

        // Add new slide
        document.getElementById('add-new-amenity').addEventListener('click', function () {
            const slideContainer = document.getElementById('slide-container');
            const newSlide = document.createElement('div');
            newSlide.className = 'border-box amenity-slide-section';
            newSlide.id = `amenity-slide-${AmenityslideIndex}`;
            newSlide.innerHTML = `
        <div class="row">
                                                <div class="col-xl-12 col-sm-6">
                                                    <div class="form-group">
                                                        <label for="amenity_title-${AmenityslideIndex}">Amenity Title:</label>
                                                        <input type="text" id="amenity_title-${AmenityslideIndex}" name="amenity_title-${AmenityslideIndex}"
                                                            class="form-control" required>
                                                    </div>
                                                </div>
                                                <div class="col-xl-6 col-sm-6">
                                                    <div class="form-group">
                                                        <label for="amenity_image-${AmenityslideIndex}">Amenity Image: (*Dimension - 700px X
                                                            602px)</label>
                                                        <div id="amenity-image-repeater-${AmenityslideIndex}">
                                                            <div class="image-input-wrapper" style="margin-top: 10px;">
                                                                <div class="image-preview"
                                                                    onclick="document.getElementById('amenity_image-${AmenityslideIndex}').click();">

                                                                    <img id="amenity-image-preview-${AmenityslideIndex}"
                                                                        src=""
                                                                        alt="Image Preview"
                                                                        style="max-width: 200px; display: none;" />
                                                                </div><br>
                                                                <label for="amenity_image-${AmenityslideIndex}" class="custom-file-upload">
                                                                    <i class="fas fa-cloud-upload-alt"></i> Choose
                                                                    Image
                                                                </label>
                                                                <input id="amenity_image-${AmenityslideIndex}" class="file_input" type="file"
                                                                    name="amenity_image-${AmenityslideIndex}" accept=".png, .jpg, .jpeg, .webp"
                                                                    onchange="previewAmenityImage(this, ${AmenityslideIndex}, 700, 602, 'The Amenity image must be 700px x 602px.')" />
                                                                <div id="amenity-image-preview-container-${AmenityslideIndex}"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-danger remove-slide"
                                            onclick="removeAmenitySlide(this)">Remove</button>
    `;

            slideContainer.appendChild(newSlide);
            addAmenitiesValidation(AmenityslideIndex);
            AmenityslideIndex++;

            function addAmenitiesValidation(index) {
                // Card Title Validation
                $(`#amenity_title-${index}`).rules("add", {
                    required: true,
                    messages: {
                        required: "Please enter Amenity Title"
                    }
                });

                $(`#amenity_image-${index}`).rules("add", {
                    required: function () {
                        const previewSrc = $(`#amenity-image-preview-${index}`).attr('src');
                        return !previewSrc || previewSrc.trim() == '';
                    },
                    messages: {
                        required: "Please upload an Amenity image."
                    }
                });
            }
        });


        // Living Spaces Slides
        let LivingslideIndex = {{ isset($livingSlides) && count($livingSlides) > 0 ? count($livingSlides) : 1 }};

        // Add new slide
        document.getElementById('add-new-living').addEventListener('click', function () {
            const slideContainer = document.getElementById('living-spaces-slide-container');
            const newSlide = document.createElement('div');
            newSlide.className = 'border-box living-spaces-slide-section';
            newSlide.id = `living-slide-${LivingslideIndex}`;
            newSlide.innerHTML = `
                                       <div class="row">
                                                    <div class="col-xl-12 col-sm-6">
                                                        <div class="form-group">
                                                            <label for="living_spaces_slide_title-${LivingslideIndex}">Living
                                                                Spaces Slide
                                                                Title:</label>
                                                            <input type="text" id="living_spaces_slide_title-${LivingslideIndex}"
                                                                name="living_spaces_slide_title-${LivingslideIndex}" class="form-control"
                                                                required>
                                                        </div>
                                                    </div>

                                                    <div class="col-xl-12 col-sm-6">
                                                        <div class="form-group">
                                                            <label for="living_spaces_description-${LivingslideIndex}"
                                                                class="form-label">Living Spaces Slide
                                                                Description:</label>
                                                            <textarea rows="5" id="living_spaces_slide_description-${LivingslideIndex}"
                                                                    name="living_spaces_slide_description-${LivingslideIndex}" required
                                                            class="form-control"></textarea>
                                                        </div>
                                                    </div>

                                                    <div class="col-xl-6 col-sm-6">
                                                        <div class="form-group">
                                                            <label for="living_spaces_image-${LivingslideIndex}">Living Spaces
                                                                Slide
                                                                Image: (*Dimension -
                                                                826px X
                                                                680px)</label>
                                                            <div id="living-image-repeater-${LivingslideIndex}">
                                                                <div class="image-input-wrapper"
                                                                    style="margin-top: 10px;">
                                                                    <div class="image-preview"
                                                                        onclick="document.getElementById('living_spaces_image-${LivingslideIndex}').click();">

                                                                        <img id="living-image-preview-${LivingslideIndex}"
                                                                            src=""
                                                                            alt="Image Preview"
                                                                            style="max-width: 200px; display: none;" />
                                                                    </div><br>
                                                                    <label for="living_spaces_image-${LivingslideIndex}"
                                                                        class="custom-file-upload">
                                                                        <i class="fas fa-cloud-upload-alt"></i> Choose
                                                                        Image
                                                                    </label>
                                                                    <input id="living_spaces_image-${LivingslideIndex}"
                                                                        class="file_input" type="file"
                                                                        name="living_spaces_image-${LivingslideIndex}" 
                                                                        accept=".png, .jpg, .jpeg, .webp"
                                                                        onchange="previewLivingImage(this, ${LivingslideIndex}, 826, 680, 'The Living Spaces Slide image must be 826px x 680px.')" />
                                                                    <div id="living-image-preview-container-${LivingslideIndex}">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="button" class="btn btn-danger remove-slide"
                                                    onclick="removeLivingSlide(this)">Remove</button>
`;

            slideContainer.appendChild(newSlide);
            addLivingSectionValidation(LivingslideIndex);
            LivingslideIndex++;

            function addLivingSectionValidation(index) {
                // Card Title Validation
                $(`#living_spaces_slide_title-${index}`).rules("add", {
                    required: true,
                    messages: {
                        required: "Please enter Slide Title"
                    }
                });

                $(`#living_spaces_slide_description-${index}`).rules("add", {
                    required: true,
                    messages: {
                        required: "Please enter Slide Description"
                    }
                });

                $(`#living_spaces_image-${index}`).rules("add", {
                    required: function () {
                        const previewSrc = $(`#living-image-preview-${index}`).attr('src');
                        return !previewSrc || previewSrc.trim() == '';
                    },
                    messages: {
                        required: "Please upload Slide image."
                    }
                });
            }
        });




        // Salient Features Section Slides
        let FeaturesslideIndex = {{ isset($featuresSlides) && count($featuresSlides) > 0 ? count($featuresSlides) : 1 }};

        // Add new slide
        document.getElementById('add-new-feature').addEventListener('click', function () {
            const FeatureslideContainer = document.getElementById('salient-features-slide-container');
            const FeaturenewSlide = document.createElement('div');
            FeaturenewSlide.className = 'border-box salient-features-slide-section';
            FeaturenewSlide.id = `salient-features-slide-section-${FeaturesslideIndex}`;
            FeaturenewSlide.innerHTML = `
        <div class="row">
        <div class="col-xl-12 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="SalientFeaturesSlideTitle-${FeaturesslideIndex}">Salient
                                                                    Feature:</label>
                                                                <input type="text" id="salient_feature-${FeaturesslideIndex}"
                                                                    name="salient_feature-${FeaturesslideIndex}" class="form-control" required>
                                                            </div>
                                                        </div>                                                        
                                                    <div class="col-xl-12 col-sm-6">
                                                        <div class="form-group">
                                                            <label for="salient_features_slide_image-${FeaturesslideIndex}">Slide Image: (*Dimension -
                                                                864px X
                                                                855px)</label>
                                                            <div id="salient_features_slide_image-repeater-${FeaturesslideIndex}">
                                                                <div class="image-input-wrapper"
                                                                    style="margin-top: 10px;">
                                                                    <div class="image-preview"
                                                                        onclick="document.getElementById('salient_features_slide_image-${FeaturesslideIndex}').click();">

                                                                        <img id="salient_features_slide_image-preview-${FeaturesslideIndex}"
                                                                            src=""
                                                                            alt="Image Preview"
                                                                            style="max-width: 200px; display:none;" />
                                                                    </div><br>
                                                                    <label for="salient_features_slide_image-${FeaturesslideIndex}"
                                                                        class="custom-file-upload">
                                                                        <i class="fas fa-cloud-upload-alt"></i> Choose
                                                                        Image
                                                                    </label>
                                                                    <input id="salient_features_slide_image-${FeaturesslideIndex}" class="file_input"
                                                                        type="file" name="salient_features_slide_image-${FeaturesslideIndex}"
                                                                        accept=".png, .jpg, .jpeg, .webp"
                                                                        onchange="previewFeaturesImage(this, ${FeaturesslideIndex}, 864, 855, 'The Feature Slide image must be 864px x 855px.')" />
                                                                    <div id="salient_features_slide_image-preview-container-${FeaturesslideIndex}"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="button" class="btn btn-danger remove-slide"
                                                    onclick="removeFeatureSlide(this)">Remove</button>
    `;

            FeatureslideContainer.appendChild(FeaturenewSlide);
            addFeaturesSectionSlideValidation(FeaturesslideIndex);
            FeaturesslideIndex++;

            function addFeaturesSectionSlideValidation(index) {
                // Card Title Validation
                $(`#salient_feature-${index}`).rules("add", {
                    required: true,
                    messages: {
                        required: "Please enter Feature"
                    }
                });

                $(`#salient_features_slide_image-${index}`).rules("add", {
                    required: function () {
                        const previewSrc = $(`#salient_features_slide_image-preview-${index}`).attr('src');
                        return !previewSrc || previewSrc.trim() == '';
                    },
                    messages: {
                        required: "Please upload Feature Slide image."
                    }
                });
            }
        });


        // Salient Features Section Thumb Slides
        let FeaturesThumbslideIndex = {{ isset($featuresSlideThumbs) && count($featuresSlideThumbs) > 0 ? count($featuresSlideThumbs) : 1 }};

        // Add new slide
        document.getElementById('add-new-feature-thumb').addEventListener('click', function () {
            const FeatureThumbslideContainer = document.getElementById('salient-features-thumb-slide-container');
            const FeatureThumbnewSlide = document.createElement('div');
            FeatureThumbnewSlide.className = 'border-box salient-features-thumb-slide-section';
            FeatureThumbnewSlide.id = `salient-features-thumb-slide-section-${FeaturesThumbslideIndex}`;
            FeatureThumbnewSlide.innerHTML = `
         <div class="row">
         <div class="col-xl-12 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="SalientFeatureDescription-${FeaturesThumbslideIndex}"
                                                                    class="form-label">Salient Feature
                                                                    Description:</label>
                                                                <textarea rows="5" id="salient_feature_description-${FeaturesThumbslideIndex}"
                                                                    name="salient_feature_description-${FeaturesThumbslideIndex}" required
                                                                    class="form-control"></textarea>
                                                            </div>
                                                        </div>
                                                    <div class="col-xl-12 col-sm-6">
                                                        <div class="form-group">
                                                            <label for="salient_features_thumb_slide_image-${FeaturesThumbslideIndex}">Slide Thumb Image: (*Dimension -
                                                                864px X
                                                                855px)</label>
                                                            <div id="salient_features_thumb_slide_image-repeater-${FeaturesThumbslideIndex}">
                                                                <div class="image-input-wrapper"
                                                                    style="margin-top: 10px;">
                                                                    <div class="image-preview"
                                                                        onclick="document.getElementById('salient_features_thumb_slide_image-${FeaturesThumbslideIndex}').click();">

                                                                        <img id="salient_features_thumb_slide_image-preview-${FeaturesThumbslideIndex}"
                                                                            src=""
                                                                            alt="Image Preview"
                                                                            style="max-width: 200px; display: none;" />
                                                                    </div><br>
                                                                    <label for="salient_features_thumb_slide_image-${FeaturesThumbslideIndex}"
                                                                        class="custom-file-upload">
                                                                        <i class="fas fa-cloud-upload-alt"></i> Choose
                                                                        Image
                                                                    </label>
                                                                    <input id="salient_features_thumb_slide_image-${FeaturesThumbslideIndex}" class="file_input"
                                                                        type="file" name="salient_features_thumb_slide_image-${FeaturesThumbslideIndex}" 
                                                                        accept=".png, .jpg, .jpeg, .webp"
                                                                        onchange="previewFeaturesThumbImage(this, ${FeaturesThumbslideIndex}, 864, 855, 'The Feature Slide Thumb image must be 864px x 855px.')" />
                                                                    <div id="salient_features_thumb_slide_image-preview-container-${FeaturesThumbslideIndex}"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="button" class="btn btn-danger remove-slide"
                                                    onclick="removeFeatureThumbSlide(this)">Remove</button>
    `;

            FeatureThumbslideContainer.appendChild(FeatureThumbnewSlide);
            addFeaturesSectionThumbsValidation(FeaturesThumbslideIndex);
            FeaturesThumbslideIndex++;

            function addFeaturesSectionThumbsValidation(index) {
                // Card Title Validation
                $(`#salient_feature_description-${index}`).rules("add", {
                    required: true,
                    messages: {
                        required: "Please enter Feature Description"
                    }
                });

                $(`#salient_features_thumb_slide_image-${index}`).rules("add", {
                    required: function () {
                        const previewSrc = $(`#salient_features_thumb_slide_image-preview-${index}`).attr('src');
                        return !previewSrc || previewSrc.trim() == '';
                    },
                    messages: {
                        required: "Please upload Feature Slide Thumb image."
                    }
                });
            }
        });




        // Layout First Tab Slides
        let LayoutFirstTabslideIndex = {{ isset($layoutFirstSlides) && count($layoutFirstSlides) > 0 ? count($layoutFirstSlides) : 1 }};

        // Add new slide
        document.getElementById('add-new-first-tab-slide').addEventListener('click', function () {
            const LayoutFirstTabslideContainer = document.getElementById('first_tab_slide_container');
            const LayoutFirstTabnewSlide = document.createElement('div');
            LayoutFirstTabnewSlide.className = 'border-box first_tab_slides';
            LayoutFirstTabnewSlide.id = `first_tab_slides-${LayoutFirstTabslideIndex}`;
            LayoutFirstTabnewSlide.innerHTML = `
     <div class="row">
                                                            <div class="col-xl-12 col-sm-6">
                                                                <div class="form-group">
                                                                    <label for="FirstTabSlideTitle-${LayoutFirstTabslideIndex}">First Tab Slide
                                                                        Title:</label>
                                                                    <input type="text" id="first_tab_slide_title-${LayoutFirstTabslideIndex}"
                                                                        name="first_tab_slide_title-${LayoutFirstTabslideIndex}"
                                                                        class="form-control" required>
                                                                </div>
                                                            </div>
                                                            <div class="col-xl-12 col-sm-6">
                                                                <div class="form-group">
                                                                    <label for="FirstTabSlideDescription-${LayoutFirstTabslideIndex}"
                                                                        class="form-label">First Tab Slide
                                                                        Description:</label>
                                                                    <textarea rows="5" id="first_tab_slide_description-${LayoutFirstTabslideIndex}"
                                                                        name="first_tab_slide_description-${LayoutFirstTabslideIndex}" required
                                                                        class="form-control"></textarea>
                                                                </div>
                                                            </div>
                                                            <div class="col-xl-12 col-sm-6">
                                                                <div class="form-group">
                                                                    <label for="layout_first_tab_slide_image-${LayoutFirstTabslideIndex}">First
                                                                        Tab Slide Image: (*Dimension -
                                                                        387px X 491px)</label>
                                                                    <div id="layout_first_tab_slide_image-repeater-${LayoutFirstTabslideIndex}">
                                                                        <div class="image-input-wrapper"
                                                                            style="margin-top: 10px;">
                                                                            <div class="image-preview"
                                                                                onclick="document.getElementById('layout_first_tab_slide_image-${LayoutFirstTabslideIndex}').click();">

                                                                                <img id="layout_first_tab_slide_image-preview-${LayoutFirstTabslideIndex}"
                                                                                    src=""
                                                                                    alt="Image Preview"
                                                                                    style="max-width: 200px; display: none;" />
                                                                            </div><br>
                                                                            <label for="layout_first_tab_slide_image-${LayoutFirstTabslideIndex}"
                                                                                class="custom-file-upload">
                                                                                <i class="fas fa-cloud-upload-alt"></i>
                                                                                Choose
                                                                                Image
                                                                            </label>
                                                                            <input id="layout_first_tab_slide_image-${LayoutFirstTabslideIndex}"
                                                                                class="file_input" type="file"
                                                                                name="layout_first_tab_slide_image-${LayoutFirstTabslideIndex}"
                                                                                accept=".png, .jpg, .jpeg, .webp"
                                                                                onchange="previewLayoutFirstTabSlideImage(this, ${LayoutFirstTabslideIndex}, 387, 491, 'The Slide image must be 387px x 491px.')" />
                                                                            <div
                                                                                id="layout_first_tab_slide_image-preview-container-${LayoutFirstTabslideIndex}">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <button type="button" class="btn btn-danger remove-slide"
                                                            onclick="removeLayoutFirstTabSlide(this)">Remove</button>
`;

            LayoutFirstTabslideContainer.appendChild(LayoutFirstTabnewSlide);
            addLayoutFirstTabslideValidation(LayoutFirstTabslideIndex);
            LayoutFirstTabslideIndex++;

            function addLayoutFirstTabslideValidation(index) {
                // Card Title Validation
                $(`#first_tab_slide_title-${index}`).rules("add", {
                    required: true,
                    messages: {
                        required: "Please enter First Tab Slide Title"
                    }
                });

                $(`#first_tab_slide_description-${index}`).rules("add", {
                    required: true,
                    messages: {
                        required: "Please enter First Tab Slide Description"
                    }
                });

                $(`#layout_first_tab_slide_image-${index}`).rules("add", {
                    required: function () {
                        const previewSrc = $(`#layout_first_tab_slide_image-preview-${index}`).attr('src');
                        return !previewSrc || previewSrc.trim() == '';
                    },
                    messages: {
                        required: "Please upload First Tab Slide image."
                    }
                });
            }
        });



        // Layout Second Tab Slides
        let LayoutSecondTabslideIndex = {{ isset($layoutSecondSlides) && count($layoutSecondSlides) > 0 ? count($layoutSecondSlides) : 1 }};

        // Add new slide
        document.getElementById('add-new-second-tab-slide').addEventListener('click', function () {
            const LayoutSecondTabslideContainer = document.getElementById('second_tab_slide_container');
            const LayoutSecondTabnewSlide = document.createElement('div');
            LayoutSecondTabnewSlide.className = 'border-box second_tab_slides';
            LayoutSecondTabnewSlide.id = `second_tab_slides-${LayoutSecondTabslideIndex}`;
            LayoutSecondTabnewSlide.innerHTML = `
                    <div class="row">
                                                        <div class="col-xl-12 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="SecondTabSlideTitle-${LayoutSecondTabslideIndex}">Second Tab Slide
                                                                    Title:</label>
                                                                <input type="text" id="second_tab_slide_title-${LayoutSecondTabslideIndex}"
                                                                    name="second_tab_slide_title-${LayoutSecondTabslideIndex}"
                                                                    class="form-control" required>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-12 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="SecondTabSlideDescription-${LayoutSecondTabslideIndex}"
                                                                    class="form-label">Second Tab Slide
                                                                    Description:</label>
                                                                <textarea rows="5" id="second_tab_slide_description-${LayoutSecondTabslideIndex}"
                                                                    name="second_tab_slide_description-${LayoutSecondTabslideIndex}" required
                                                                    class="form-control"></textarea>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-12 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="layout_second_tab_slide_image-${LayoutSecondTabslideIndex}">Second
                                                                    Tab Slide Image: (*Dimension -
                                                                     387px X 491px)</label>
                                                                <div id="layout_second_tab_slide_image-repeater-${LayoutSecondTabslideIndex}">
                                                                    <div class="image-input-wrapper"
                                                                        style="margin-top: 10px;">
                                                                        <div class="image-preview"
                                                                            onclick="document.getElementById('layout_second_tab_slide_image-${LayoutSecondTabslideIndex}').click();">

                                                                            <img id="layout_second_tab_slide_image-preview-${LayoutSecondTabslideIndex}"
                                                                                src=""
                                                                                alt="Image Preview"
                                                                                style="max-width: 200px; display: none;" />
                                                                        </div><br>
                                                                        <label for="layout_second_tab_slide_image-${LayoutSecondTabslideIndex}"
                                                                            class="custom-file-upload">
                                                                            <i class="fas fa-cloud-upload-alt"></i>
                                                                            Choose
                                                                            Image
                                                                        </label>
                                                                        <input id="layout_second_tab_slide_image-${LayoutSecondTabslideIndex}"
                                                                            class="file_input" type="file"
                                                                            name="layout_second_tab_slide_image-${LayoutSecondTabslideIndex}" 
                                                                            accept=".png, .jpg, .jpeg, .webp"
                                                                            onchange="previewLayoutSecondTabSlideImage(this, ${LayoutSecondTabslideIndex}, 387, 491, 'The Slide image must be 387px x 491px.')" />
                                                                        <div
                                                                            id="layout_second_tab_slide_image-preview-container-${LayoutSecondTabslideIndex}">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <button type="button" class="btn btn-danger remove-slide"
                                                        onclick="removeLayoutSecondTabSlide(this)">Remove</button>
`;

            LayoutSecondTabslideContainer.appendChild(LayoutSecondTabnewSlide);
            addLayoutSecondTabslideValidation(LayoutSecondTabslideIndex);
            LayoutSecondTabslideIndex++;

            function addLayoutSecondTabslideValidation(index) {
                // Card Title Validation
                $(`#second_tab_slide_title-${index}`).rules("add", {
                    required: true,
                    messages: {
                        required: "Please enter Second Tab Slide Title"
                    }
                });

                $(`#second_tab_slide_description-${index}`).rules("add", {
                    required: true,
                    messages: {
                        required: "Please enter Second Tab Slide Description"
                    }
                });

                $(`#layout_second_tab_slide_image-${index}`).rules("add", {
                    required: function () {
                        const previewSrc = $(`#layout_second_tab_slide_image-preview-${index}`).attr('src');
                        return !previewSrc || previewSrc.trim() == '';
                    },
                    messages: {
                        required: "Please upload Second Tab Slide image."
                    }
                });
            }
        });



        // Layout Third Tab Slides
        let LayoutThirdTabslideIndex = {{ isset($layoutThirdSlides) && count($layoutThirdSlides) > 0 ? count($layoutThirdSlides) : 1 }};

        // Add new slide
        document.getElementById('add-new-third-tab-slide').addEventListener('click', function () {
            const LayoutThirdTabslideContainer = document.getElementById('third_tab_slide_container');
            const LayoutThirdTabnewSlide = document.createElement('div');
            LayoutThirdTabnewSlide.className = 'border-box third_tab_slides';
            LayoutThirdTabnewSlide.id = `third_tab_slides-${LayoutThirdTabslideIndex}`;
            LayoutThirdTabnewSlide.innerHTML = `
                    <div class="row">
                                                        <div class="col-xl-12 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="ThirdTabSlideTitle-${LayoutThirdTabslideIndex}">Third Tab Slide
                                                                    Title:</label>
                                                                <input type="text" id="third_tab_slide_title-${LayoutThirdTabslideIndex}"
                                                                    name="third_tab_slide_title-${LayoutThirdTabslideIndex}"
                                                                    class="form-control" required>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-12 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="ThirdTabSlideDescription-${LayoutThirdTabslideIndex}"
                                                                    class="form-label">Third Tab Slide
                                                                    Description:</label>
                                                                <textarea rows="5" id="third_tab_slide_description-${LayoutThirdTabslideIndex}"
                                                                    name="third_tab_slide_description-${LayoutThirdTabslideIndex}" required
                                                                    class="form-control"></textarea>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-12 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="layout_third_tab_slide_image-${LayoutThirdTabslideIndex}">Third
                                                                    Tab Slide Image: (*Dimension -
                                                                     387px X 491px)</label>
                                                                <div id="layout_third_tab_slide_image-repeater-${LayoutThirdTabslideIndex}">
                                                                    <div class="image-input-wrapper"
                                                                        style="margin-top: 10px;">
                                                                        <div class="image-preview"
                                                                            onclick="document.getElementById('layout_third_tab_slide_image-${LayoutThirdTabslideIndex}').click();">

                                                                            <img id="layout_third_tab_slide_image-preview-${LayoutThirdTabslideIndex}"
                                                                                src=""
                                                                                alt="Image Preview"
                                                                                style="max-width: 200px; display: none;" />
                                                                        </div><br>
                                                                        <label for="layout_third_tab_slide_image-${LayoutThirdTabslideIndex}"
                                                                            class="custom-file-upload">
                                                                            <i class="fas fa-cloud-upload-alt"></i>
                                                                            Choose
                                                                            Image
                                                                        </label>
                                                                        <input id="layout_third_tab_slide_image-${LayoutThirdTabslideIndex}"
                                                                            class="file_input" type="file"
                                                                            name="layout_third_tab_slide_image-${LayoutThirdTabslideIndex}" 
                                                                            accept=".png, .jpg, .jpeg, .webp"
                                                                            onchange="previewLayoutThirdTabSlideImage(this, ${LayoutThirdTabslideIndex}, 387, 491, 'The Slide image must be 387px x 491px.')" />
                                                                        <div
                                                                            id="layout_third_tab_slide_image-preview-container-${LayoutThirdTabslideIndex}">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <button type="button" class="btn btn-danger remove-slide"
                                                        onclick="removeLayoutThirdTabSlide(this)">Remove</button>
`;

            LayoutThirdTabslideContainer.appendChild(LayoutThirdTabnewSlide);
            addLayoutThirdTabslideValidation(LayoutThirdTabslideIndex);
            LayoutThirdTabslideIndex++;

            // Layout Third Tab Slide Validation
            function addLayoutThirdTabslideValidation(index) {
                // Card Title Validation
                $(`#third_tab_slide_title-${index}`).rules("add", {
                    required: true,
                    messages: {
                        required: "Please enter Third Tab Slide Title"
                    }
                });

                $(`#third_tab_slide_description-${index}`).rules("add", {
                    required: true,
                    messages: {
                        required: "Please enter Third Tab Slide Description"
                    }
                });

                $(`#layout_third_tab_slide_image-${index}`).rules("add", {
                    required: function () {
                        const previewSrc = $(`#layout_third_tab_slide_image-preview-${index}`).attr('src');
                        return !previewSrc || previewSrc.trim() == '';
                    },
                    messages: {
                        required: "Please upload Third Tab Slide image."
                    }
                });
            }
        });



        // Layout Fourth Tab Slides
        let LayoutFourthTabslideIndex = {{ isset($layoutFourthSlides) && count($layoutFourthSlides) > 0 ? count($layoutFourthSlides) : 1 }};

        // Add new slide
        document.getElementById('add-new-fourth-tab-slide').addEventListener('click', function () {
            const LayoutFourthTabslideContainer = document.getElementById('fourth_tab_slide_container');
            const LayoutFourthTabnewSlide = document.createElement('div');
            LayoutFourthTabnewSlide.className = 'border-box fourth_tab_slides';
            LayoutFourthTabnewSlide.id = `fourth_tab_slides-${LayoutFourthTabslideIndex}`;
            LayoutFourthTabnewSlide.innerHTML = `
                    <div class="row">
                                                        <div class="col-xl-12 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="FourthTabSlideTitle-${LayoutFourthTabslideIndex}">Fourth Tab Slide
                                                                    Title:</label>
                                                                <input type="text" id="fourth_tab_slide_title-${LayoutFourthTabslideIndex}"
                                                                    name="fourth_tab_slide_title-${LayoutFourthTabslideIndex}"
                                                                    class="form-control" required>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-12 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="FourthTabSlideDescription-${LayoutFourthTabslideIndex}"
                                                                    class="form-label">Fourth Tab Slide
                                                                    Description:</label>
                                                                <textarea rows="5" id="fourth_tab_slide_description-${LayoutFourthTabslideIndex}"
                                                                    name="fourth_tab_slide_description-${LayoutFourthTabslideIndex}" required
                                                                    class="form-control"></textarea>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-12 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="layout_fourth_tab_slide_image-${LayoutFourthTabslideIndex}">Fourth
                                                                    Tab Slide Image: (*Dimension -
                                                                    387px X 491px)</label>
                                                                <div id="layout_fourth_tab_slide_image-repeater-${LayoutFourthTabslideIndex}">
                                                                    <div class="image-input-wrapper"
                                                                        style="margin-top: 10px;">
                                                                        <div class="image-preview"
                                                                            onclick="document.getElementById('layout_fourth_tab_slide_image-${LayoutFourthTabslideIndex}').click();">

                                                                            <img id="layout_fourth_tab_slide_image-preview-${LayoutFourthTabslideIndex}"
                                                                                src=""
                                                                                alt="Image Preview"
                                                                                style="max-width: 200px; display: none;" />
                                                                        </div><br>
                                                                        <label for="layout_fourth_tab_slide_image-${LayoutFourthTabslideIndex}"
                                                                            class="custom-file-upload">
                                                                            <i class="fas fa-cloud-upload-alt"></i>
                                                                            Choose
                                                                            Image
                                                                        </label>
                                                                        <input id="layout_fourth_tab_slide_image-${LayoutFourthTabslideIndex}"
                                                                            class="file_input" type="file"
                                                                            name="layout_fourth_tab_slide_image-${LayoutFourthTabslideIndex}"
                                                                            accept=".png, .jpg, .jpeg, .webp"
                                                                            onchange="previewLayoutFourthTabSlideImage(this, ${LayoutFourthTabslideIndex}, 387, 491, 'The Slide image must be 387px x 491px.')" />
                                                                        <div
                                                                            id="layout_fourth_tab_slide_image-preview-container-${LayoutFourthTabslideIndex}">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <button type="button" class="btn btn-danger remove-slide"
                                                        onclick="removeLayoutFourthTabSlide(this)">Remove</button>
`;

            LayoutFourthTabslideContainer.appendChild(LayoutFourthTabnewSlide);
            addLayoutFourthTabslideValidation(LayoutFourthTabslideIndex);
            LayoutFourthTabslideIndex++;

            // Layout Fourth Tab Slide Validation
            function addLayoutFourthTabslideValidation(index) {
                // Card Title Validation
                $(`#fourth_tab_slide_title-${index}`).rules("add", {
                    required: true,
                    messages: {
                        required: "Please enter Fourth Tab Slide Title"
                    }
                });

                $(`#fourth_tab_slide_description-${index}`).rules("add", {
                    required: true,
                    messages: {
                        required: "Please enter Fourth Tab Slide Description"
                    }
                });

                $(`#layout_fourth_tab_slide_image-${index}`).rules("add", {
                    required: function () {
                        const previewSrc = $(`#layout_fourth_tab_slide_image-preview-${index}`).attr('src');
                        return !previewSrc || previewSrc.trim() == '';
                    },
                    messages: {
                        required: "Please upload Fourth Tab Slide image."
                    }
                });
            }
        });



        let PaymentslideIndex = {{ isset($paymentSlides) && count($paymentSlides) > 0 ? count($paymentSlides) : 1 }};

        document.getElementById('add-new-payment-slide').addEventListener('click', function () {
            const PaymentslideContainer = document.getElementById('payment_slides_container');
            const PaymentnewSlide = document.createElement('div');
            PaymentnewSlide.className = 'border-box payment_slides';
            PaymentnewSlide.id = `payment_slides-${PaymentslideIndex}`;
            PaymentnewSlide.innerHTML = `
        <div class="row">
            <div class="border-box">
                <div class="col-xl-12 col-sm-6">
                    <div class="form-group">
                        <label for="PaymentSectionDescription-${PaymentslideIndex}" class="form-label">Payment Slide Description:</label>
                        <textarea rows="5" id="payment_slide_description-${PaymentslideIndex}"
                            name="payment_slide_description-${PaymentslideIndex}" required class="form-control"></textarea>
                    </div>
                </div>
            </div>
            <div id="payment_slides_columns-${PaymentslideIndex}">
                <div class="border-box payment_columns" id="payment_columns-${PaymentslideIndex}">
                    <div class="row">
                        <div class="col-xl-12 col-sm-6">
                            <div class="form-group">
                                <label for="PaymentSlideTitle-${PaymentslideIndex}">Payment Slide Title:</label>
                                <input type="text" id="payment_slide_title-${PaymentslideIndex}" name="payment_slide_title-${PaymentslideIndex}"
                                    class="form-control" required>
                            </div>
                        </div>
                        <div class="col-xl-12 col-sm-6">
                            <div class="form-group">
                                <label for="payment_slide_image-${PaymentslideIndex}">Payment Slide Image: </label>
                                <div id="payment_slide_image-repeater-${PaymentslideIndex}">
                                    <div class="image-input-wrapper" style="margin-top: 10px;">
                                        <div class="image-preview"
                                            onclick="document.getElementById('payment_slide_image-${PaymentslideIndex}').click();">
                                            <img id="payment_slide_image-preview-${PaymentslideIndex}"
                                                src="" alt="Image Preview" style="max-width: 200px; display: none;">
                                        </div><br>
                                        <label for="payment_slide_image-${PaymentslideIndex}" class="custom-file-upload">
                                            <i class="fas fa-cloud-upload-alt"></i> Choose Image
                                        </label>
                                        <input id="payment_slide_image-${PaymentslideIndex}" class="file_input" type="file"
                                            name="payment_slide_image-${PaymentslideIndex}" accept=".png, .jpg, .jpeg, .webp, .svg"
                                            onchange="previewPaymentSlideImage(this, ${PaymentslideIndex})">
                                        <div id="payment_slide_image-preview-container-${PaymentslideIndex}"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-danger remove-slide" onclick="removePaymentColumn(this)">Remove Column</button>
                </div>
            </div>

            <button type="button" class="btn btn-success add-new-payment-column" data-slide-index="${PaymentslideIndex}">Add New Column</button><br /><br />
        </div>
        <br /><button type="button" class="btn btn-danger remove-slide" onclick="removePaymentSlide(this)">Remove Slide</button>
    `;

            PaymentslideContainer.appendChild(PaymentnewSlide);
            addPaymentslideValidation(PaymentslideIndex);
            PaymentslideIndex++;

            // Payment Slide Validation
            function addPaymentslideValidation(index) {
                // Validate Payment Slide Description
                $(`#payment_slide_description-${index}`).rules("add", {
                    required: true,
                    messages: {
                        required: "Please enter Slide Description",
                    },
                });

                // Validate Payment Slide Title
                $(`#payment_slide_title-${index}`).rules("add", {
                    required: true,
                    messages: {
                        required: "Please enter Payment Slide Title",
                    },
                });

                // Validate Payment Slide Image
                $(`#payment_slide_image-${index}`).rules("add", {
                    required: function () {
                        const previewSrc = $(`#payment_slide_image-preview-${index}`).attr("src");
                        return !previewSrc || previewSrc.trim() === "";
                    },
                    messages: {
                        required: "Please upload an image",
                    },
                });
            }

        });

        document.getElementById('payment_slides_container').addEventListener('click', function (event) {
            if (event.target.classList.contains('add-new-payment-column')) {
                const slideIndex = event.target.getAttribute('data-slide-index');
                addPaymentColumn(slideIndex);
            }
        });




        function addPaymentColumn(slideIndex) {
            const PaymentslideColumnContainer = document.getElementById(`payment_slides_columns-${slideIndex}`);
            const PaymentnewSlideColumn = document.createElement('div');
            PaymentnewSlideColumn.className = 'border-box payment_columns';
            const newColumnIndex = PaymentslideColumnContainer.children.length; // Ensure unique indexes within the slide

            PaymentnewSlideColumn.id = `payment_columns-${slideIndex}-${newColumnIndex}`;
            PaymentnewSlideColumn.innerHTML = `
        <div class="row">
            <div class="col-xl-12 col-sm-6">
                <div class="form-group">
                    <label for="PaymentSlideTitle-${slideIndex}-${newColumnIndex}">Payment Slide Title:</label>
                    <input type="text"
                        id="payment_slide_title-${slideIndex}-${newColumnIndex}"
                        name="payment_slide_title-${slideIndex}-${newColumnIndex}"
                        class="form-control" required>
                </div>
            </div>
            <div class="col-xl-12 col-sm-6">
                <div class="form-group">
                    <label for="payment_slide_image-${slideIndex}-${newColumnIndex}">Payment Slide Image:</label>
                    <div class="image-input-wrapper" style="margin-top: 10px;">
                        <div class="image-preview" onclick="document.getElementById('payment_slide_image-${slideIndex}-${newColumnIndex}').click();">
                            <img id="payment_slide_image-preview-${slideIndex}-${newColumnIndex}" src="" alt="Image Preview" style="max-width: 200px; display: none;" />
                        </div><br>
                        <label for="payment_slide_image-${slideIndex}-${newColumnIndex}" class="custom-file-upload">
                            <i class="fas fa-cloud-upload-alt"></i> Choose Image
                        </label>
                        <input id="payment_slide_image-${slideIndex}-${newColumnIndex}" class="file_input" type="file" name="payment_slide_image-${slideIndex}-${newColumnIndex}" accept=".svg" onchange="previewDynamicPaymentSlideImage(this, ${slideIndex}, ${newColumnIndex})" />
                        <div id="payment_slide_image-preview-container-${slideIndex}-${newColumnIndex}"></div>
                    </div>
                </div>
            </div>
        </div>
        <button type="button" class="btn btn-danger remove-slide" onclick="removePaymentColumn(this)">Remove Column</button>
    `;

            PaymentslideColumnContainer.appendChild(PaymentnewSlideColumn);

            // Add validation for the new column fields
            $(`#payment_slide_title-${slideIndex}-${newColumnIndex}`).rules("add", {
                required: true,
                messages: {
                    required: "Please enter Payment Slide Title",
                },
            });

            $(`#payment_slide_image-${slideIndex}-${newColumnIndex}`).rules("add", {
                required: function () {
                    const previewSrc = $(`#payment_slide_image-preview-${slideIndex}-${newColumnIndex}`).attr("src");
                    return !previewSrc || previewSrc.trim() === "";
                },
                messages: {
                    required: "Please upload an image",
                },
            });
        }





        $('#home_banner_section_form').validate({
            rules: {
                property_name: {
                    required: true
                },
                slug: {
                    required: true
                },
                banner_image: {
                    required: function () {
                        const existingBannerImage = $('#existing_collections_banner_image').val().trim();
                        return !existingBannerImage;
                    }
                },
                title: {
                    required: true
                },
                sub_title: {
                    required: true
                },
                left_image: {
                    required: function () {
                        const existingLeftImage = $('#existing_collection_about_left_image').val().trim();
                        return !existingLeftImage;
                    }
                },
                right_image: {
                    required: function () {
                        const existingRightImage = $('#existing_collection_about_right_image').val().trim();
                        return !existingRightImage;
                    }
                },
                second_section_description: {
                    required: true
                },
                brochure_pdf: {
                    required: function () {
                        const previewContainer = $(`#preview-container-3`);
                        const existingPreview = previewContainer.find('iframe').attr('src');
                        return !existingPreview || existingPreview.trim() === "";
                    }
                },
                walkthrough_link: {
                    required: true
                },
                amenity_section_title: {
                    required: true
                },
                amenity_section_description: {
                    required: true
                },
                salient_features_section_title: {
                    required: true
                },
                living_spaces_section_title: {
                    required: true
                },
                layouts_section_title: {
                    required: true
                },
                first_tab_title: {
                    required: true
                },
                second_tab_title: {
                    required: true
                },
                third_tab_title: {
                    required: true
                },
                fourth_tab_title: {
                    required: true
                },
                payment_section_bg_image: {
                    required: function () {
                        const existingPaymentSectionBgImage = $('#existing_payment_section_bg_image').val().trim();
                        return !existingPaymentSectionBgImage;
                    }
                },
                payment_section_title: {
                    required: true
                },
                payment_section_sub_title: {
                    required: true
                },
                property_location_section_title: {
                    required: true
                },
                property_location: {
                    required: true
                },
                construction_updates_section_title: {
                    required: true
                },
                construction_updates_place: {
                    required: true
                },
                construction_updates_price: {
                    required: true
                },
                construction_updates_year: {
                    required: true
                },
                construction_updates_availability: {
                    required: true
                },
                construction_updates_description: {
                    required: true
                },
                last_section_image: {
                    required: function () {
                        const existingLastSectionImage = $('#existing_collection_last_section_image').val().trim();
                        return !existingLastSectionImage;
                    }
                },
            },
            messages: {
                property_name: {
                    required: "Please enter Property Name"
                },
                slug: {
                    required: "Please enter Slug"
                },
                banner_image: {
                    required: "Please Choose a Banner Image"
                },
                title: {
                    required: "Please enter Section Title"
                },
                sub_title: {
                    required: "Please enter Section Sub Title"
                },
                left_image: {
                    required: "Please Choose an Image"
                },
                right_image: {
                    required: "Please Choose an Image"
                },
                second_section_description: {
                    required: "Please enter Section Description"
                },
                brochure_pdf: {
                    required: "Please choose Brochure Pdf"
                },
                walkthrough_link: {
                    required: "Please enter Walkthrough Link"
                },
                amenity_section_title: {
                    required: "Please enter Amenity Section Title"
                },
                amenity_section_description: {
                    required: "Please enter Amenity Section Description"
                },
                salient_features_section_title: {
                    required: "Please enter Feature Section Title"
                },
                living_spaces_section_title: {
                    required: "Please enter Living Spaces Section Title"
                },
                layouts_section_title: {
                    required: "Please enter Layout Section Title"
                },
                first_tab_title: {
                    required: "Please enter First Tab Title"
                },
                second_tab_title: {
                    required: "Please enter Second Tab Title"
                },
                third_tab_title: {
                    required: "Please enter Third Tab Title"
                },
                fourth_tab_title: {
                    required: "Please enter Fourth Tab Title"
                },
                payment_section_bg_image: {
                    required: "Please Choose an Image"
                },
                payment_section_title: {
                    required: "Please enter Payment Section Title"
                },
                payment_section_sub_title: {
                    required: "Please enter Payment Section Sub Title"
                },
                property_location_section_title: {
                    required: "Please enter Property Location Section Title"
                },
                property_location: {
                    required: "Please enter Property Location"
                },
                construction_updates_section_title: {
                    required: "Please enter Construction Updates Section Title"
                },
                construction_updates_place: {
                    required: "Please enter Place"
                },
                construction_updates_price: {
                    required: "Please enter Price"
                },
                construction_updates_year: {
                    required: "Please enter Year"
                },
                construction_updates_availability: {
                    required: "Please enter Availability"
                },
                construction_updates_description: {
                    required: "Please enter Description"
                },
                last_section_image: {
                    required: "Please choose an image"
                },
            },
            errorPlacement: function (error, element) {

                // var placement = $(element).attr("name");
                error.insertAfter(element);
            },
            submitHandler: function (form) {
                submitForm();
            }

        });

        // Amenities Section Validation
        function addAmenitiesValidation(index) {
            // Card Title Validation
            $(`#amenity_title-${index}`).rules("add", {
                required: true,
                messages: {
                    required: "Please enter Amenity Title"
                }
            });

            $(`#amenity_image-${index}`).rules("add", {
                required: function () {
                    const previewSrc = $(`#amenity-image-preview-${index}`).attr('src');
                    return !previewSrc || previewSrc.trim() == '';
                },
                messages: {
                    required: "Please upload an Amenity image."
                }
            });
        }

        // Living Section Validation
        function addLivingSectionValidation(index) {
            // Card Title Validation
            $(`#living_spaces_slide_title-${index}`).rules("add", {
                required: true,
                messages: {
                    required: "Please enter Slide Title"
                }
            });

            $(`#living_spaces_slide_description-${index}`).rules("add", {
                required: true,
                messages: {
                    required: "Please enter Slide Description"
                }
            });

            $(`#living_spaces_image-${index}`).rules("add", {
                required: function () {
                    const previewSrc = $(`#living-image-preview-${index}`).attr('src');
                    return !previewSrc || previewSrc.trim() == '';
                },
                messages: {
                    required: "Please upload Slide image."
                }
            });
        }

        // Features Section Slide Validation
        function addFeaturesSectionSlideValidation(index) {
            // Card Title Validation
            $(`#salient_feature-${index}`).rules("add", {
                required: true,
                messages: {
                    required: "Please enter Feature"
                }
            });

            $(`#salient_features_slide_image-${index}`).rules("add", {
                required: function () {
                    const previewSrc = $(`#salient_features_slide_image-preview-${index}`).attr('src');
                    return !previewSrc || previewSrc.trim() == '';
                },
                messages: {
                    required: "Please upload Feature Slide image."
                }
            });
        }

        // Features Section Slide Thumbs Validation
        function addFeaturesSectionThumbsValidation(index) {
            // Card Title Validation
            $(`#salient_feature_description-${index}`).rules("add", {
                required: true,
                messages: {
                    required: "Please enter Feature Description"
                }
            });

            $(`#salient_features_thumb_slide_image-${index}`).rules("add", {
                required: function () {
                    const previewSrc = $(`#salient_features_thumb_slide_image-preview-${index}`).attr('src');
                    return !previewSrc || previewSrc.trim() == '';
                },
                messages: {
                    required: "Please upload Feature Slide Thumb image."
                }
            });
        }

        // Layout First Tab Slide Validation
        function addLayoutFirstTabslideValidation(index) {
            // Card Title Validation
            $(`#first_tab_slide_title-${index}`).rules("add", {
                required: true,
                messages: {
                    required: "Please enter First Tab Slide Title"
                }
            });

            $(`#first_tab_slide_description-${index}`).rules("add", {
                required: true,
                messages: {
                    required: "Please enter First Tab Slide Description"
                }
            });

            $(`#layout_first_tab_slide_image-${index}`).rules("add", {
                required: function () {
                    const previewSrc = $(`#layout_first_tab_slide_image-preview-${index}`).attr('src');
                    return !previewSrc || previewSrc.trim() == '';
                },
                messages: {
                    required: "Please upload First Tab Slide image."
                }
            });
        }

        // Layout Second Tab Slide Validation
        function addLayoutSecondTabslideValidation(index) {
            // Card Title Validation
            $(`#second_tab_slide_title-${index}`).rules("add", {
                required: true,
                messages: {
                    required: "Please enter Second Tab Slide Title"
                }
            });

            $(`#second_tab_slide_description-${index}`).rules("add", {
                required: true,
                messages: {
                    required: "Please enter Second Tab Slide Description"
                }
            });

            $(`#layout_second_tab_slide_image-${index}`).rules("add", {
                required: function () {
                    const previewSrc = $(`#layout_second_tab_slide_image-preview-${index}`).attr('src');
                    return !previewSrc || previewSrc.trim() == '';
                },
                messages: {
                    required: "Please upload Second Tab Slide image."
                }
            });
        }

        // Layout Third Tab Slide Validation
        function addLayoutThirdTabslideValidation(index) {
            // Card Title Validation
            $(`#third_tab_slide_title-${index}`).rules("add", {
                required: true,
                messages: {
                    required: "Please enter Third Tab Slide Title"
                }
            });

            $(`#third_tab_slide_description-${index}`).rules("add", {
                required: true,
                messages: {
                    required: "Please enter Third Tab Slide Description"
                }
            });

            $(`#layout_third_tab_slide_image-${index}`).rules("add", {
                required: function () {
                    const previewSrc = $(`#layout_third_tab_slide_image-preview-${index}`).attr('src');
                    return !previewSrc || previewSrc.trim() == '';
                },
                messages: {
                    required: "Please upload Third Tab Slide image."
                }
            });
        }

        // Layout Fourth Tab Slide Validation
        function addLayoutFourthTabslideValidation(index) {
            // Card Title Validation
            $(`#fourth_tab_slide_title-${index}`).rules("add", {
                required: true,
                messages: {
                    required: "Please enter Fourth Tab Slide Title"
                }
            });

            $(`#fourth_tab_slide_description-${index}`).rules("add", {
                required: true,
                messages: {
                    required: "Please enter Fourth Tab Slide Description"
                }
            });

            $(`#layout_fourth_tab_slide_image-${index}`).rules("add", {
                required: function () {
                    const previewSrc = $(`#layout_fourth_tab_slide_image-preview-${index}`).attr('src');
                    return !previewSrc || previewSrc.trim() == '';
                },
                messages: {
                    required: "Please upload Fourth Tab Slide image."
                }
            });
        }

        // Payment Slide Validation
        function addPaymentslideValidation(index) {
            // Validate Payment Slide Description
            $(`#payment_slide_description-${index}`).rules("add", {
                required: true,
                messages: {
                    required: "Please enter Slide Description",
                },
            });

            // Validate Payment Slide Title
            $(`#payment_slide_title-${index}`).rules("add", {
                required: true,
                messages: {
                    required: "Please enter Payment Slide Title",
                },
            });

            // Validate Payment Slide Image
            $(`#payment_slide_image-${index}`).rules("add", {
                required: function () {
                    const previewSrc = $(`#payment_slide_image-preview-${index}`).attr("src");
                    return !previewSrc || previewSrc.trim() === "";
                },
                messages: {
                    required: "Please upload an image",
                },
            });
        }

        function addPaymentColumnValidation(slideIndex, columnIndex) {           

            $(`#payment_slide_title-${slideIndex}-${columnIndex}`).rules("add", {
                required: true,
                messages: {
                    required: "Please enter Payment Slide Title",
                },
            });

            $(`#payment_slide_image-${slideIndex}-${columnIndex}`).rules("add", {
                required: function () {
                    const previewSrc = $(`#payment_slide_image-preview-${slideIndex}-${columnIndex}`).attr("src");
                    return !previewSrc || previewSrc.trim() === "";
                },
                messages: {
                    required: "Please upload an image",
                },
            });
        }


        // Initialize validation for Amenities existing slides
        const existingAmenitiesSlideCount = {{ isset($amenitiesSlides) && count($amenitiesSlides) > 0 ? count($amenitiesSlides) : 1 }};
        for (let i = 0; i < existingAmenitiesSlideCount; i++) {
            addAmenitiesValidation(i);
        }

        // Initialize validation for Living Section existing slides
        const existingLivingSlideCount = {{ isset($livingSlides) && count($livingSlides) > 0 ? count($livingSlides) : 1 }};
        for (let i = 0; i < existingLivingSlideCount; i++) {
            addLivingSectionValidation(i);
        }

        // Initialize validation for Features Section existing slides
        const existingFeatureSlideCount = {{ isset($featuresSlides) && count($featuresSlides) > 0 ? count($featuresSlides) : 1 }};
        for (let i = 0; i < existingFeatureSlideCount; i++) {
            addFeaturesSectionSlideValidation(i);
        }

        // Initialize validation for Features Section Thumb existing slides
        const existingFeatureThumbSlideCount = {{ isset($featuresSlideThumbs) && count($featuresSlideThumbs) > 0 ? count($featuresSlideThumbs) : 1 }};
        for (let i = 0; i < existingFeatureThumbSlideCount; i++) {
            addFeaturesSectionThumbsValidation(i);
        }

        // Initialize validation for Layout First Tab existing slides
        const existingLayoutFirstTabSlideCount = {{ isset($layoutFirstSlides) && count($layoutFirstSlides) > 0 ? count($layoutFirstSlides) : 1 }};
        for (let i = 0; i < existingLayoutFirstTabSlideCount; i++) {
            addLayoutFirstTabslideValidation(i);
        }

        // Initialize validation for Layout Second Tab existing slides
        const existingLayoutSecondTabSlideCount = {{ isset($layoutSecondSlides) && count($layoutSecondSlides) > 0 ? count($layoutSecondSlides) : 1 }};
        for (let i = 0; i < existingLayoutSecondTabSlideCount; i++) {
            addLayoutSecondTabslideValidation(i);
        }

        // Initialize validation for Layout Third Tab existing slides
        const existingLayoutThirdTabSlideCount = {{ isset($layoutThirdSlides) && count($layoutThirdSlides) > 0 ? count($layoutThirdSlides) : 1 }};
        for (let i = 0; i < existingLayoutThirdTabSlideCount; i++) {
            addLayoutThirdTabslideValidation(i);
        }

        // Initialize validation for Layout Fourth Tab existing slides
        const existingLayoutFourthTabSlideCount = {{ isset($layoutFourthSlides) && count($layoutFourthSlides) > 0 ? count($layoutFourthSlides) : 1 }};
        for (let i = 0; i < existingLayoutFourthTabSlideCount; i++) {
            addLayoutFourthTabslideValidation(i);
        }

        // Initialize validation for Payment existing slides
        const existingPaymentSlideCount = {{ isset($paymentSlides) && count($paymentSlides) > 0 ? count($paymentSlides) : 1 }};
        for (let i = 0; i < existingPaymentSlideCount; i++) {
            addPaymentslideValidation(i);
        }

        // Initialize validation for Payment existing slides      
        for (let slideIndex = 0; slideIndex < existingPaymentSlideCount; slideIndex++) {
            // Get the container for columns in the current slide
            const columnContainer = document.getElementById(`payment_slides_columns-${slideIndex}`);

            if (columnContainer) {
                // Get all columns in the current slide
                const columns = columnContainer.querySelectorAll(".payment_columns");

                // Loop through each column in the current slide
                for (let columnIndex = 0; columnIndex < columns.length; columnIndex++) {
                    addPaymentColumnValidation(slideIndex, columnIndex); // Call validation function for each column
                }
            }
        }



        function submitForm() {
            var formData = new FormData($('#home_banner_section_form')[0]);

            // Add CSRF token to the form data
            formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

            // Add _method to simulate PUT request
            formData.append('_method', 'PUT');

            $.ajax({
                url: '{{ url('/collection-inner/page/update/' . $collections->id) }}',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                beforeSend: function () {
                    console.log('Submitting form...');
                },
                success: function (response) {
                    alert('Form submitted successfully.');
                },
                error: function (xhr, status, error) {
                    // Handling specific error scenarios (like validation)
                    if (xhr.status === 422) {  // Laravel's validation error status code
                        var errors = JSON.parse(xhr.responseText);
                        var errorMessages = "";
                        $.each(errors.errors, function (key, value) {
                            errorMessages += value + "\n";
                        });
                        alert('Validation errors:\n' + errorMessages);
                    } else {
                        alert('An error occurred: ' + xhr.responseText);
                    }
                },
                complete: function () {
                    console.log('Form submission completed.');
                }
            });
        }



    });


</script>

@include('Partials.footer')