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

@section('content')
    {{-- ------------Top section start-------------------------- --}}
    <div class="product-top-section d-flex align-items-center justify-content-between mb-3">
        <div class="page-head-title1 mb-4">
            <div class="d-flex align-items-center justify-content-between mt-2">
                <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>Plan Details
                    </h2>
                </a>

            </div>
        </div>
        <!-- RIGHT SIDE BUTTONS -->
        <div class="product-action-btns d-flex gap-3">
            <div class="row1-btn">
                <button id="statusBtn" class="btn-inactive">
                    Mark as Inactive
                </button>
                <a href="{{ route('backend.template.subscription.DuplicatePlan') }}" class="btn-duplicate">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M12.2663 9.6849V13.1849C12.2663 16.1016 11.0996 17.2682 8.18294 17.2682H4.68294C1.76628 17.2682 0.599609 16.1016 0.599609 13.1849V9.6849C0.599609 6.76823 1.76628 5.60156 4.68294 5.60156H8.18294C11.0996 5.60156 12.2663 6.76823 12.2663 9.6849Z"
                            stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                        <path
                            d="M17.2663 4.6849V8.1849C17.2663 11.1016 16.0996 12.2682 13.1829 12.2682H12.2663V9.6849C12.2663 6.76823 11.0996 5.60156 8.18294 5.60156H5.59961V4.6849C5.59961 1.76823 6.76628 0.601562 9.68294 0.601562H13.1829C16.0996 0.601562 17.2663 1.76823 17.2663 4.6849Z"
                            stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    Duplicate Plan
                </a>
            </div>
            <div class="row2-btn">
                <a href="{{ route('backend.template.subscription.EditPlan') }}" class="btn-edit ">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <mask id="mask0_1853_4648" 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_1853_4648)">
                            <path
                                d="M9.16699 1.66797H7.50033C3.33366 1.66797 1.66699 3.33464 1.66699 7.5013V12.5013C1.66699 16.668 3.33366 18.3346 7.50033 18.3346H12.5003C16.667 18.3346 18.3337 16.668 18.3337 12.5013V10.8346"
                                stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path
                                d="M13.3666 2.51639L6.7999 9.08307C6.5499 9.33307 6.2999 9.82474 6.2499 10.1831L5.89157 12.6914C5.75823 13.5997 6.3999 14.2331 7.30823 14.1081L9.81657 13.7497C10.1666 13.6997 10.6582 13.4497 10.9166 13.1997L17.4832 6.63306C18.6166 5.49972 19.1499 4.18306 17.4832 2.51639C15.8166 0.849722 14.4999 1.38306 13.3666 2.51639Z"
                                stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"
                                stroke-linejoin="round" />
                            <path d="M12.4258 3.45703C12.9841 5.4487 14.5424 7.00703 16.5424 7.5737" stroke="white"
                                stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                        </g>
                    </svg>
                    Edit Plan
                </a>

                <button class="btn-delete " data-bs-toggle="modal" data-bs-target="#DeleteCategoryModal">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_1853_4659)">
                            <mask id="mask0_1853_4659" 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_1853_4659)">
                                <path
                                    d="M17.5 4.98698C14.725 4.71198 11.9333 4.57031 9.15 4.57031C7.5 4.57031 5.85 4.65365 4.2 4.82031L2.5 4.98698"
                                    stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path
                                    d="M7.08301 4.14297L7.26634 3.0513C7.39967 2.25964 7.49967 1.66797 8.90801 1.66797H11.0913C12.4997 1.66797 12.608 2.29297 12.733 3.05964L12.9163 4.14297"
                                    stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path
                                    d="M15.7086 7.61719L15.167 16.0088C15.0753 17.3172 15.0003 18.3338 12.6753 18.3338H7.32533C5.00033 18.3338 4.92533 17.3172 4.83366 16.0088L4.29199 7.61719"
                                    stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M8.6084 13.75H11.3834" stroke="white" stroke-width="1.2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M7.91699 10.418H12.0837" stroke="white" stroke-width="1.2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </g>
                        </g>
                        <defs>
                            <clipPath id="clip0_1853_4659">
                                <rect width="20" height="20" fill="white" />
                            </clipPath>
                        </defs>
                    </svg>
                    Delete Plan
                </button>
            </div>
        </div>

    </div>
    {{-- ------------Top section end-------------------------- --}}

    <div class="card bg-color-lightGreen2 shadow-light rounded-4 p-3">

        <div class="row align-items-center">
            <div class="col-md-8 col-12">
                <div class="admin-card d-flex flex-row align-items-center gap-2">

                    <div>
                        <div class="d-flex gap-2 align-items-center">
                            <h5 class="box-title mb-2">Monthly Subscription</h5>
                        </div>
                        <p class="mb-0 secondary-text fs-12">
                            PID002 | Last Updated on : 00/00/0000 </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-12">
                <div class="d-flex flex-column align-items-end gap-2">
                    <p class="mb-0 secondary-text">Plan value</p>
                    <h3 class="mb-0 fw-semibold status-green amount">₹000</h3>
                </div>
            </div>
        </div>

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

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

        <!-- Table -->
        <div class="table-responsive">

            <table class="plan-info-table">

                <!-- Row 1 -->
                <tr>

                    <td>
                        <label>Plan Name</label>
                        <h6>Lorem Ipsum</h6>
                    </td>

                    <td>
                        <label>Plan Tag</label>
                        <h6>Most Popular</h6>
                    </td>

                    <td>
                        <label>Plan status</label>
                        <h6>Active</h6>
                    </td>

                    <td>
                        <label>Plan Price(MRP₹)</label>
                        <h6>₹0000</h6>
                    </td>

                </tr>

                <!-- Row 2 -->
                <tr>

                    <td>
                        <label>Discount</label>
                        <h6>x%</h6>
                    </td>

                    <td>
                        <label>Selling Price ₹</label>
                        <h6>₹0000</h6>
                    </td>

                    <!-- Description Occupy 2 Columns -->
                    <td colspan="2">

                        <label>Description</label>

                        <p class="plan-description">
                            Lorem Ipsum dolor sit amet, consectetuer adipiscingelit.
                            Duis tellus. Donec ante dolor, iaculis nec, gravidaac,
                            cursus in, eros.
                        </p>

                    </td>

                </tr>

                <!-- Row 3 -->
                <tr>

                    <td colspan="4">

                        <label>Plan Details</label>

                        <p class="plan-details-text">
                            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.
                        </p>

                        <p class="plan-details-text mt-4">
                            At ipsum vitae est lacinia tincidunt. Maecenas elit orci,
                            gravida ut, molestie non, venenatis vel, lorem.
                            Sedlacinia. Suspendisse potenti. Sed ultricies cursuslectus.
                            In id magna sit amet nibh suscipit euismod.Integer enim.
                            Donec sapien ante, accumsan ut,sodales commodo, auctor quis,
                            lacus. Maecenas a elitlacinia urna posuere sodales.
                            Curabitur pede pede,molestie id, blandit vitae, varius ac, purus.
                        </p>

                    </td>

                </tr>

            </table>

        </div>

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

        <!-- Header -->
        <div class="custom-product-info-header">
            <h5 class="mb-0">Product Info</h5>
        </div>

        <div class="custom-table-padding">

            <div class="table-responsive">

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

                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Product Group</th>
                            <th>Product Img</th>
                            <th>Product Name</th>
                            <th>Variant & Units</th>
                            <th>MRP ₹</th>
                        </tr>
                    </thead>

                    <tbody class="m-3">

                        <!-- Row -->
                        <tr>

                            <td>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">
                                    <g clip-path="url(#clip0_1836_3891)">
                                        <mask id="mask0_1836_3891" 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_3891)">
                                            <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>
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_1836_3891">
                                            <rect width="24" height="24" fill="white" />
                                        </clipPath>
                                    </defs>
                                </svg>

                            </td>

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

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

                            <td>250 g</td>

                            <td>₹000</td>

                        </tr>

                        <!-- Row -->
                        <tr>

                            <td>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">
                                    <g clip-path="url(#clip0_1836_3891)">
                                        <mask id="mask0_1836_3891" 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_3891)">
                                            <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>
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_1836_3891">
                                            <rect width="24" height="24" fill="white" />
                                        </clipPath>
                                    </defs>
                                </svg>

                            </td>

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

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

                            <td>250 g</td>

                            <td>₹000</td>

                        </tr>

                        <!-- Row -->
                        <tr>

                            <td>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">
                                    <g clip-path="url(#clip0_1836_3891)">
                                        <mask id="mask0_1836_3891" 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_3891)">
                                            <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>
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_1836_3891">
                                            <rect width="24" height="24" fill="white" />
                                        </clipPath>
                                    </defs>
                                </svg>

                            </td>

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

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

                            <td>250 g</td>

                            <td>₹000</td>

                        </tr>

                        <!-- Row -->
                        <tr>

                            <td>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">
                                    <g clip-path="url(#clip0_1836_3891)">
                                        <mask id="mask0_1836_3891" 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_3891)">
                                            <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>
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_1836_3891">
                                            <rect width="24" height="24" fill="white" />
                                        </clipPath>
                                    </defs>
                                </svg>

                            </td>

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

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

                            <td>250 g</td>

                            <td>₹000</td>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>
    </div>
    <div class="row g-3 mt-2">

        <!-- Plan Settings -->
        <div class="col-lg-6">

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

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

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

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

                        <div>
                            <h6>Pause plan allowed</h6>
                            <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">
                        </div>

                    </div>

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

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

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

                    </div>

                    <!-- Bottom Details -->
                    <div class="row mt-2 me-1 ms-1 gy-4 bottom-1">

                        <div class="col-6">
                            <label>Max pause duration of plan</label>
                            <h6>6 days</h6>
                        </div>

                        <div class="col-6">
                            <label>Min notice before pausing (in advance)</label>
                            <h6>1 day</h6>
                        </div>

                        <div class="col-6">
                            <label>Set Renewal Remainder</label>
                            <h6>3 days</h6>
                        </div>

                        <div class="col-6">
                            <label>Trial Period</label>
                            <h6>7 days</h6>
                        </div>

                    </div>

                </div>

            </div>

        </div>

        <!-- Delivery Settings -->
        <div class="col-lg-6">

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

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

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

                    <!-- Time Zone -->
                    <div class="mb-4">

                        <label class="custom-labell">
                            Scheduled Delivery Time Zone
                        </label>

                        <div class="d-flex flex-wrap gap-2 mt-2">

                            <span class="custom-badge-green">
                                Morning
                            </span>

                            <span class="custom-badge-green">
                                Evening
                            </span>

                        </div>

                    </div>

                    <!-- Delivery Days -->
                    <div>

                        <label class="custom-labell">
                            Selected Delivery Days
                        </label>

                        <div class="d-flex flex-wrap gap-2 mt-2">

                            <span class="custom-badge-green">Mon</span>
                            <span class="custom-badge-green">Tue</span>
                            <span class="custom-badge-green">Wed</span>
                            <span class="custom-badge-green">Thu</span>
                            <span class="custom-badge-green">Fri</span>
                            <span class="custom-badge-green">Sat</span>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>
    {{-- delete modal --}}

    <div class="modal fade" id="DeleteCategoryModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-16 overflow-hidden">

                <div class="modal-header bg-color-lightRed">
                    <h3 class="text-color-error modal-title mb-0">Delete Subscrition Plan</h3>
                    <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <p class="mb-0 text-title">Are you sure you want to delete<span class="fw-semibold "> [Plan
                            Name]?</span></p>

                    <p class="mb-0 secondary-text">This action cannot be undone.</p>
                </div>

                <div class="modal-footer">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button class="button-red">Delete Plan</button>
                </div>

            </div>
        </div>
    </div>
    {{-- ----------------Inactive_modal_start------------------------- --}}
    <div id="inactiveModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content custom-modal">

                <div class="modal-header inactive-header" style=" height: 60px;">
                    <h5 class="mt-2">Inactivate Plan</h5>
                </div>

                <div class="modal-body">
                    <p class="inactive-para1"><strong>Are you sure you want to Inactivate [Plan Name]?</strong></p>
                    <p class="text-muted">
                        New customers will no longer be able to subscribe to this plan.
                    </p>
                </div>
                <div class="info-warning-box  ms-3 me-3 mb-2">
                    <ul class="mb-0 ps-3">
                        <li>Existing active subscribers will continue with their current subscription until expiry.</li>
                        <li>Deactivation will only prevent new subscriptions.</li>
                    </ul>
                </div>
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button id="confirmInactive" class="btn-inactive-action">Inactivate Plan</button>
                </div>

            </div>
        </div>
    </div>
    {{-- Inactive_modal_End --}}
    {{-- active model start --}}

    <div id="activateModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content custom-modal">

                <!-- Header -->
                <div class="modal-header activate-header">
                    <h5 class="mt-2">Activate Plan</h5>
                </div>

                <!-- Body -->
                <div class="modal-body">
                    <p class="fw-semibold">
                        Are you sure you want to Activate [Plan Name]?
                    </p>
                    <p class="text-muted">
                        Eligible customers will be able to subscribe to this plan. </p>
                </div>
                <div class="info-success-box ms-3 me-3 mb-2">
                    <ul class="mb-0 ps-3">
                        <li>The plan will become visible and available immediately.</li>
                        <li>Ensure pricing, validity, and benefits are finalized before activation.</li>
                    </ul>
                </div>
                <!-- Footer -->
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button id="confirmActivate" class="btn-activate-action">
                        Activate Plan
                    </button>
                </div>

            </div>
        </div>
    </div>
    {{-- active modal end  --}}
