<?php $this->load->view("include/header")?>
<!-- <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js"crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/vue@3.2.36/dist/vue.global.js"></script>

  <!-- BEGIN: Content-->
<div class="app-content content " id="funnesl_setting">ss
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper">
        <div class="content-header ">
            <div class="content-header-left mb-1">
                <div class=" breadcrumbs-top">
                    <span class="content-header-title float-start mb-0">
                        <a class="btn btn-icon btn-primary" href="<?=base_url("admin/funnel/list?". getQueryStringParameters())?>"><i class="fa-solid fa-arrow-left"></i></a>
                    </span>
                    <div class="breadcrumb-wrapper">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="<?=base_url("admin/dashboard?". getQueryStringParameters())?>">Home</a>
                            </li>
                            <li class="breadcrumb-item">Create Funnel</li>
                       
                        </ol>
                    </div>
                </div>
            </div>
        </div>    
        <!-- content body -->
        <div class="content-body">
            <div class="row">
               <!--  <div class="col-md-4">
                   
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                             <div class="row g-3 align-items-center">
                                <div class="col-md-5">
                                    <label class="col-form-label" for="first-name-vertical">Trigger on </label>
                                    <select class="form-select" v-model="triggerOn">
                                        <option  value="all">All</option>
                                        <option value="products">Products</option>
                                        <option value="collections">Collection</option>
                                    </select>
                                </div>
                                <div class="col-md-7"> 
                                    <div v-if="triggerOn === 'products'">
                                        <button class="btn btn-outline-primary me-1" data-bs-toggle="modal" data-bs-target="#selectProduct"> Select product</button>
                                    </div>
                                    <div v-else-if="triggerOn === 'collections'">
                                        <button class="btn btn-outline-primary me-1" data-bs-toggle="modal" data-bs-target="#selectCollections"> Select Collections</button>
                                    </div>
                                    <div v-else>
                                        All products
                                    </div>
                                </div>
                             </div>
                        </div>
                    </div>
                </div>  --> 
                <!-- <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <label class="col-form-label">Add ruel</label> 
                            <div>
                            <button class="btn btn-primary">Add eligibility rule</button>
                            </div>
                        </div>
                    </div>
                </div>  --> 
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div style="overflow-y: scroll; max-height: 700px;">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3"><label class="col-form-label" for="first-name-vertical">Funnel name</label></div>
                                    <div class="col-md-9">
                                        <input type="text" id="first-name-vertical" class="form-control"  v-model="funnelName" placeholder="Funnel name">
                                        <div class="form-text text-primary">Funnel name for backend reference only</div>
                                    </div>
                                </div>
                                
                                
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <h4>Funnel triggers</h4>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3"><label class="col-form-label" for="first-name-vertical">Location</label></div>
                                    <div class="col-md-9">
                                        <select class="form-select mb-1" v-model="location">
                                            <option value="thankuPage">Thank you page</option>
                                            <option value="postPurches">Post Purches</option>
                                        </select>
                                    </div>
                                </div>  

                                <div class="row" v-if="location=='thankuPage'">
                                    <div class="col-md-3">
                                        <label class="col-form-label" for="first-name-vertical">Position</label>
                                    </div>
                                    <div class="col-md-9">        
                                        <select class="form-select mb-1" v-model="position">
                                            <option value="left">Show left</option>
                                            <option value="right">Show Right</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="col-form-label" for="first-name-vertical">Trigger on </label>
                                    </div>
                                    <div class="col-md-9">        
                                        <select class="form-select" v-model="triggerOn">
                                            <optgroup label="Orders"><!-- v-if="location=='thankuPage'" -->
                                                <option  value="all" >All Orders</option>
                                                <option  value="orderSubtotal" >Subtotal</option>
                                                <option  value="orderTotal" >Total</option>
                                                <option  value="noOfLineItem" >Number Of Line Item</option>
                                            </optgroup>
                                            <optgroup label="Products">
                                            <option value="products">Selected Products</option> 
                                            <option value="lineItemTitle">Line Item Title</option>
                                            <option value="lineItemPrice">Line Item Price</option>  
                                            </optgroup>
                                        </select>
                                    </div>
                                </div>  
                                
                            </div>  
                        </div>
                        <div class="card" v-if="triggerOn=='products'">
                            <div class="card-header"> <h4>Select triger products</h4></div>
                            <div class="card-body" >
                                <div class="p-4 pt-1 pb-1" v-if="selectedTriggerProducts.length>0">
                                    <div class="row border p-75 mt-50" v-for="(product,index) in selectedTriggerProducts">
                                        <div class="col-1">
                                            <img v-bind:src="product.images[0].src+'&width=50'" class="rounded img-thumbnail" style="width: 30px;"> 
                                        </div>
                                        <div class="col-7">{{product.title}}</div>
                                        <div class="col-4 text-end"><a href="javascript:;" @click="productRemoveSelectTrigger(index)" class=" btn btn-danger btn-sm p-50"><i class="fa-solid fa-trash"></i></a></div>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <button class="btn btn-outline-secondary px-75 text-dark bg-white" data-bs-toggle="modal" data-bs-target="#selectProduct"> Selected product</button>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header"><h4>Funnel details</h4></div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6" v-if="triggerOn!='all' && triggerOn!='lineItemTitle'">
                                        <div class="row">
                                            <!-- <div class="col-md-3"><label class="col-form-label" for="first-name-vertical" >Discount</label></div> -->
                                            <div class="col-md-9">
                                                <div class="input-group">
                                                    <select class="form-select" v-model="triggerOnType">
                                                        <option value="lessThan"> Less than</option>
                                                        <option value="moreThan"> More than</option>
                                                        <option value="isNot"> Is not</option>
                                                        <option value="is"> Is</option>
                                                    </select>
                                                    <input type="number" class="form-control" min="1" name="minValue" v-model="minValue">
                                                    
                                                </div>
                                            </div>
                                        </div>  
                                    </div>
                                    <div class="col-6" v-if="triggerOn=='minValue'">
                                        <div class="row">
                                            <div class="col-md-5"><label class="col-form-label" for="first-name-vertical" >Min Value</label></div>
                                            <div class="col-md-7">
                                                <input type="number" class="form-control" min="1" name="minValue" v-model="minValue">
                                            </div>
                                        </div>  
                                    </div>
                                    <div class="col-6" v-if="triggerOn=='lineItemTitle'">
                                        <div class="row">
                                            <div class="col-md-3"><label class="col-form-label" for="first-name-vertical" >Title</label></div>
                                            <div class="col-md-9">
                                                <input type="text" v-model="lineItemTitle" class="form-control">
                                            </div>
                                        </div>  
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-3"><label class="col-form-label" for="first-name-vertical" >Discount</label></div>
                                            <div class="col-md-9">
                                                <div class="input-group">
                                                    <input type="number" min="1" v-model="discountValue"  class="form-control">
                                                    <select class="form-select" v-model="discount">
                                                        <option value="percent"> % Off</option>
                                                        <option value="fixed"> Fixed Off</option>
                                                        <option value="no"> No Discount</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>  
                                    </div>
                                    <!-- <div class="col-3">
                                        <label class="col-form-label" for="first-name-vertical" >Offer products</label>
                                        <button class="btn btn-outline-secondary px-75 text-dark bg-white" data-bs-toggle="modal" data-bs-target="#offerProducts"> Select product</button>
                                    </div> -->
                                </div> <!--End Row --> 
                            </div><!--End Card Body--> 
                        </div><!--End Card --> 
                        <div class="card" >
                            <div class="card-body"><h4>Select offer triger products</h4></div>

                            <div class="card-body">
                                <div class="p-4 pt-1 pb-1" v-if="selectedOfferProducts.length>0">
                                    <div class="row border p-75 mt-50" v-for="(productOffer,indexOffer) in selectedOfferProducts">
                                        <div class="col-1">
                                            <img v-bind:src="productOffer.images[0].src" class="rounded" style="width: 30px;"> 
                                        </div>
                                        <div class="col-7">{{productOffer.title}}</div>
                                        <div class="col-4 text-end"><a href="javascript:;" @click="productRemoveSelectOffer(indexOffer)" class=" btn btn-danger btn-sm p-50"><i class="fa-solid fa-trash"></i></a></div>
                                    </div>
                                </div>
                                <div class="text-center">
                                        <button class="btn btn-outline-secondary px-75 text-dark bg-white" data-bs-toggle="modal" data-bs-target="#offerProducts"> offer product</button>
                                </div>
                            </div>
                        </div>
                        <div class="card card-body">
                            <nav>
                                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                    <button class="nav-link active" id="nav-settings-tab" data-bs-toggle="tab" data-bs-target="#nav-settings" type="button" role="tab" aria-controls="nav-settings" aria-selected="true">Settings</button>
                                    <button class="nav-link" id="nav-design-tab" data-bs-toggle="tab" data-bs-target="#nav-design" type="button" role="tab" aria-controls="nav-design" aria-selected="false">Design</button>
                                    <button class="nav-link" id="nav-language-tab" data-bs-toggle="tab" data-bs-target="#nav-language" type="button" role="tab" aria-controls="nav-language" aria-selected="false">language</button>
                                    <button class="nav-link" id="nav-layout-tab" data-bs-toggle="tab" data-bs-target="#nav-layout" type="button" role="tab" aria-controls="nav-layout" aria-selected="false">Layout</button>
                                    <button class="nav-link" id="nav-css-tab" data-bs-toggle="tab" data-bs-target="#nav-css" type="button" role="tab" aria-controls="nav-css" aria-selected="false">Custom Css</button>
                                </div>
                            </nav>
                            <div class="tab-content" id="nav-tabContent">
                                <div class="tab-pane fade show active" id="nav-settings" role="tabpanel" aria-labelledby="nav-settings-tab">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="d-flex">
                                                <p class="fw-bold me-auto m-0 mb-1">Link offer title to product page</p>
                                                <div class="form-check form-check-primary form-switch">
                                                    <input type="checkbox" class="form-check-input" id="collapse-settings" v-model="linkOfferTitle">
                                                    <label class="form-check-label" for="collapse-settings"></label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="d-flex">
                                                <p class="fw-bold me-auto m-0 mb-1">Hide out of stock/unavailable products</p>
                                                <div class="form-check form-check-primary form-switch">
                                                    <input type="checkbox" class="form-check-input" id="collapse-stock" v-model="hideOutOfStock">
                                                    <label class="form-check-label" for="collapse-stock"></label>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- <div class="col-md-6">
                                            <div class="d-flex">
                                                <p class="fw-bold me-auto m-0 mb-1">Hide Checkout Button</p>
                                                <div class="form-check form-check-primary form-switch">
                                                    <input type="checkbox" class="form-check-input" id="collapse-checkout">
                                                    <label class="form-check-label" for="collapse-checkout"></label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="d-flex">
                                                <p class="fw-bold me-auto m-0 mb-1">Link offer title to product page</p>
                                                <div class="form-check form-check-primary form-switch">
                                                    <input type="checkbox" class="form-check-input" id="collapse-sidebar-switch">
                                                    <label class="form-check-label" for="collapse-sidebar-switch"></label>
                                                </div>
                                            </div>
                                        </div> -->
                                    </div><!--End row-->

                                </div><!--End Setting tab-->
                                <div class="tab-pane fade" id="nav-design" role="tabpanel" aria-labelledby="nav-design-tab">
                                    <?php $this->load->view("pages/funnel/partials/design")?>
                                </div>
                                <div class="tab-pane fade" id="nav-language" role="tabpanel" aria-labelledby="nav-language-tab">
                                    <?php $this->load->view("pages/funnel/partials/language")?>
                                </div>
                                <div class="tab-pane fade" id="nav-layout" role="tabpanel" aria-labelledby="nav-layout-tab">
                                    <?php $this->load->view("pages/funnel/partials/layout")?>
                                </div>
                                <div class="tab-pane fade" id="nav-css" role="tabpanel" aria-labelledby="nav-css-tab">
                                    <textarea class="form-control" v-model="customCss"></textarea>
                                </div>
                                
                            </div>

                        </div>
                        <div class="card card-body">
                            <div class="d-flex">
                                <p class="fw-bold me-auto m-0">Enable Funnel</p>
                                <div class="form-check form-check-primary form-switch">
                                    <input type="checkbox" class="form-check-input" id="funnel-status" v-model="funnelStatus">
                                    <label class="form-check-label" for="funnel-status"></label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary me-1 "  @click="saveFunnel">Save</button>
                                
                </div>
                <div class="col-md-6">
                    
                    <div class="card" >
                        <div class="card-header"><h4>Design</h4></div>
                        <div class="card-body" >
                            <div class="row">
                                <div class="col-md-12">
                                    
                                    <div class="border rounded p-1 enap-reconvert">
                                        <h5 class="heading_title" v-bind:style="{color:desHdTextColor}">{{lanTitle}}</h5>
                                        <!-- <div class="row justify-content-md-center">
                                            <div class="col-md-4" v-for="product in selectedOfferProducts">
                                                
                                            </div>
                                              
                                        </div> -->
                                        <div class="swiper reconvertSwiper" v-if="layoutType=='slider'">
                                           
                                            <div class="swiper-wrapper">
                                                <div class="enap-product-item swiper-slide" :style="{backgroundColor:desProBgColor,'border':'1px solid','border-color':desProBorderColor}" v-for="product in selectedOfferProducts">
                                                    <div class="enap-product">
                                                        <div class="enap-product-image">
                                                          <img v-bind:src="product.images[0].src+'&width=200'" v-if="product.images[0].src">
                                                        </div>
                                                        <div class="enap-product-title"><span v-bind:style="{color:desPrTextColor}">{{product.title}}</span></div>
                                                        <div class="enap-product-price"><span :style="{color:desDiscountPriceColor}">{{discountType(product.variants[0].price)}}</span>  <del><span :style="{color:desPriceColor}">{{product.variants[0].price}}</span></del></div>
                                                        <div class="enap-product-button"><button class="btn enap-button" :style="{color:desBnTextColor,'background-color':desBnBgColor}">{{lanBuyNow}}</button>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                            </div><!-- End Swiper Wrapper -->
                                            <div class="swiper-button-prev"></div><div class="swiper-button-next"></div>
                                             {{sliderReconvert()}}
                                        </div><!-- End Swiper -->
                                        <div class="reconvertSwiper" v-else-if="layoutType=='grid'" :style="{'display': 'grid', 'grid-template-columns': 'repeat('+layoutView+', auto)'}">
                                            <div class="enap-product-item" :style="{backgroundColor:desProBgColor,'border':'1px solid','border-color':desProBorderColor}" v-for="product in selectedOfferProducts">
                                                <div class="enap-product">
                                                    <div class="enap-product-image">
                                                      <img v-bind:src="product.images[0].src+'&width=200'" v-if="product.images[0].src">
                                                    </div>
                                                    <div class="enap-product-title"><span v-bind:style="{color:desPrTextColor}">{{product.title}}</span></div>
                                                    <div class="enap-product-price"><span :style="{color:desDiscountPriceColor}">{{discountType(product.variants[0].price)}}</span>  <del><span :style="{color:desPriceColor}">{{product.variants[0].price}}</span></del></div>
                                                    <div class="enap-product-button"><button class="btn enap-button" :style="{color:desBnTextColor,'background-color':desBnBgColor}">{{lanBuyNow}}</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php $this->load->view("pages/funnel/partials/triggerOnProductModal")?>
    <?php $this->load->view("pages/funnel/partials/offerProductsModal")?>
</div>
    <!-- END: Content-->
<?php $this->load->view("include/footer")?>
<script type="text/javascript">
    var funnelId=<?=$funnelId?>;
    
</script>
<!-- <script src="<?=$this->config->item("assets_url")?>js/funnelsettings.js"></script> -->
<script src="<?=$this->config->item("assets_url")?>js/settings.js"></script>
<style type="text/css">
    .heading_title{
    text-align: center;
    }
    .enap-product-item{
        padding: 1px;
        text-align: center;
    }
    .enap-product {
          padding: 5px;
    }
    .enap-product-item img {
          width: 100%;
          height: auto;
    }
    .enap-product-item button {
          background: #57a272;
          padding: 8px 20px;
          border-radius: 5px;
          font-size: 16px;
          color: #fff;
    }
</style>


