<?php
    require_once('./pin/header.php');
    require_once('./pin/navbar.php');
    require_once('./pin/sidebar.php');
?>
    <style>
        #billing-details{
            margin-top: 8rem;
            margin-left: 20rem;
        }

        @media (max-width:575px){
            #billing-details{
                margin: 7rem 2rem;
                width: unset !important;
                font-size: smaller;
            }
            #manage-subscription{
                font-size: small;
            }
        }
        @media (min-width:576px) and (max-width:800px){
            #billing-details{
                margin: 7rem 4rem;
                width: unset !important;
            }
        }
        @media (min-width: 801px) and (max-width:1039px) {
            #billing-details{
                margin: 7rem 4rem;
                width: 70% !important;
            }
        }
    </style>
    <div id="billing-details" class="d-flex flex-column gap-5 w-50">
        <div>
            <div>
                <h3>Billing Contact</h3>
            </div>
            <div class="mt-3 d-flex flex-column gap-3">
                <div class="d-flex justify-content-between">
                    <span>Name</span>
                    <span class="fw-bold">Gaurav Garg</span>
                </div>
                <div class="d-flex justify-content-between">
                    <span>Email ID</span>
                    <span class="fw-bold">gauravgarg3516@gmail.com</span>
                </div>
                <div class="d-flex justify-content-between">
                    <span>Country Code</span>
                    <span class="fw-bold">India(+91)</span>
                </div>
                <div class="d-flex justify-content-between">
                    <span>Personal WhatsApp Number</span>
                    <span class="fw-bold">8221936311</span>
                </div>
            </div>
        </div>
        <div>
            <div>
                <h3>Payment Method</h3>
            </div>
            <div  class="d-flex flex-column gap-3 mt-3">
                <div class="d-flex justify-content-between">
                    <span>Renews On</span>
                    <span class="fw-bold">09 May 2025</span>
                </div>
                <div class="d-flex justify-content-between">
                    <span>Visa</span>
                    <span class="fw-bold">***************1698</span>
                </div>
            </div>
        </div>
        <div>
            <button class="btn btn-success" id="manage-subscription">Manage Subscription</button>
        </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>

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