@section('title','Homepage')
@include('layout.header')
@include('layout.sidebar')
<style>
    .error{
        color: red;
    }
</style>

<div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
        <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Homepage</h1>
        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
            <li class="breadcrumb-item text-muted">
            <a href="{{ url('/dashboard') }}" class="text-muted text-hover-primary">Dashboard</a>
            </li>
            <li class="breadcrumb-item">
                <span class="bullet bg-gray-500 w-5px h-2px"></span>
            </li>
            <li class="breadcrumb-item text-muted">Homepage</li>
        </ul>
    </div>
</div>
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <form action="{{url('Homepage/homepage')}}" method="POST" id="homepage_form" enctype="multipart/form-data">
            @csrf
            <div class="accordion mt-5" id="mainBannerAccordion">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="mainBannerAccordion">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#mainBannercollapse" aria-expanded="true" aria-controls="mainBannercollapse">Banner</button>
                    </h2>
                    <div id="mainBannercollapse" class="accordion-collapse collapse show" aria-labelledby="headingOne">
                        <div class="accordion-body">
                            <div class="accordian-cards-wrapper">
                                @if(!empty($bannerData))
                                    @foreach($bannerData as $bkey => $bval)
                                        <input type="hidden" name="homepage_banner_id[{{$bkey}}]" value="{{$bval->id }}">
                                        <div class="accordion bannerAccordion mt-2" id="bannerAccordion_{{$bkey}}" key="{{$bkey}}">
                                            <div class="accordion-item">
                                                <h2 class="accordion-header" id="bannerAccordion_{{$bkey}}">
                                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bannercollapse_{{$bkey}}" aria-expanded="true" aria-controls="bannercollapse_{{$bkey}}">Banner {{$bkey + 1}}</button>
                                                </h2>
                                                <div id="bannercollapse_{{$bkey}}" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#mainBannerAccordion">
                                                    <div class="accordion-body">
                                                        <div class="row">
                                                            <div class="col-md-6 mt-3">
                                                                <label for="banner_type" class="form-label">Banner Type <span class="error"> * </span></label>
                                                                <div class="form-group mb-5">
                                                                    <select class="form-select required" id="banner_type_{{$bkey}}" name="homepage_banner_type[{{$bkey}}]" data-control="select2" data-placeholder="Select Banner Type" onchange="getSelectedInput({{$bkey}})" title="Please select banner type.">
                                                                        <option value="">Select Address Type</option>
                                                                        <option value="Image" {{ old('banner_type', $bval->banner_type) == 'Image'?'selected':''}}>Image</option>
                                                                        <option value="Gif" {{ old('banner_type', $bval->banner_type) == 'Gif'?'selected':''}}>Gif</option>
                                                                        <option value="Video Link" {{ old('banner_type', $bval->banner_type) == 'Video Link'?'selected':''}}>Video Link</option>
                                                                    </select>
                                                                </div>
                                                            </div>

                                                            <div class="col-md-6 mt-3">
                                                                <label  for="titleText" class="form-label">Title Text<span class="error"> * </span></label>
                                                                <div class="form-group mb-5">
                                                                    <input type="text"  class="form-control required" id="homepage_title_text_{{$bkey}}" name="homepage_banner_title_text[{{$bkey}}]" value="{{ old('banner_title',$bval->banner_title)}}" placeholder="Title Text" autocomplete="off" title="Please enter title.">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-12 mt-3">
                                                                <label  for="descriptionText" class="form-label">Description Text<span class="error"> * </span></label>
                                                                <div class="form-group mb-5">
                                                                    <textarea class="form-control required" id="homepage_description_text_{{$bkey}}" name="homepage_banner_description_text[{{$bkey}}]" rows="3" placeholder="Description Text" title="Please enter description text.">{{ old('banner_description',$bval->banner_description)}}</textarea>
                                                                </div>
                                                            </div>

                                                            <div class="col-md-6 mt-3">
                                                                <label  for="buttonText" class="form-label">Button Text<span class="error"> * </span></label>
                                                                <div class="form-group mb-5">
                                                                    <input type="text"  class="form-control required" id="homepage_button_text_{{$bkey}}" name="homepage_banner_button_text[{{$bkey}}]" value="{{ old('banner_button_text',$bval->banner_button_text)}}" placeholder="Button Text" autocomplete="off" title="Please enter button text.">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-6 mt-3">
                                                                <label  for="buttonLink" class="form-label">Button Link<span class="error"> * </span></label>
                                                                <div class="form-group mb-5">
                                                                    <input type="text"  class="form-control required" id="homepage_button_link_{{$bkey}}" name="homepage_banner_button_link[{{$bkey}}]" value="{{ old('banner_button_link',$bval->banner_button_link)}}" placeholder="Button Link" autocomplete="off" title="Please enter button link.">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-6 mt-3" id="banner_video_link_div_{{$bkey}}" style="display: none;">
                                                                <label  for="videoLink" class="form-label">Video Link<span class="error"> * </span></label>
                                                                <div class="form-group mb-5">
                                                                    <input type="text"  class="form-control required" id="homepage_banner_video_link_{{$bkey}}" name="homepage_banner_video_link[{{$bkey}}]" placeholder="Video Link" value="{{ old('video_image_url',$bval->video_image_url)}}" autocomplete="off" title="Please enter video link.">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-6 mt-3" id="banner_image_upload_div_{{$bkey}}" style="display: none;">
                                                                <label  for="imageUpload" class="form-label">Upload Image/Gif<span class="error"> * </span></label>
                                                                <div class="form-group mb-5">
                                                                    <input type="file"  class="form-control" id="homepage_banner_image_{{$bkey}}" name="homepage_banner_image[{{$bkey}}]" autocomplete="off" title="Please select banner image." accept=".png, .jpg, .jpeg , .gif">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="accordion bannerAccordion mt-2" id="bannerAccordion_0" key="0">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="bannerAccordion_0">
                                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bannercollapse_{{$bkey}}" aria-expanded="true" aria-controls="bannercollapse_{{$bkey}}">Banner 1</button>
                                            </h2>
                                            <div id="bannercollapse_0" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#mainBannerAccordion">
                                                <div class="accordion-body">
                                                    <div class="row">
                                                        <div class="col-md-6 mt-3">
                                                            <label for="banner_type" class="form-label">Banner Type <span class="error"> * </span></label>
                                                            <div class="form-group mb-5">
                                                                <select class="form-select required" id="banner_type_0" name="homepage_banner_type[0]" data-control="select2" data-placeholder="Select Banner Type" onchange="getSelectedInput('0')" title="Please select banner type.">
                                                                    <option value="">Select Address Type</option>
                                                                    <option value="Image">Image</option>
                                                                    <option value="Gif">Gif</option>
                                                                    <option value="Video Link">Video Link</option>
                                                                </select>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mt-3">
                                                            <label  for="titleText" class="form-label">Title Text<span class="error"> * </span></label>
                                                            <div class="form-group mb-5">
                                                                <input type="text"  class="form-control required" id="homepage_title_text_0" name="homepage_banner_title_text[0]" placeholder="Title Text" autocomplete="off" title="Please enter title.">
                                                            </div>
                                                        </div>

                                                        <div class="col-md-12 mt-3">
                                                            <label  for="descriptionText" class="form-label">Description Text<span class="error"> * </span></label>
                                                            <div class="form-group mb-5">
                                                                <textarea class="form-control required" id="homepage_description_text_0" name="homepage_banner_description_text[0]" rows="3" placeholder="Description Text" title="Please enter description text."></textarea>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mt-3">
                                                            <label  for="buttonText" class="form-label">Button Text<span class="error"> * </span></label>
                                                            <div class="form-group mb-5">
                                                                <input type="text"  class="form-control required" id="homepage_button_text_0" name="homepage_banner_button_text[0]" placeholder="Button Text" autocomplete="off" title="Please enter button text.">
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mt-3">
                                                            <label  for="buttonLink" class="form-label">Button Link<span class="error"> * </span></label>
                                                            <div class="form-group mb-5">
                                                                <input type="text"  class="form-control required" id="homepage_button_link_0" name="homepage_banner_button_link[0]" placeholder="Button Link" autocomplete="off" title="Please enter button link.">
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mt-3" id="banner_video_link_div_0" style="display: none;">
                                                            <label  for="videoLink" class="form-label">Video Link<span class="error"> * </span></label>
                                                            <div class="form-group mb-5">
                                                                <input type="text"  class="form-control required" id="homepage_banner_video_link_0" name="homepage_banner_video_link[0]" placeholder="Video Link" autocomplete="off" title="Please enter video link.">
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mt-3" id="banner_image_upload_div_0" style="display: none;">
                                                            <label  for="imageUpload" class="form-label">Upload Image/Gif<span class="error"> * </span></label>
                                                            <div class="form-group mb-5">
                                                                <input type="file"  class="form-control required" id="homepage_banner_image_0" name="homepage_banner_image[0]" autocomplete="off" title="Please select banner image.">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                            <button type="button" class="btn btn-primary mt-3" id="addBanner">Add More Banner</button>
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                        <h2 class="accordion-header" id="mainTopicalsAccordion">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#mainTopicalscollapse" aria-expanded="true" aria-controls="mainTopicalscollapse">
                                Topicals
                            </button>
                        </h2>
                        <div id="mainTopicalscollapse" class="accordion-collapse collapse show" aria-labelledby="mainTopicalsAccordion">
                            <div class="accordion-body">
                               <div class="col-md-6 mt-3">
                                        <label  for="titleText" class="form-label">Title Text<span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="text"  class="form-control required" id="homepage_title_text" name="homepage_topicals_title_text" value="{{ old('topicals_title',($topicals) ? $topicals->topicals_title : "")}}" placeholder="Title Text" autocomplete="off" title="Please enter title.">
                                        </div>
                                    </div>

                                    <div class="col-md-12 mt-3">
                                        <label  for="descriptionText" class="form-label">Description Text<span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <textarea class="form-control required" id="homepage_description_text" name="homepage_topicals_description_text" rows="3" placeholder="Description Text" title="Please enter description text.">{{ old('topicals_description',($topicals) ? $topicals->topicals_description : "")}}</textarea>
                                        </div>
                                    </div>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item">
                        <h2 class="accordion-header" id="mainPortfolioAccordion">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#mainPortfoliocollapse" aria-expanded="false" aria-controls="mainPortfoliocollapse">
                                Our Product Portfolio
                            </button>
                        </h2>
                        <div id="mainPortfoliocollapse" class="accordion-collapse collapse" aria-labelledby="mainPortfolioAccordion">
                            <div class="accordion-body">
                                ...
                            </div>
                        </div>
                    </div>

            </div>
            
            <div class="row mt-6">
                <div class="form-group mb-5 col-md-2">
                    <button type="submit" class="form-control btn btn-primary">Submit</button>
                </div>
                <div class="form-group mb-5 col-md-2">
                    <a  href="{{ url('/Topicals')}}"  class="form-control btn btn-secondary">Back</a>
                </div>
            </div>
        </form>
    </div>
