@extends('backend.template.layouts.template-base')
@section('title', 'Subscription - edit-plan')

@section('content')


    <section>
        <div class="page-head-title1 mb-4">
            <div class="d-flex align-items-center justify-content-between create">
                <a href="{{ route('backend.template.subscription.index') }}" class="d-inline-block">
                    <h2 class="text-title fw-semibold mb-0 d-flex align-items-center"><i
                            class="ri-arrow-left-s-line fs-1 me-2"></i>Edit Plan
                    </h2>
                </a>

            </div>
        </div>

        <div class="plan-info-card">

            <!-- Header -->
            <div class="plan-info-header">
                <h5 class="mb-0">Plan Info</h5>
            </div>

            <!-- Body -->
            <div class="plan-info-body">

                <div class="row g-3">

                    <!-- Plan Name -->
                    <div class="col-lg-4">
                        <label class="custom-label">
                            Plan Name <span class="text-danger">*</span>
                        </label>

                        <input type="text" class="form-control custom-input" value="Monthly Plan"
                            placeholder="Enter plan name">
                    </div>

                    <!-- Plan Tag -->
                    <div class="col-lg-4">
                        <label class="custom-label">
                            Plan tag (badge shown to customers)
                        </label>

                        <input type="text" value="Most Popular" class="form-control custom-input"
                            placeholder="Enter tag name">
                    </div>

                    <!-- Subscription Status -->
                    <div class="col-lg-4">
                        <label class="custom-label d-block">
                            Subscription Status
                        </label>

                        <div class="d-flex align-items-center gap-4 mt-2">

                            <div class="form-check">
                                <input class="form-check-input custom-radio" type="radio" name="status" id="active"
                                    checked>

                                <label class="form-check-label custom-radio-label ms-2" for="active">
                                    Active
                                </label>
                            </div>

                            <div class="form-check">
                                <input class="form-check-input custom-radio" type="radio" name="status" id="inactive">

                                <label class="form-check-label custom-radio-label ms-2" for="inactive">
                                    Inactive
                                </label>
                            </div>

                        </div>
                    </div>

                    <!-- Plan Price -->
                    <div class="col-lg-3">
                        <label class="custom-label">
                            Plan Price(MRP₹) <span class="text-danger">*</span>
                        </label>

                        <input type="text" value="₹0000" class="form-control custom-input" placeholder="₹0">
                    </div>

                    <!-- Discount Type -->
                    <div class="col-lg-3">
                        <label class="custom-label">
                            Discount
                        </label>

                        <select id="discountType" class="js-example-basic-single" name="discountType">

                            <option value="">Select</option>

                            <option value="percentage" selected>
                                Percentage
                            </option>

                            <option value="fixed">
                                Fixed Price
                            </option>

                        </select>



                    </div>
                    <div class="col-lg-3 " id="discountValueWrapper">

                        <label class="custom-label" id="discountLabel">
                            Discount Value
                        </label>


                        <div class="input-group">

                            <input type="text" class="form-control custom-input" id="discountValue"
                                placeholder="Enter value">

                        </div>

                    </div>
                    <!-- Selling Price -->
                    <div class="col-lg-3">
                        <label class="custom-label">
                            Selling Price ₹ <span class="text-danger">*</span>
                        </label>

                        <input type="text" class="form-control custom-input" value="₹0000" placeholder="₹0">
                    </div>

                    <!-- Description -->
                    <div class="col-lg-6">
                        <label class="custom-label">
                            Description <span class="text-danger">*</span>
                        </label>

                        <textarea class="form-control custom-textarea" rows="5" placeholder="Type here...">Lorem Ipsum dolor sit amet, consectetuer adipiscingelit. Duis tellus. Donec ante dolor, iaculis nec, gravidaac, cursus in, eros.</textarea>
                    </div>

                    <!-- Plan Details -->
                    <div class="col-lg-6">
                        <label class="custom-label">
                            Plan Details <span class="text-danger">*</span>
                        </label>

                        <textarea class="form-control custom-textarea" rows="5" placeholder="USE HTML EDITOR!">Lorem Ipsum dolor sit amet, consectetuer adipiscingelit. Duis tellus. Donec ante dolor, iaculis nec, gravidaac, cursus in, eros. Mauris vestibulum, felis et egestasullamcorper, purus nibh vehicula sem, eu egestas antenisl non justo. Fusce tincidunt, lorem nev dapibusconsectetuer, leo orci mollis ipsum, eget suscipit erospurus in ante.</textarea>
                    </div>

                </div>

            </div>

        </div>
        <div class="custom-product-list-card mt-3">

            <!-- Header -->
            <div class="custom-product-list-header">

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

                    <div class="d-flex align-items-center flex-wrap gap-2">

                        <h4 class="custom-product-title mb-0">
                            Product Listing
                        </h4>

                        <p class="custom-product-note mb-0">
                            <i class="ri-information-line"></i>
                            Subscribers will be delivered by 1 salad per day from the selected list. You can rotate the menu
                            monthly.
                        </p>

                    </div>

                    <!-- Remove Selection Button -->
                    <button type="button" class="btn custom-remove-selection-btn d-none" id="removeSelectionBtn">

                        <svg class="me-2" width="20" height="20" viewBox="0 0 20 20" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <mask id="mask0_1836_4388" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0"
                                width="20" height="20">
                                <path d="M20 0H0V20H20V0Z" fill="white" />
                            </mask>
                            <g mask="url(#mask0_1836_4388)">
                                <path
                                    d="M13.492 1.66797H6.50866C3.47533 1.66797 1.66699 3.4763 1.66699 6.50964V13.4846C1.66699 16.5263 3.47533 18.3346 6.50866 18.3346H13.4837C16.517 18.3346 18.3253 16.5263 18.3253 13.493V6.50964C18.3337 3.4763 16.5253 1.66797 13.492 1.66797ZM12.8003 11.918C13.042 12.1596 13.042 12.5596 12.8003 12.8013C12.6753 12.9263 12.517 12.9846 12.3587 12.9846C12.2003 12.9846 12.042 12.9263 11.917 12.8013L10.0003 10.8846L8.08366 12.8013C7.95866 12.9263 7.80033 12.9846 7.64199 12.9846C7.48366 12.9846 7.32533 12.9263 7.20033 12.8013C6.95866 12.5596 6.95866 12.1596 7.20033 11.918L9.11699 10.0013L7.20033 8.08464C6.95866 7.84297 6.95866 7.44297 7.20033 7.2013C7.44199 6.95964 7.84199 6.95964 8.08366 7.2013L10.0003 9.11797L11.917 7.2013C12.1587 6.95964 12.5587 6.95964 12.8003 7.2013C13.042 7.44297 13.042 7.84297 12.8003 8.08464L10.8837 10.0013L12.8003 11.918Z"
                                    fill="white" />
                            </g>
                        </svg>

                        Remove Selection

                    </button>

                </div>

            </div>

            <!-- Body -->
            <div class="custom-product-list-body">

                <div class="table-responsive">

                    <table class="table custom-product-list-table align-middle mb-0">

                        <!-- Table Head -->
                        <thead>

                            <tr>

                                <th width="50">
                                    <input type="checkbox" class="form-check-input custom-checkbox" id="selectAll">
                                </th>

                                <th>Days</th>
                                <th>Product Group</th>
                                <th>Product Img</th>
                                <th>Product Name</th>
                                <th>Variant & Units</th>
                                <th>MRP ₹</th>
                                <th>Action</th>

                            </tr>

                        </thead>

                        <!-- Table Body -->
                        <tbody>

                            <!-- Search Row -->
                            <tr>

                                <td colspan="8">

                                    <div class="custom-search-box">

                                        <i class="ri-search-line"></i>

                                        <input type="text" placeholder="Salads">

                                    </div>

                                </td>

                            </tr>

                            <!-- Row -->
                            <tr>

                                <td>
                                    <input type="checkbox" class="form-check-input custom-checkbox row-checkbox "checked>
                                </td>

                                <td>Day 1</td>

                                <td>Salads</td>

                                <td>
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <mask id="mask0_1836_3892" style="mask-type:luminance" maskUnits="userSpaceOnUse"
                                            x="0" y="0" width="24" height="24">
                                            <path d="M24 0H0V24H24V0Z" fill="white" />
                                        </mask>
                                        <g mask="url(#mask0_1836_3892)">
                                            <path
                                                d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
                                                stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path
                                                d="M9 10C10.1046 10 11 9.10457 11 8C11 6.89543 10.1046 6 9 6C7.89543 6 7 6.89543 7 8C7 9.10457 7.89543 10 9 10Z"
                                                stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path
                                                d="M2.66992 18.9486L7.59992 15.6386C8.38992 15.1086 9.52992 15.1686 10.2399 15.7786L10.5699 16.0686C11.3499 16.7386 12.6099 16.7386 13.3899 16.0686L17.5499 12.4986C18.3299 11.8286 19.5899 11.8286 20.3699 12.4986L21.9999 13.8986"
                                                stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                        </g>
                                    </svg>

                                </td>

                                <td>
                                    <div class="custom-product-name">
                                        Lorem ipsum
                                    </div>

                                    <div class="custom-product-subname">
                                        லோரம் இப்சம்
                                    </div>
                                </td>

                                <td>250 g</td>

                                <td>₹000</td>

                                <td>
                                    <button class="btn custom-remove-btn">
                                        Remove
                                    </button>
                                </td>

                            </tr>

                            <!-- Row -->
                            <tr>

                                <td>
                                    <input type="checkbox" class="form-check-input custom-checkbox row-checkbox">
                                </td>

                                <td>Day 2</td>

                                <td>Salads</td>

                                <td>
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <mask id="mask0_1836_3892" style="mask-type:luminance" maskUnits="userSpaceOnUse"
                                            x="0" y="0" width="24" height="24">
                                            <path d="M24 0H0V24H24V0Z" fill="white" />
                                        </mask>
                                        <g mask="url(#mask0_1836_3892)">
                                            <path
                                                d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
                                                stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path
                                                d="M9 10C10.1046 10 11 9.10457 11 8C11 6.89543 10.1046 6 9 6C7.89543 6 7 6.89543 7 8C7 9.10457 7.89543 10 9 10Z"
                                                stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path
                                                d="M2.66992 18.9486L7.59992 15.6386C8.38992 15.1086 9.52992 15.1686 10.2399 15.7786L10.5699 16.0686C11.3499 16.7386 12.6099 16.7386 13.3899 16.0686L17.5499 12.4986C18.3299 11.8286 19.5899 11.8286 20.3699 12.4986L21.9999 13.8986"
                                                stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                        </g>
                                    </svg>

                                </td>

                                <td>
                                    <div class="custom-product-name">
                                        Lorem ipsum
                                    </div>

                                    <div class="custom-product-subname">
                                        லோரம் இப்சம்
                                    </div>
                                </td>

                                <td>250 g</td>

                                <td>₹000</td>

                                <td>
                                    <button class="btn custom-remove-btn">
                                        Remove
                                    </button>
                                </td>

                            </tr>

                            <!-- Row -->
                            <tr>

                                <td>
                                    <input type="checkbox" class="form-check-input custom-checkbox row-checkbox " checked>
                                </td>

                                <td>Day 3</td>

                                <td>Salads</td>

                                <td>
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <mask id="mask0_1836_3892" style="mask-type:luminance" maskUnits="userSpaceOnUse"
                                            x="0" y="0" width="24" height="24">
                                            <path d="M24 0H0V24H24V0Z" fill="white" />
                                        </mask>
                                        <g mask="url(#mask0_1836_3892)">
                                            <path
                                                d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
                                                stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path
                                                d="M9 10C10.1046 10 11 9.10457 11 8C11 6.89543 10.1046 6 9 6C7.89543 6 7 6.89543 7 8C7 9.10457 7.89543 10 9 10Z"
                                                stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path
                                                d="M2.66992 18.9486L7.59992 15.6386C8.38992 15.1086 9.52992 15.1686 10.2399 15.7786L10.5699 16.0686C11.3499 16.7386 12.6099 16.7386 13.3899 16.0686L17.5499 12.4986C18.3299 11.8286 19.5899 11.8286 20.3699 12.4986L21.9999 13.8986"
                                                stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                        </g>
                                    </svg>

                                </td>

                                <td>
                                    <div class="custom-product-name">
                                        Lorem ipsum
                                    </div>

                                    <div class="custom-product-subname">
                                        லோரம் இப்சம்
                                    </div>
                                </td>

                                <td>250 g</td>

                                <td>₹000</td>

                                <td>
                                    <button class="btn custom-remove-btn">
                                        Remove
                                    </button>
                                </td>

                            </tr>

                            <!-- Row -->
                            <tr>

                                <td>
                                    <input type="checkbox" class="form-check-input custom-checkbox row-checkbox">
                                </td>

                                <td>Day 4</td>

                                <td>Salads</td>

                                <td>
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <mask id="mask0_1836_3892" style="mask-type:luminance" maskUnits="userSpaceOnUse"
                                            x="0" y="0" width="24" height="24">
                                            <path d="M24 0H0V24H24V0Z" fill="white" />
                                        </mask>
                                        <g mask="url(#mask0_1836_3892)">
                                            <path
                                                d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
                                                stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path
                                                d="M9 10C10.1046 10 11 9.10457 11 8C11 6.89543 10.1046 6 9 6C7.89543 6 7 6.89543 7 8C7 9.10457 7.89543 10 9 10Z"
                                                stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path
                                                d="M2.66992 18.9486L7.59992 15.6386C8.38992 15.1086 9.52992 15.1686 10.2399 15.7786L10.5699 16.0686C11.3499 16.7386 12.6099 16.7386 13.3899 16.0686L17.5499 12.4986C18.3299 11.8286 19.5899 11.8286 20.3699 12.4986L21.9999 13.8986"
                                                stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                        </g>
                                    </svg>

                                </td>

                                <td>
                                    <div class="custom-product-name">
                                        Lorem ipsum
                                    </div>

                                    <div class="custom-product-subname">
                                        லோரம் இப்சம்
                                    </div>
                                </td>

                                <td>250 g</td>

                                <td>₹000</td>

                                <td>
                                    <button class="btn custom-remove-btn">
                                        Remove
                                    </button>
                                </td>

                            </tr>

                            <!-- Row -->
                            <tr>

                                <td>
                                    <input type="checkbox" class="form-check-input custom-checkbox row-checkbox">
                                </td>

                                <td>Day 5</td>

                                <td>Salads</td>

                                <td>
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <mask id="mask0_1836_3892" style="mask-type:luminance" maskUnits="userSpaceOnUse"
                                            x="0" y="0" width="24" height="24">
                                            <path d="M24 0H0V24H24V0Z" fill="white" />
                                        </mask>
                                        <g mask="url(#mask0_1836_3892)">
                                            <path
                                                d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
                                                stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path
                                                d="M9 10C10.1046 10 11 9.10457 11 8C11 6.89543 10.1046 6 9 6C7.89543 6 7 6.89543 7 8C7 9.10457 7.89543 10 9 10Z"
                                                stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path
                                                d="M2.66992 18.9486L7.59992 15.6386C8.38992 15.1086 9.52992 15.1686 10.2399 15.7786L10.5699 16.0686C11.3499 16.7386 12.6099 16.7386 13.3899 16.0686L17.5499 12.4986C18.3299 11.8286 19.5899 11.8286 20.3699 12.4986L21.9999 13.8986"
                                                stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                        </g>
                                    </svg>

                                </td>

                                <td>
                                    <div class="custom-product-name">
                                        Lorem ipsum
                                    </div>

                                    <div class="custom-product-subname">
                                        லோரம் இப்சம்
                                    </div>
                                </td>

                                <td>250 g</td>

                                <td>₹000</td>

                                <td>
                                    <button class="btn custom-remove-btn">
                                        Remove
                                    </button>
                                </td>

                            </tr>

                        </tbody>

                    </table>

                </div>

            </div>

        </div>
        <div class="row g-4 mt-1">

            <!-- LEFT -->
            <div class="col-lg-6">

                <div class="custom-setting-card">

                    <!-- Header -->
                    <div class="custom-setting-header">
                        <h4>Plan settings</h4>
                    </div>

                    <!-- Body -->
                    <div class="custom-setting-body">

                        <!-- Toggle Box -->
                        <div class="custom-toggle-box">

                            <div>
                                <h5>Allow customers to pause this plan</h5>
                                <p>Customer can pause from their account page</p>
                            </div>

                            <div class="form-check form-switch">
                                <input class="form-check-input custom-switch" type="checkbox" checked>
                            </div>

                        </div>


                        <!-- Toggle Box -->
                        <div class="custom-toggle-box mt-3">

                            <div>
                                <h5>Auto-resume after pause period ends</h5>
                                <p>Customer can turn-off anytime</p>
                            </div>

                            <div class="form-check form-switch">
                                <input class="form-check-input custom-switch" type="checkbox" checked>
                            </div>

                        </div>

                        <!-- Inputs -->
                        <div class="row g-3 mt-1">

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

                                <label class="custom-label">
                                    Max pause duration of plan
                                    <span class="text-danger">*</span>
                                </label>

                                <input type="text" class="form-control custom-input" placeholder="0 days">

                            </div>

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

                                <label class="custom-label">
                                    Min notice before pausing

                                </label>

                                <input type="text" class="form-control custom-input" placeholder="0 days">

                            </div>

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

                                <label class="custom-label">
                                    Set Renewal Remainder
                                </label>

                                <input type="text" class="form-control custom-input" placeholder="0 days">

                            </div>

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

                                <label class="custom-label">
                                    Trial period
                                </label>

                                <input type="text" class="form-control custom-input" placeholder="0 days">

                                <p class="custom-note mt-2 mb-0">
                                    <i class="ri-information-line"></i>
                                    Free trial before first charge
                                </p>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <!-- RIGHT -->
            <div class="col-lg-6">

                <div class="custom-setting-card">

                    <!-- Header -->
                    <div class="custom-setting-header">
                        <h4>Delivery Settings</h4>
                    </div>

                    <!-- Body -->
                    <div class="custom-setting-body">

                        <!-- Delivery Zone -->
                        <div class="custom-delivery-box">

                            <h5>Schedule Delivery Time Zone</h5>

                            <p>
                                Customer can pause from their account page
                            </p>

                            <div class="row g-3 mt-1">

                                <div class="col-6">
                                    <button type="button" class="btn custom-time-btn active">
                                        Morning
                                    </button>
                                </div>

                                <div class="col-6">
                                    <button type="button" class="btn custom-time-btn active">
                                        Evening
                                    </button>
                                </div>

                            </div>

                        </div>

                        <!-- Delivery Days -->
                        <div class="custom-days-box mt-4">

                            <label class="custom-label">
                                Select Delivery Days
                                <span class="text-danger">*</span>
                            </label>

                            <div class="custom-days-wrapper">

                                <button class="btn custom-day-btn active">
                                    Mon
                                </button>

                                <button class="btn custom-day-btn active">
                                    Tue
                                </button>

                                <button class="btn custom-day-btn active">
                                    Wed
                                </button>

                                <button class="btn custom-day-btn active">
                                    Thu
                                </button>

                                <button class="btn custom-day-btn active">
                                    Fri
                                </button>

                                <button class="btn custom-day-btn active">
                                    Sat
                                </button>

                                <button class="btn custom-day-btn">
                                    Sun
                                </button>

                            </div>

                        </div>


                    </div>

                </div>
                <!-- RIGHT -->
                <div class="d-flex gap-3 align-items-right btn-list mt-3 col-btn">
                    <button type="button" class="shadow-button-green d-lg-block d-none">Save as Draft</button>
                    <button type="button" class="outline-button-green">Cancel</button>

                    <!-- LEFT -->
                    <button type="button" class="button-green" data-bs-toggle="modal"
                        data-bs-target="#createProductModal">
                        Update Plan
                    </button>
                </div>

            </div>

        </div>



    </section>

