@php
    $homePageSetting = $homePageSetting ?? null;
@endphp

<div class="row g-4">
    <nav>
        <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
            <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Hero Section</button>
            <button class="nav-link" id="nav-shop-by-tab" data-bs-toggle="tab" data-bs-target="#nav-shop-by" type="button" role="tab" aria-controls="nav-shop-by" aria-selected="false">Shop by Categories Section</button>
            <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Shop by Mukhi Section</button>
            <button class="nav-link" id="nav-why-tab" data-bs-toggle="tab" data-bs-target="#nav-why" type="button" role="tab" aria-controls="nav-why" aria-selected="false">Feature Products Section</button>
            <button class="nav-link" id="nav-cta-tab" data-bs-toggle="tab" data-bs-target="#nav-cta" type="button" role="tab" aria-controls="nav-cta" aria-selected="false">Why Choose Us</button>
            <button class="nav-link" id="nav-other-tab" data-bs-toggle="tab" data-bs-target="#nav-other" type="button" role="tab" aria-controls="nav-other" aria-selected="false">Story Section</button>
            <button class="nav-link" id="nav-collection-tab" data-bs-toggle="tab" data-bs-target="#nav-collection" type="button" role="tab" aria-controls="nav-collection" aria-selected="false">Collection Section</button>
            <button class="nav-link" id="nav-shop-now-tab" data-bs-toggle="tab" data-bs-target="#nav-shop-now" type="button" role="tab" aria-controls="nav-shop-now" aria-selected="false">Shop Now Section</button>
        </div>
    </nav>
    <div class="tab-content p-3 border bg-light" id="nav-tabContent">
        <div class="tab-pane fade active show" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
            <div class="col-12">
                <h4 class="border-bottom pb-2 mb-3">Hero Section</h4>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Hero Heading</label>
                        <input type="text" name="hero_heading" class="form-control" value="{{ old('hero_heading', $hero_section->title ?? '') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Hero Text</label>
                        <textarea name="hero_text" class="form-control" rows="3">{{ old('hero_text', $hero_section->description ?? '') }}</textarea>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">CTA Button Text</label>
                        <input type="text" name="hero_cta_button_text" class="form-control" value="{{ old('hero_cta_button_text', $hero_section->button ?? '') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">CTA Button Link</label>
                        <input type="text" name="hero_cta_button_link" class="form-control" value="{{ old('hero_cta_button_link', $hero_section->link ?? '') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Hero Banner</label>
                        <input type="hidden" name="existing_hero_banner" value="{{ $hero_section->image ?? null }}">
                        <input type="file" name="hero_banner" class="form-control">
                        @if(!empty($hero_section->image))
                            <img src="{{ asset('storage/'.$hero_section->image) }}" class="img-thumbnail mt-2" width="250">
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="nav-shop-by" role="tabpanel" aria-labelledby="nav-shop-by-tab">
            <div class="col-12">
                <h4 class="border-bottom pb-2 mb-3 mt-4">Shop by Categories </h4>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Title</label>
                        <input type="text" name="shop_categories_title" class="form-control" value="{{ old('shop_categories_title', $shop_categories->title ?? '') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Description</label>
                        <textarea name="shop_categories_description" class="form-control" rows="2">{{ old('shop_categories_description', $shop_categories->description ?? '') }}</textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
            <div class="col-12">
                <h4 class="border-bottom pb-2 mb-3 mt-4">Shop by Mukhi</h4>
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Title</label>
                        <input type="text" name="shop_by_category" class="form-control" value="{{ old('latest_section_heading', $shop_by_category->title ?? '') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Description</label>
                        <textarea name="shop_by_description" class="form-control" rows="2">{{ old('shop_by_description', $shop_by_category->description ?? '') }}</textarea>
                    </div>
                    <div class="col-md-4">
                         <label class="form-label">Category</label>
                         <select name="shop_by_category_id" class="form-select">
                             @foreach($categories as $category)
                                 <option value="{{ $category->id }}" {{ (isset($shop_by_category->category_id) && $shop_by_category->category_id == $category->id) ? 'selected' : '' }}>{{ $category->name }}</option>
                             @endforeach
                         </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="nav-why" role="tabpanel" aria-labelledby="nav-why-tab">
            <div class="col-12">
                <h4 class="border-bottom pb-2 mb-3 mt-4">Featured Products</h4>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Title</label>
                        <input type="text" name="featured_products_title" class="form-control" value="{{ old('featured_products_title', $featured_products->title ?? '') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Description</label>
                        <textarea name="featured_products_description" class="form-control" rows="2">{{ old('featured_products_description', $featured_products->description ?? '') }}</textarea>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="tab-pane fade" id="nav-cta" role="tabpanel" aria-labelledby="nav-cta-tab">
            <div class="col-12">
                <h4 class="border-bottom pb-2 mb-3 mt-4">Why Choose Us?</h4>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Title</label>
                        <input type="text" name="why_choose_us_title" class="form-control" value="{{ old('why_choose_us_title', $why_section_us->title ?? '') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Description</label>
                        <textarea name="why_choose_us_description" class="form-control" rows="2">{{ old('why_choose_us_description', $why_section_us->description ?? '') }}</textarea>
                    </div>
                    
                    <div class="col-md-12">
                        <label class="form-label">Sub Sections</label>                        
                        <div id="form-placeholder">
                            @if(isset($why_section_us->sections) && count($why_section_us->sections) > 0)
                                @foreach($why_section_us->sections as $index => $section)
                                    <div id="opt-row.{{ $index }}" class="form-group row mb-3">
                                        <div class="col-3">
                                            <input required type="text" class="form-control" id="opt-title_{{ $index }}" name="opt-title_{{ $index }}" placeholder="Title" value="{{ $section->title ?? '' }}">
                                        </div>
                                        <div class="col-3">
                                            <input required type="text" class="form-control" id="opt-description_{{ $index }}" name="opt-description_{{ $index }}" placeholder="Description" value="{{ $section->description ?? '' }}">
                                        </div>
                                        <div class="col-3">
                                            <input type="hidden" name="existing_opt-icon_{{ $index }}" value="{{ $section->image ?? '' }}">
                                            <input type="file" class="form-control" id="opt-icon_{{ $index }}" name="opt-icon_{{ $index }}" placeholder="Choose Icon">
                                            @if(!empty($section->image))
                                                <img src="{{ asset('storage/'.$section->image) }}" class="img-thumbnail mt-2" width="100">
                                            @endif
                                        </div>
                                        <div class="col-2">
                                            <button type="button" onclick="delRow({{ $index }})" class="btn btn-danger">Delete</button>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        <button id="btn-add" type="button" class="btn btn-primary mt-3">Add</button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="tab-pane fade" id="nav-other" role="tabpanel" aria-labelledby="nav-other-tab">
            <div class="col-12">
                <h4 class="border-bottom pb-2 mb-3 mt-4">Story Section</h4>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Title</label>
                        <input type="text" name="story_section_title" class="form-control" value="{{ old('story_section_title', $story_section->title ?? '') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Section Image</label>
                        <input type="hidden" name="existing_my_story" value="{{ $story_section->image ?? null }}">
                         <input type="file" name="my_story_section_image" class="form-control">
                        @if(!empty($story_section->image))
                            <img src="{{ asset('storage/'.$story_section->image) }}" class="img-thumbnail mt-2" width="200">
                        @endif
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Description</label>
                         <textarea id="story_section_description" name="story_section_description" class="form-control">{!! old('story_section_description', $story_section->description ?? '') !!}</textarea>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">CTA Button Text</label>
                        <input type="text" name="story_section_cta_button_text" class="form-control" value="{{ old('story_section_cta_button_text', $story_section->button ?? '') }}">
                    </div>
                      <div class="col-md-6">
                        <label class="form-label">CTA Button Link</label>
                        <input type="text" name="story_section_cta_button_link" class="form-control" value="{{ old('story_section_cta_button_link', $story_section->link ?? '') }}">
                    </div>
                     <div class="col-md-12">
                        <label class="form-label">Sub Sections</label>
                        <div id="form-story-placeholder">
                            @if(isset($story_section->sections) && count($story_section->sections) > 0)
                                @foreach($story_section->sections as $index => $section)
                                    <div id="story-row.{{ $index }}" class="form-group row mb-3">
                                        <div class="col-3">
                                            <input required type="text" class="form-control" id="story-title_{{ $index }}" name="story-title_{{ $index }}" placeholder="Title" value="{{ $section->title ?? '' }}">
                                        </div>
                                        <div class="col-3">
                                            <input required type="text" class="form-control" id="story-description_{{ $index }}" name="story-description_{{ $index }}" placeholder="Description" value="{{ $section->description ?? '' }}">
                                        </div>
                                        <div class="col-3">
                                            <input type="hidden" name="existing_story-icon_{{ $index }}" value="{{ $section->image ?? '' }}">
                                            <input type="file" class="form-control" id="story-icon_{{ $index }}" name="story-icon_{{ $index }}" placeholder="Choose Icon">
                                            @if(!empty($section->image))
                                                <img src="{{ asset('storage/'.$section->image) }}" class="img-thumbnail mt-2" width="100">
                                            @endif
                                        </div>
                                        <div class="col-2">
                                            <button type="button" onclick="delStoryRow({{ $index }})" class="btn btn-danger">Delete</button>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        <button id="btn-add-story" type="button" class="btn btn-primary mt-3">Add</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="nav-collection" role="tabpanel" aria-labelledby="nav-collection-tab">
            <div class="col-12">
                <h4 class="border-bottom pb-2 mb-3 mt-4">Our Collection</h4>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Title</label>
                        <input type="text" name="collection_section_title" class="form-control" value="{{ old('collection_section_title', $collection_section->title ?? '') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Description</label>
                        <textarea name="collection_section_description" class="form-control" rows="2">{{ old('collection_section_description', $collection_section->description ?? '') }}</textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="nav-shop-now" role="tabpanel" aria-labelledby="nav-shop-now-tab">
            <div class="col-12">
                <h4 class="border-bottom pb-2 mb-3 mt-4">Shop Now </h4>
                 <div class="row g-3">
                <div class="col-md-6">
                        <label class="form-label">Title</label>
                        <input type="text" name="shop_now_title" class="form-control" value="{{ old('shop_now_title', $shop_now_section->title ?? '') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Description</label>
                        <textarea name="shop_now_description" class="form-control" rows="2">{{ old('shop_now_description', $shop_now_section->description ?? '') }}</textarea>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">CTA Button Text</label>
                        <input type="text" name="shop_now_cta_button_text" class="form-control" value="{{ old('shop_now_cta_button_text', $shop_now_section->button ?? '') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">CTA Button Link</label>
                        <input type="text" name="shop_now_cta_button_link" class="form-control" value="{{ old('shop_now_cta_button_link', $shop_now_section->link ?? '') }}">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@push('scripts')
    <script>
        var count = {{ $why_sections_count ?? 0 }};
        var storyCount = {{ $story_sections_count ?? 0 }};
        
        function appendUserRow(id, user) {
            var html = '<div id="opt-row.' + id + '" class="form-group row mb-3">' +
                '<div class="col-3">' +
                '<input required type="text" class="form-control" id="opt-title_' + id + '" name="opt-title_' + id + '" placeholder="Title" value="' + (user.title || '') + '">' +
                '</div>' +
                '<div class="col-3">' +
                '<input required type="text" class="form-control" id="opt-description_' + id + '" name="opt-description_' + id + '" placeholder="Description" value="' + (user.description || '') + '">' +
                '</div>' +
                '<div class="col-3">' +
                '<input type="hidden" name="existing_opt-icon_' + id + '" value="' + (user.image || '') + '">' +
                '<input type="file" class="form-control" id="opt-icon_' + id + '" name="opt-icon_' + id + '" placeholder="Choose Icon">' +
                '</div>' +
                '<div class="col-2">' +
                '<button type="button" onclick="delRow(' + id + ')" class="btn btn-danger">Delete</button>' +
                '</div>' +
                '</div>';
            $("#form-placeholder").append(html);
        }

        function appendStoryRow(id, story) {
            var html = '<div id="story-row.' + id + '" class="form-group row mb-3">' +
                '<div class="col-3">' +
                '<input required type="text" class="form-control" id="story-title_' + id + '" name="story-title_' + id + '" placeholder="Title" value="' + (story.title || '') + '">' +
                '</div>' +
                '<div class="col-3">' +
                '<input required type="text" class="form-control" id="story-description_' + id + '" name="story-description_' + id + '" placeholder="Description" value="' + (story.description || '') + '">' +
                '</div>' +
                '<div class="col-3">' +
                '<input type="hidden" name="existing_story-icon_' + id + '" value="' + (story.image || '') + '">' +
                '<input type="file" class="form-control" id="story-icon_' + id + '" name="story-icon_' + id + '" placeholder="Choose Icon">' +
                '</div>' +
                '<div class="col-2">' +
                '<button type="button" onclick="delStoryRow(' + id + ')" class="btn btn-danger">Delete</button>' +
                '</div>' +
                '</div>';
            $("#form-story-placeholder").append(html);
        }

        function delRow(id) {
            var element = document.getElementById("opt-row." + id);
            if (element) {
                element.parentNode.removeChild(element);
            }
        }

        function delStoryRow(id) {
            var element = document.getElementById("story-row." + id);
            if (element) {
                element.parentNode.removeChild(element);
            }
        }

        $(document).ready(function () {
            $("#btn-add").click(function () {
                appendUserRow(count++, {
                    title: "",
                    description: "",
                    image: "",
                })
            });
            
            $("#btn-add-story").click(function () {
                appendStoryRow(storyCount++, {
                    title: "",
                    description: "",
                    image: "",
                })
            });
        });
    </script>
@endpush