</div>

@include('layout.footer')
<script>
    $(document).ready(function() {
        @if(!empty($bannerData))
            @foreach($bannerData as $bkey => $bval)
                getSelectedInput({{$bkey}});
            @endforeach
        @endif
        $("#homepage_form").validate({
            /* debug: true,
            rules: {
                hoomepage_banner_type:{required: true},
                homepage_title_text:{required: true},
                homepage_description_text:{required: true},
                homepage_button_text:{required: true},
                homepage_button_link:{required: true},
                // status:{required: true},
            },
            messages: {

                    banner_type: {
                        required: 'Banner type is Required.',
                    },

                    homepage_title_text: {
                        required: 'Homepage title text is Required.',
                    },

                    homepage_description_text: {
                        required: 'Homepage description text is Required.',
                    },

                    homepage_button_text: {
                        required: 'Homepage button text is Required.',
                    },

                    homepage_button_link: {
                        required: 'Homepage button link is Required.',
                    },

                    status: {
                        required: 'Status is Required.',
                    },
            },*/
            /* ignore: [],
            errorPlacement: function (error, element) {
                if (element.hasClass("select2") == true) {
                    element.next(".select2-container").after(error);
                } else {
                    element.after(error)
                }
            }, */
            submitHandler: function(form) {
                $(".submit").attr("disabled", true);
                form.submit();
            }
        });
    });

    // let bannerCount = 1;
    document.getElementById('addBanner').addEventListener('click', () => {
        var bannerCount = $('.bannerAccordion').last().attr('key');
         bannerCount++;
         if (isNaN(bannerCount)) {
                bannerCount = 0;
            }

        const newId = bannerCount;
        const homepageBannerCount = newId + 1;
        const newItem = document.createElement('div');
        newItem.classList.add('accordion-item');

        newItem.innerHTML = `
        <div class="accordion bannerAccordion mt-2" id="bannerAccordion_${newId}" key="${newId}">
            <div class="accordion-item">
                <h2 class="accordion-header" id="bannerAccordion_${newId}">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bannercollapse_${newId}" aria-expanded="true" aria-controls="bannercollapse_${newId}">Banner ${homepageBannerCount}</button>
                </h2>
                <div id="bannercollapse_${newId}" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#mainBannerAccordion">
                    <div class="accordion-body">
                        <div class="row">
                            <div class="col-md-6 mt-3">
                                <label for="banner_type" class="form-label">Banner Type <span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <select class="form-select required" id="banner_type_${newId}" name="homepage_banner_type[${newId}]" data-control="select2" data-placeholder="Select Banner Type" onchange="getSelectedInput(${newId})" title="Please select banner type.">
                                        <option value="">Select Address Type</option>
                                        <option value="Image">Image</option>
                                        <option value="Gif">Gif</option>
                                        <option value="Video Link">Video Link</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6 mt-3">
                                <label  for="titleText" class="form-label">Title Text<span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <input type="text"  class="form-control required" id="homepage_title_text_${newId}" name="homepage_banner_title_text[${newId}]" placeholder="Title Text" autocomplete="off" title="Please enter title.">
                                </div>
                            </div>

                            <div class="col-md-12 mt-3">
                                <label  for="descriptionText" class="form-label">Description Text<span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <textarea class="form-control required" id="homepage_description_text_${newId}" name="homepage_banner_description_text[${newId}]" rows="3" placeholder="Description Text" title="Please enter description text."></textarea>
                                </div>
                            </div>

                            <div class="col-md-6 mt-3">
                                <label  for="buttonText" class="form-label">Button Text<span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <input type="text"  class="form-control required" id="homepage_button_text_${newId}" name="homepage_banner_button_text[${newId}]" placeholder="Button Text" autocomplete="off" title="Please enter button text.">
                                </div>
                            </div>

                            <div class="col-md-6 mt-3">
                                <label  for="buttonLink" class="form-label">Button Link<span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <input type="text"  class="form-control required" id="homepage_button_link_${newId}" name="homepage_banner_button_link[${newId}]" placeholder="Button Link" autocomplete="off" title="Please enter button link.">
                                </div>
                            </div>

                            <div class="col-md-6 mt-3" id="banner_video_link_div_${newId}" style="display: none;">
                                <label  for="videoLink" class="form-label">Video Link<span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <input type="text"  class="form-control required" id="homepage_banner_video_link_${newId}" name="homepage_banner_video_link[${newId}]" placeholder="Video Link" autocomplete="off" title="Please enter video link.">
                                </div>
                            </div>

                            <div class="col-md-6 mt-3" id="banner_image_upload_div_${newId}" style="display: none;">
                                <label  for="imageUpload" class="form-label">Upload Image/Gif<span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <input type="file"  class="form-control required" id="homepage_banner_image_${newId}" name="homepage_banner_image[${newId}]" autocomplete="off" title="Please select banner image." accept=".png, .jpg, .jpeg , .gif">
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
        `;
        $("#mainBannercollapse > .accordion-body .accordian-cards-wrapper").append(newItem);
    });

    function getSelectedInput(key){
        var selectBannerType = $("#banner_type_"+key).val();
        if(selectBannerType == 'Video Link'){
            $("#banner_image_upload_div_"+key).hide();
            $("#banner_video_link_div_"+key).show();
        }else{
            $("#banner_video_link_div_"+key).hide();
            $("#banner_image_upload_div_"+key).show();
        }
    }

    /* $('input[name="homepage_title_text[]"]').each(function(index) {
        $(this).rules('add', {
            required: true,
            messages: {
                required: 'Title is required for banner' + (index + 1)
            }
        });
    }); */
</script>