@endsection
@section('scripts')

    <script>
        $(document).ready(function() {

            $('#discountType').select2();

            $('#discountType').on('change', function() {

                let value = $(this).val();

                if (value == 'percentage') {

                    $('#discountValueWrapper').show();

                    $('#discountLabel').text('Discount Percentage');

                    $('#discountPrefix').text('%');

                    $('#discountValue')
                        .attr('placeholder', 'Enter percentage');

                } else if (value == 'fixed') {

                    $('#discountValueWrapper').show();

                    $('#discountLabel').text('Fixed Discount Price');

                    $('#discountPrefix').text('₹');

                    $('#discountValue')
                        .attr('placeholder', 'Enter fixed price');

                } else {

                    $('#discountValueWrapper').hide();

                }

            });

        });
    </script>
    <script>
        $(document).ready(function() {

            $('.row-checkbox, #selectAll').on('change', function() {

                let checkedCount =
                    $('.row-checkbox:checked').length;

                if (checkedCount > 0) {

                    $('#removeSelectionBtn')
                        .removeClass('d-none');

                } else {

                    $('#removeSelectionBtn')
                        .addClass('d-none');

                }

                // Select All
                if ($(this).attr('id') === 'selectAll') {

                    $('.row-checkbox')
                        .prop(
                            'checked',
                            $(this).is(':checked')
                        );

                }

            });

        });
    </script>
    <script>
        $(document).ready(function() {

            $('.custom-day-btn').click(function() {

                $(this).toggleClass('active');

            });

        });
    </script>
@endsection