@endsection
<script>
    document.addEventListener("DOMContentLoaded", function() {

        let isActive = true;

        const statusBtn = document.getElementById("statusBtn");

        const inactiveModalEl = document.getElementById('inactiveModal');
        const activateModalEl = document.getElementById('activateModal');

        const inactiveModal = new bootstrap.Modal(inactiveModalEl);
        const activateModal = new bootstrap.Modal(activateModalEl);

        const confirmInactive = document.querySelector(".btn-inactive-action");
        const confirmActivate = document.getElementById("confirmActivate");

        // CLICK MAIN BUTTON
        statusBtn.addEventListener("click", function() {

            // ALWAYS hide both first (fix)
            inactiveModal.hide();
            activateModal.hide();

            if (isActive) {
                inactiveModal.show();
            } else {
                activateModal.show();
            }
        });

        // INACTIVATE CLICK
        confirmInactive.addEventListener("click", function() {

            isActive = false;

            statusBtn.innerText = "Mark as Active";
            statusBtn.classList.remove("btn-inactive");
            statusBtn.classList.add("btn-active");

            inactiveModal.hide();
        });

        // ACTIVATE CLICK
        confirmActivate.addEventListener("click", function() {

            isActive = true;

            statusBtn.innerText = "Mark as Inactive";
            statusBtn.classList.remove("btn-active");
            statusBtn.classList.add("btn-inactive");

            activateModal.hide();
        });

    });
</script>