@extends('master_layout.app')

@section('content')
    <section id="content" class="content">
        <div class="content__header content__boxed overlapping">
            <div class="content__wrap">


                <h4 class="mb-3 fw-semibold">Create Subscription</h4>


                <div class="container-fluid">


                    <div class="row">
                        <div class="col-12">

                            <div class="card" class="propertywizard">

                                <div class="card-body">
                                    <div class="mb-5">


                                        <form id="verticalwizard" action="{{ route('subscriptions_store') }}"
                                            method="POST">
                                            @csrf
                                            <div class="row">
                                                <div class="col-lg-3">

                                                    {{-- 
                              <ul class="nav nav-pills nav-justified flex-column icon-wizard form-wizard-header bg-light p-1"
                                  role="tablist">
                                  <li class="nav-item" role="presentation">
                                      <a href="#subscription-plan" id="subscription-plan-tab"
                                          data-bs-toggle="tab" data-toggle="tab"
                                          class="nav-link rounded-0 py-2 active" aria-selected="true"
                                          role="tab"><img src="/new_template/admin/assets/images/1.png" class="tab-img">

                                          Subscription Plan
                                      </a>
                                  </li>
                                  <li class="nav-item" role="presentation">
                                      <a href="#controllable-parameters" id="controllable-parameters-tab"
                                          data-bs-toggle="tab" data-toggle="tab"
                                          class="nav-link rounded-0 py-2" aria-selected="false"
                                          role="tab" tabindex="-1"><img src="/new_template/admin/assets/images/2.png"
                                              class="tab-img">
                                          Controllable Parameters
                                      </a>
                                  </li>


                                  <li class="nav-item" role="presentation">
                                      <a href="#finished" id="finished-tab" data-bs-toggle="tab"
                                          data-toggle="tab" class="nav-link rounded-0 py-2"
                                          aria-selected="false" tabindex="-1" role="tab"><img
                                              src="/admin/assets/images/8.png" class="tab-img">
                                          Finished
                                      </a>
                                  </li>

                              </ul> --}}

                                                    <ul class="nav nav-pills nav-justified flex-column icon-wizard form-wizard-header bg-light p-1"
                                                        role="tablist">
                                                        <li class="nav-item" role="presentation">
                                                            <a href="#subscription-plan" id="subscription-plan-tab"
                                                                data-bs-toggle="tab" data-toggle="tab"
                                                                class="nav-link rounded-0 py-2 active" aria-selected="true"
                                                                role="tab"><img
                                                                    src="/new_template/admin/assets/img/1.png"
                                                                    class="tab-img">

                                                                Subscription Plan
                                                            </a>
                                                        </li>
                                                        <li class="nav-item" role="presentation">
                                                            <a href="#finished" id="controllable-parameters-tab"
                                                                data-bs-toggle="tab" data-toggle="tab"
                                                                class="nav-link rounded-0 py-2" aria-selected="false"
                                                                role="tab" tabindex="-1"><img
                                                                    src="/new_template/admin/assets/img/2.png"
                                                                    class="tab-img">
                                                                Controllable Parameters
                                                            </a>
                                                        </li>




                                                    </ul>
                                                </div>







                                                <div class="col-lg-9">
                                                    <div class="tab-content mb-0">


                                                        <div class="tab-pane active show" id="subscription-plan"
                                                            role="tabpanel">
                                                            <h4 class="fs-16 fw-semibold mb-1">Subscription Plan</h4>

                                                            <div class="row py-2">
                                                                <div class="col-lg-12">
                                                                    <div class="mb-3">
                                                                        <label for="propertyname" class="form-label">Plan
                                                                            Name</label>
                                                                        <input id="propertyname" type="text"
                                                                            class="form-control" name="plan_name"
                                                                            placeholder="Enter Plan Name">
                                                                    </div>
                                                                </div> <!-- end col -->






                                                                <div class="col-lg-12">
                                                                    <div class="mb-3 ">
                                                                        <label for="Description"
                                                                            class="form-label">Description</label>
                                                                        <textarea class="form-control" id="exampleTextarea" name="description" rows="4" placeholder="Enter Description"></textarea>
                                                                    </div>
                                                                </div> <!-- end col -->

                                                                <div class="row">
                                                                    <div class="">
                                                                        <div class="mb-3">
                                                                            <label for="Duration"
                                                                                class="form-label ">Duration</label>

                                                                            <div
                                                                                class="d-flex mb-2 justify-content-between align-items-center">
                                                                                <div
                                                                                    class="inp-box d-flex align-items-center">
                                                                                    <label class="form-check-label "
                                                                                        for="inlineCheckbox1">Monthly</label>


                                                                                </div>
                                                                                <div class="inp-box">
                                                                                    <label class="form-check-label"
                                                                                        for="inlineCheckbox1">Actual
                                                                                        Price</label>
                                                                                    <input type="text"
                                                                                        name="monthly_actual_price"
                                                                                        class="monthly_actual_price  form-control"
                                                                                        placeholder="Actual Price">

                                                                                </div>
                                                                                <div class="inp-box">

                                                                                    <label class="form-check-label"
                                                                                        for="inlineCheckbox1">Discount
                                                                                        Precentage</label>
                                                                                    <input type="text"
                                                                                        name="monthly_discount"
                                                                                        class="monthly_discount  form-control"
                                                                                        placeholder="Discount">

                                                                                </div>

                                                                                <div class="inp-box">

                                                                                    <label class="form-check-label"
                                                                                        for="inlineCheckbox1">Offer
                                                                                        Price</label>
                                                                                    <input type="text"
                                                                                        name="monthly_offer_price"
                                                                                        class="monthly_offer_price form-control"
                                                                                        placeholder="Offer Price">

                                                                                </div>
                                                                            </div>

                                                                            <div
                                                                                class="d-flex  mb-2 justify-content-between align-items-center">
                                                                                <div
                                                                                    class="inp-box d-flex align-items-center">
                                                                                    <label class="form-check-label"
                                                                                        for="inlineCheckbox1">Quarterly</label>


                                                                                </div>
                                                                                <div class="inp-box">

                                                                                    <input type="text"
                                                                                        name="quaterly_actual_price"
                                                                                        class="quaterly_actual_price form-control"
                                                                                        placeholder="Actual Price"
                                                                                        readonly>

                                                                                </div>
                                                                                <div class="inp-box">


                                                                                    <input type="text"
                                                                                        name="quaterly_discount"
                                                                                        class="quaterly_discount form-control"
                                                                                        placeholder="Discount">

                                                                                </div>

                                                                                <div class="inp-box">


                                                                                    <input type="text"
                                                                                        name="quaterly_offer_price"
                                                                                        class="quaterly_offer_price form-control"
                                                                                        placeholder="Offer Price">

                                                                                </div>
                                                                            </div>

                                                                            <div
                                                                                class="d-flex  mb-2 justify-content-between align-items-center">
                                                                                <div
                                                                                    class="inp-box d-flex align-items-center">
                                                                                    <label class="form-check-label"
                                                                                        for="inlineCheckbox1">Half
                                                                                        yearly</label>


                                                                                </div>
                                                                                <div class="inp-box">

                                                                                    <input type="text"
                                                                                        name="halfyearly_actual_price"
                                                                                        class="halfyearly_actual_price form-control"
                                                                                        placeholder="Actual Price"
                                                                                        readonly>

                                                                                </div>
                                                                                <div class="inp-box">

                                                                                    <input type="text"
                                                                                        name="halfyearly_discount"
                                                                                        class="halfyearly_discount form-control"
                                                                                        placeholder="Discount">

                                                                                </div>

                                                                                <div class="inp-box">


                                                                                    <input type="text"
                                                                                        name="halfyearly_offer_price"
                                                                                        class="halfyearly_offer_price form-control"
                                                                                        placeholder="Offer Price">
                                                                                </div>
                                                                            </div>

                                                                            <div
                                                                                class="d-flex justify-content-between align-items-center">
                                                                                <div
                                                                                    class="inp-box d-flex align-items-center">
                                                                                    <label class="form-check-label"
                                                                                        for="inlineCheckbox1">&#8203;
                                                                                        Yearly</label>


                                                                                </div>
                                                                                <div class="inp-box">

                                                                                    <input type="text"
                                                                                        name="yearly_actual_price"
                                                                                        class="yearly_actual_price form-control"
                                                                                        placeholder="Actual Price"
                                                                                        readonly>

                                                                                </div>
                                                                                <div class="inp-box">


                                                                                    <input type="text"
                                                                                        name="yearly_discount"
                                                                                        class="yearly_discount form-control"
                                                                                        placeholder="Discount">

                                                                                </div>

                                                                                <div class="inp-box">

                                                                                    <input type="text"
                                                                                        name="yearly_offer_price"
                                                                                        class="yearly_offer_price form-control"
                                                                                        placeholder="Offer Price">

                                                                                </div>
                                                                            </div>

                                                                            <!-- <div class="col-md-3">
                                                                                               <div class="form-check form-check-inline">
                                                                                                  <input class="form-check-input" name="duration[]"
                                                                                                     type="checkbox" id="inlineCheckbox1" value="30">
                                                                                                  <label class="form-check-label"
                                                                                                     for="inlineCheckbox1">Monthly</label>
                                                                                               </div>
                                                                                            </div>
                                                                                            <div class="col-md-3">
                                                                                               <div class="form-check form-check-inline">
                                                                                                  <input class="form-check-input" name="duration[]"
                                                                                                     type="checkbox" id="inlineCheckbox2" value="90">
                                                                                                  <label class="form-check-label"
                                                                                                     for="inlineCheckbox2">Quarterly</label>
                                                                                               </div>
                                                                                            </div>
                                                                                            <div class="col-md-3">
                                                                                               <div class="form-check form-check-inline">
                                                                                                  <input class="form-check-input" name="duration[]"
                                                                                                     type="checkbox" id="inlineCheckbox3" value="180">
                                                                                                  <label class="form-check-label"
                                                                                                     for="inlineCheckbox3">Half Yearly</label>
                                                                                               </div>
                                                                                            </div>
                                                                                            <div class="col-md-3">
                                                                                               <div class="form-check form-check-inline">
                                                                                                  <input class="form-check-input" name="duration[]"
                                                                                                     type="checkbox" id="inlineCheckbox4" value="365">
                                                                                                  <label class="form-check-label"
                                                                                                     for="inlineCheckbox4">Yearly</label>
                                                                                               </div>
                                                                                            </div> -->
                                                                        </div>


                                                                    </div>
                                                                </div> <!-- end col -->
                                                                <div class="col-md-6">
                                                                    <div class="mb-3">
                                                                        <label class="form-label"
                                                                            for="basicLname2">Features</label>


                                                                        <div class="add-item">
                                                                            <select class="form-select" name="features[]"
                                                                                aria-label="Default select example">
                                                                                <option value="">Select Features
                                                                                </option>
                                                                                @foreach ($features as $ft)
                                                                                    <option value="{{ $ft->id }}">
                                                                                        {{ $ft->feature_name }}</option>
                                                                                @endforeach
                                                                            </select>
                                                                            <i class="ri-add-circle-line"></i>

                                                                        </div>
                                                                        <div id="add_feature"></div>
                                                                    </div>
                                                                </div><!-- end col -->

                                                                <div class="col-md-6">

                                                                </div><!-- end col -->

                                                                {{--   <div class="col-lg-6">
                                              <div class="mb-3">
                                                  <label for="Description"
                                                      class="form-label">Pricing per month</label>

                                                      <input type="text" id="pricing" name="pricing"
                                                      class="form-control"
                                                      placeholder="Enter Pricing">
                                              </div>
                                          </div> --}} <!-- end col -->




                                                                <div class="col-lg-6">
                                                                    <div class="mb-3">
                                                                        <label for="Description" class="form-label">No of
                                                                            Trial Days</label>
                                                                        <input id="Desc" type="text"
                                                                            name="trial_days" class="form-control"
                                                                            placeholder="Enter Trial days">
                                                                    </div>
                                                                </div>


                                                                <div class="col-lg-6">
                                                                    <div class="mb-3">
                                                                        <label for="Description" class="form-label">No of
                                                                            Trial Property </label>
                                                                        <input id="Desc" type="text"
                                                                            name="number_of_trial_property"
                                                                            class="form-control"
                                                                            placeholder="Enter No of Trial Property">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-6">
                                                                    <div class="mb-3">
                                                                        <label for="Description" class="form-label">No of
                                                                            Team
                                                                            Members </label>
                                                                        <input id="Desc" type="text"
                                                                            name="number_of_trial_team_member"
                                                                            class="form-control"
                                                                            placeholder="Enter No of Team Members">
                                                                    </div>
                                                                </div>



                                                                <!-- end col -->

                                                                {{--  <div class="col-lg-6"> 
                                              <div class="mb-3">
                                                  <label for="Description"
                                                      class="form-label">Discounts</label>
                                                  <input id="desc" type="text" name="discount_rate" class="form-control"
                                                      placeholder="Enter Discount Rate">
                                              </div>
                                          </div> --}} {{-- <div class="col-lg-6"> 
                                              <div class="mb-3">
                                                  <label for="Description"
                                                      class="form-label">Offer Price</label>
                                                  <input id="offer_price" type="text" name="offer_price" class="form-control"
                                                      placeholder="Enter Offer Price" readonly>
                                              </div>
                                          </div> --}} <!-- end col -->







                                                            </div> <!-- end row -->
                                                        </div><!-- end tab-pane -->




                                                        <div class="tab-pane" id="finished" role="tabpanel">
                                                            <h4 class="fs-16 fw-semibold mb-1">Controllable Parameters</h4>


                                                            <div class="row py-2">
                                                                <div class="col-12">

                                                                    <div class="row">
                                                                        <div class="col-md-4">
                                                                            <div class="mb-3">
                                                                                <label class="form-label"
                                                                                    for="yourbuilt">Number of
                                                                                    Property</label>
                                                                                <input type="text" id="yourbuilting"
                                                                                    class="form-control"
                                                                                    name="property_count"
                                                                                    placeholder="Enter number needed">
                                                                            </div>
                                                                        </div><!-- end col -->
                                                                        <div class="col-md-4">
                                                                            <div class="mb-3">
                                                                                <label class="form-label"
                                                                                    for="basicLname2">Number of Team
                                                                                    Members</label>
                                                                                <input type="text" id="basicLname2"
                                                                                    class="form-control"
                                                                                    name="team_members"
                                                                                    placeholder="Enter number needed">
                                                                            </div>
                                                                        </div><!-- end col -->

                                                                        {{--  <div class="col-md-4">
                                                      <div class="mb-3">
                                                          <label class="form-label"
                                                              for="basicLname2">Number of File
                                                              Exports</label>
                                                          <input type="text" id="basicLname2"
                                                              class="form-control"  name="file_exports" 
                                                              placeholder="Enter number needed">
                                                      </div>
                                                  </div> --}}<!-- end col -->

                                                                        {{--  <div class="col-md-4">
                                                      <div class="mb-3">
                                                          <label class="form-label"
                                                              for="basicLname2">File Cabinet – Space
                                                              wise</label>
                                                          <input type="text" id="basicLname2"
                                                              class="form-control"  name="file_cabinet_space" 
                                                              placeholder="Enter number needed">
                                                      </div>
                                                  </div> --}}<!-- end col -->

                                                                        {{--  <div class="col-md-12">
                                                      <div class="mb-0">
                                                          <div
                                                              class="formch d-flex align-items-center">

                                                              <div class="form-check py-2">
                                                                  <input class="form-check-input"
                                                                      type="checkbox" value="1"  name="stacking_plan" 
                                                                      id="flexCheckDefault">
                                                                  <label class="form-check-label"
                                                                      for="flexCheckDefault">
                                                                      Stacking Plan
                                                                  </label>
                                                              </div>

                                                              <div class="form-check mx-2">
                                                                  <input class="form-check-input"
                                                                      type="radio"
                                                                      name="stacking_plan" value="0"
                                                                      id="flexRadioDisabled" >
                                                                  <label class="form-check-label" 
                                                                      for="flexRadioDisabled">
                                                                      Disabled
                                                                  </label>
                                                              </div>

                                                              <div class="form-check">
                                                                  <input class="form-check-input"
                                                                      type="radio"
                                                                       name="stacking_plan" value="2"
                                                                      id="flexRadioDisabled" >
                                                                  <label class="form-check-label"
                                                                      for="flexRadioDisabled">
                                                                      More Templates
                                                                  </label>
                                                              </div>




                                                          </div>


                                                      </div>
                                                  </div><!-- end col --> --}}
                                                                        <div class="col-md-12">
                                                                            <div class="mb-0">
                                                                                <div
                                                                                    class="formch d-flex align-items-center">

                                                                                    <div class="form-check py-2">
                                                                                        <input class="form-check-input"
                                                                                            type="checkbox" value="1"
                                                                                            name="stacking_plan"
                                                                                            id="flexCheckDefault">
                                                                                        <label class="form-check-label"
                                                                                            for="flexCheckDefault">
                                                                                            Stacking Plan
                                                                                        </label>
                                                                                    </div>


                                                                                    <div class="form-check py-2 mx-2">
                                                                                        <input class="form-check-input"
                                                                                            type="checkbox" value="1"
                                                                                            name="critical_data"
                                                                                            id="flexCheckDefault">
                                                                                        <label class="form-check-label"
                                                                                            for="flexCheckDefault">
                                                                                            Critical Data
                                                                                        </label>
                                                                                    </div>







                                                                                </div>


                                                                            </div>
                                                                        </div><!-- end col -->





                                                                    </div><!-- end row -->
                                                                </div> <!-- end col -->
                                                            </div> <!-- end row -->
                                                        </div><!-- end tab-pane -->












                                                        {{--  <div class="tab-pane" id="finished" role="tabpanel">
                                      <div class="row">
                                          <div class="col-12">
                                              <div class="text-center">
                                                  <div class="avatar-md mx-auto mb-3">
                                                      <div
                                                          class="avatar-title bg-primary bg-opacity-10 text-primary rounded-circle">
                                                          <iconify-icon icon="iconamoon:like-duotone"
                                                              class="fs-36"></iconify-icon>
                                                      </div>
                                                  </div>
                                                  <h3 class="mt-0">Finished !</h3>

                                                  <p class="w-75 mb-2 mx-auto">Subscription Created
                                                      Successfully.</p>


                                              </div>
                                          </div> <!-- end col -->
                                      </div> <!-- end row -->
                                  </div><!-- end tab-pane --> --}}

                                                        <div
                                                            class="d-flex flex-wrap align-items-center wizard justify-content-between gap-3 mt-3">
                                                            <div class="first">

                                                            </div>
                                                            <div class="d-flex gap-2">
                                                                <div class="previous" id="prevBtn"
                                                                    style="margin-right: 90px;">
                                                                    <a href="javascript:void(0);"
                                                                        class="btn btn-primary ">
                                                                        <i class="bx bx-left-arrow-alt me-2"></i>Back To
                                                                        Previous
                                                                    </a>
                                                                </div>
                                                                <div class="next" id="nextBtn">
                                                                    <a href="javascript:void(0);"
                                                                        class="btn btn-primary nex">
                                                                        Next Step<i class="ri-arrow-right-line ms-2"></i>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                            <div class="last">
                                                                <button type="submit" class="btn btn-success d-none"
                                                                    id="submitBtn">
                                                                    Submit <i class="ri-check-line ms-2"></i>
                                                                </button>
                                                            </div>

                                                        </div>
                                                    </div> <!-- tab-content -->
                                                </div>
                                            </div> <!-- end #horizontalwizard-->
                                        </form>
                                    </div>

                                </div> <!-- end card body -->
                            </div> <!-- end card -->
                        </div><!-- end col -->
                    </div> <!-- end row -->


                </div>


            </div>



        </div>























        <!-- END - FOOTER -->


    </section>
    <style>
        .ri-add-circle-line {
            font-size: 20px;
            padding-left: 5px;
        }

        .ri-subtract-line {
            font-size: 20px;
            padding-left: 5px;
        }

        .tab-img {
            width: 30px;
        }

        button#submitBtn {
            position: relative;
            right: 280px;
        }

        .form-check {
            display: block;
            min-height: 1.3125rem;
            padding-left: 1.612em;
            margin-bottom: 0;
            margin: 0 0%;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const nextBtn = document.getElementById("nextBtn");
            const prevBtn = document.getElementById("prevBtn");
            const submitBtn = document.getElementById("submitBtn");

            const tabs = document.querySelectorAll(".nav-link");
            const totalTabs = tabs.length;

            tabs.forEach((tab) => {
                tab.addEventListener("click", function() {
                    handleTabChange(this.getAttribute("href"));
                });
            });

            function handleTabChange(activeTabId) {
                if (activeTabId === "#finished") {
                    nextBtn.classList.add("d-none");
                    submitBtn.classList.remove("d-none");
                } else {
                    nextBtn.classList.remove("d-none");
                    submitBtn.classList.add("d-none");
                }
            }

            // Optional: Click event for "Next" button to go to the next tab
            nextBtn.addEventListener("click", function() {
                const currentTab = document.querySelector(".nav-link.active");
                const tabsArr = Array.from(tabs);
                const currentIndex = tabsArr.indexOf(currentTab);

                if (currentIndex < totalTabs - 1) {
                    const nextTab = tabsArr[currentIndex + 1];
                    nextTab.click();
                }
            });

            // Optional: Click event for "Previous" button
            prevBtn.addEventListener("click", function() {
                const currentTab = document.querySelector(".nav-link.active");
                const tabsArr = Array.from(tabs);
                const currentIndex = tabsArr.indexOf(currentTab);

                if (currentIndex > 0) {
                    const prevTab = tabsArr[currentIndex - 1];
                    prevTab.click();
                }
            });
        });
    </script>
@endsection