<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ asset('resources/views/Admin/pages/subscriptions/subscription-style.css') }}" />

    <title>My Subscription</title>
</head>
<style>
    @media screen and (max-width: 767px) {
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            height: 100vh;
            position: relative;
        }
        .main-inn {
            padding-top: 24px;
        }
        .footer .d-flex img {
            width: 40px;
            margin-right: 10px;
        }
        .footer {
            align-items: center;
            background: #000;
            display: flex;
            justify-content: space-between;
            padding: 10px;
            color: #fff;
            width: 100%;
            position: absolute;
            bottom: 0;
        }

        .footer p {
            font-size: 13px;
        }

        .footer a {
            font-size: 12px;
            border: 1px solid #fff;
            padding: 3px 8px;
            border-radius: 20px;
        }

      

        /* section.new-subs-main {
            min-height: 100vh;
        } */
    }
</style>

<body>
    <section class="new-subs-main">
       
        <div class="container">
            {{-- <h3 class="comm-head mt-3 d-flex gap-2" style="font-size: 20px;">
               
                My Active Plan
            </h3> --}}
            <div class="main-inn">
                <div class="inn-group mb-4">
                    <label class="comm-head" for="">Plan Name</label>
                    <input type="text" class="form-control other-input mt-3" readonly placeholder="Monthly Plan"
                        value="Monthly Plan">
                </div>
                <div class="inn-group my-4">
                    <label class="comm-head" for="">Subscription Charge</label>
                    <input type="text" class="form-control other-input mt-3" readonly
                        value="${{ $isSubscribedUser->amount }}">
                </div>
                @if ($isSubscribedUser->is_cancelled_subscription == 0)
                    <div class="inn-group my-4">
                        <label class="comm-head" for="">Next Renewal Due Amount</label>
                        <input type="text" class="form-control other-input mt-3" readonly
                            value="${{ $isSubscribedUser->next_invoice_amount }}">
                    </div>
                @endif

                <div class="inn-group my-4">
                    <label class="comm-head" for="">Renewal Date</label>
                    <input type="text" class="form-control other-input mt-3" readonly
                        value="{{ \Carbon\Carbon::parse($isSubscribedUser->next_payment_date)->format('M j, Y') }}">
                </div>
            </div>
            <div class="my-3">
                <hr>

                @if ($isSubscribedUser->is_cancelled_subscription == 0)
                    <a href="" class="subscribe-button mt-0" type="button" data-bs-toggle="modal"
                        data-bs-target="#exampleModal">Cancel
                        Subscription</a>
                @else

                          
                    <div class="inn-group my-4">
                        <label class="comm-head" for="">You cancelled your subscription on :</label>

                        <h6 style="font-weight: bold;">
                            {{ \Carbon\Carbon::parse($isSubscribedUser->cancelled_at)->format('M d, Y') }}.</h6>
                    </div>
                    <div class="inn-group my-4">
                        <label class="comm-head" for="">You still have access to free drinks until:</label>
                        <h6 style="font-weight: bold;">
                            {{ \Carbon\Carbon::parse($isSubscribedUser->next_payment_date)->format('M d, Y') }}.</h6>
                    </div>
                @endif
            </div>
   
        </section>
 
    <!-- Modal start -->
    <form is="cancelSubscriptionForm" action="{{ route('cancel-subscription') }}" method="POST">
        @csrf
        <input type ="hidden" name="iam_principal_xid" value="{{ $isSubscribedUser->iam_principal_xid }}" />
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel"></h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            <img src="{{ asset('resources/views/Admin/pages/subscriptions/images/x.svg') }}"
                                alt="">

                        </button>
                    </div>
                    <div class="modal-body">
                        <p class="text-center para">If you cancel now, you can still access your subscription until
                            {{ \Carbon\Carbon::parse($isSubscribedUser->next_payment_date)->format('M d, Y') }} After
                            this date, you will no longer be able
                            to redeem a drink.
                        </p>
                        <p class="text-center mt-3 para">Are you sure you want to cancel?
                        </p>
                    </div>
                    <div class="modal-footer justify-content-center gap-3 my-4">
                        <button type="button" class="no-btn" data-bs-dismiss="modal">No</button>
                        <button type="submit" class="yes-btn" data-bs-toggle="modal"
                            id="confirmCancellation">Yes</button>
                        {{-- data-bs-target="#tar-mod" --}}

                    </div>
                </div>
            </div>
        </div>

    </form>
    <!-- Modal end -->

    <!-- Modal start target -->
    <div class="modal fade bottom-mod" id="tar-mod" tabindex="-1" aria-labelledby="tar-modLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-bottom">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="tar-modLabel"></h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <img src="{{ asset('resources/views/Admin/pages/subscriptions/images/x.svg') }}"
                            alt="">

                    </button>
                </div>
                <div class="modal-body mb-4">
                    <div class="mod-img d-flex align-items-center justify-content-center mb-3">
                        {{-- <img src="images/dull.png" alt=""> --}}
                        <img src="{{ asset('resources/views/Admin/pages/subscriptions/images/dull.png') }}"
                            alt="">

                    </div>
                    <p class="para-mid text-center">Your subscription has been cancelled successfully!</p>
                </div>
                <!-- <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div> -->
            </div>
        </div>
    </div>

    <!-- Modal end -->
    <!-- Footer start target -->

    <footer>
        <div class="footer">
            <div class="d-flex">
                <img src="{{ asset('https://www.wdipl.com/public/img/black_logo.svg') }}" />
                <p>Enjoying the App?<br> Want to build your own?</p>
            </div>
            <a href="https://www.wdipl.com/contact-us" target="_blank">Contact WDI</a>
        </div>
    </footer>


    <!-- Footer end -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>

    <script type="module">
        import {
            Tablist
        } from "https://cdn.jsdelivr.net/npm/jolty@0.6.2/dist/jolty.esm.min.js";
        document.addEventListener('DOMContentLoaded', () => {
            Tablist.initAll();
        });

        // $(document).ready(function () {
        //     // Handle the confirmation modal
        //     $('#confirmCancellation').click(function () {
        //         $('#cancelSubscriptionForm').submit();
        //     });
        // });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {
            // Hide the alert after 3 seconds (3000 milliseconds)
            setTimeout(function() {
                $('#alert-success').fadeOut('slow');
            }, 3000);
            setTimeout(function() {
                $('#alert-danger').fadeOut('slow');
            }, 3000);
        });
    </script>


</body>


</html>
