<?php
    require_once('./pin/header.php');
    require_once('./pin/navbar.php');
    require_once('./pin/sidebar.php');
?>
    <style>
        #your-plan{
            margin: 8rem;
            margin-left: 20rem;
        }
        .plain-details{
            width: 40%;
            border: 1.5px solid lightgrey;
            background-color: white;
        }
        .user-add-on{
            border: 1.5px solid lightgrey;
            background-color: white;
            width: 50%;
        }

        @media (max-width:575px){
            #your-plan{
                margin: 7rem 1rem;
            }
            .alert-div{
                padding: 0.5rem !important;
            }
            .plain-details{
                padding: 1rem !important;
                width: unset;
            }
            .user-add-on{
                width: unset;
            }
            #basic-plan-p{
                font-size: small;
            }
            .alert-div span{
                font-size: x-small;
            }
            .price-span{
                font-size: medium !important;
            }
            .per-month-span{
                font-size: x-small !important;
            }
            #switch-plan-btn{
                font-size: x-small;
            }
            .number-unique-p{
                font-size: small;
            }
            .chatbot-sessions-div{
                flex-direction: column;
                gap: 1rem;
                align-items: center !important;
                margin-bottom: unset !important;
            }
            .user-add-on p{
                font-size: small;
            }
            .chatbot-sessions-details{
                margin-right: unset !important;
            }
            .chatbot-sessions-details p{
                font-size: x-small;
            }
            .monthly-chatbot-sessions-div{
                padding: 1rem !important;
            }
            
        }
        @media (min-width:576px) and (max-width:800px){
            #your-plan{
                margin: 7rem 1rem;
            }
            .plain-details {
                width: 60%;
            }
            #buy-bot-sessions{
                font-size: small;
            }
            .chatbot-sessions-details{
                margin-right: 1rem !important;
            }
        }
        @media (min-width: 801px) and (max-width:1039px) {
            #your-plan{
                margin: 7rem 1rem;
            }
            .plain-details {
                width: 45%;
            }
        }
    </style>

<div id="your-plan">
    <div>
        <div>
            <h6 class="fw-bold mb-4">Your Plan</h6>
        </div>
        <div class="p-4 rounded-3 plain-details">
            <div>
                <p><strong>Growth Plan</strong> <span>(Monthly Subscription)</span></p>
                <p id="basic-plan-p">Basic plan suited for small businesses</p>
            </div>
            <div class="alert alert-warning alert-div" role="alert" style="display: flex; gap:5px; align-items: center;">
                <span class="text-white rounded-circle d-flex justify-content-center align-items-center" 
                    style="width: 1rem; height: 1rem; font-size: 1rem; padding: 0; background-color: #eda073";>
                    i
                </span>
                <span> Your plan will be renewed on - 9th May 2025</span>
            </div>
            <div class="d-flex justify-content-between align-items-center">
                <p class="m-0 "><span>₹</span><span class="fw-bold fs-2 price-span">2,499</span><span class="per-month-span">per month</span></p>
                <button class="btn btn-success" id="switch-plan-btn">Switch Plan</button>
            </div>
        </div>
    </div>

    <div class="mt-4">
        <div>
            <h6 class="fw-bold mb-3">Add-on</h6>
        </div>
        <div class="p-4 rounded-3 monthly-chatbot-sessions-div" style="border: 1.5px solid lightgrey; background-color:white;">
            <div>
                <h5 class="fw-bold">Monthly Chatbot Sessions</h5>
                <p class="number-unique-p">Number of unique times chatbots have been triggered in a billing month</p>
            </div>
            <div class="d-flex align-items-end mb-3 chatbot-sessions-div">
                <div class="flex-fill me-5 chatbot-sessions-details">
                    <div class="d-flex justify-content-between">
                        <p style="font-weight: 600;">Chatbot Sessions in your Plan<span style="color:#eda073; font-weight: bold; font-style: italic;"> (Monthly Usage resets in 11 days)</span></p>
                        <p style="font-weight: 600;">Chatbot Session Left</p>
                    </div>
                    <div class="d-flex justify-content-between">
                        <p class="fw-bold mb-1">1000</p>
                        <p class="fw-bold mb-1">1000</p>
                    </div>
                    <div style="height:7px; background-color: lightgrey; width:100%"></div>
                </div>
                <div>
                    <button class="btn btn-success" id="buy-bot-sessions">Buy Bot Sessions</button>
                </div> 
            </div>
        </div>

        <div class="p-4 rounded-3 mt-4 user-add-on">
                <div>
                    <h5 class="fw-bold">User Add-on</h5>
                </div>
                <div class="mt-3">
                    <p class="mb-0">You do not have additional users on your account.</p>
                    <p class="mb-0">You can purchase additional Users.</p>
                </div>
                <div class="mt-3">
                    <button class="btn btn-success" id="add-user">Add user</button>
                </div> 
        </div>
        
    </div>
    
    <!-- Footer -->
    <footer class="footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col fs-13 text-muted text-center">
                    © <script>
                        document.write(new Date().getFullYear())
                    </script>2025 - Made with <span class="mdi mdi-heart text-danger"></span> by <a href="#!" class="text-reset fw-semibold">Watify.io</a>
                </div>
            </div>
        </div>
    </footer>
</div>

<?php
    require_once('./pin/footer.php');
?>