@extends('front.layout.app')

@section('content')

<style>
header {
    background: #011452;
    padding: 0;
}
</style>

<style>
/* // ************ MemberShip Page ************* // */
.pricingTable {
    background: radial-gradient(#fff, #f9f9f9, #eee);
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    padding: 0 0 35px;
    border-radius: 25px;
    box-shadow: 5px 0 10px rgb(0 0 0 / 30%);
    position: relative;
}

.pricingTable .pricingTable-header {
    color: #fff;
    background: #011452;
    padding: 35px 20px 0;
    border-radius: 25px 25px 0 0;
    margin: 0 0 50px;
}

.pricingTable .price-value .currency {
    font-size: 35px;
    font-weight: 300;
    line-height: 35px;
    vertical-align: top;
    display: inline-block;
}

.pricingTable .price-value .amount {
    font-size: 58px;
    font-weight: 700;
    line-height: 45px;
    display: inline-block;
}

.pricingTable .price-value .duration {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 0 0 0 -5px;
    display: inline-block;
}

.pricingTable .title {
    color: #fff;
    background: #818181;
    font-size: 33px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 5px 20px;
    margin: 0;
    border-radius: 5px;
    display: inline-block;
    transform: translateY(25px);
}

.pricingTable .pricing-content {
    text-align: left;
    padding: 0;
    margin: 20px 0 40px;
    list-style: none;
    display: inline-block;
}

.pricingTable .pricing-content li {
    color: #666;
    font-size: 17px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 35px;
    padding: 0 0 0 35px;
    margin: 0 0 5px;
    position: relative;
}

.pricingTable .pricing-content li:last-child {
    margin: 0;
}

.pricingTable .pricing-content li:before {
    content: "\f00c";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    color: #ffffff;
    color: #fff;
    background: #00df78;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
    line-height: 21px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    position: absolute;
    top: 7px;
    left: 0;
}

.pricingTable .pricing-content li.disable:before {
    content: "\f00c";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    color: #ffffff;
}

.pricingTable .pricingTable-signup a {
    color: #011452;
    font-size: 19px;
    transition: all 0.3s ease;
}

.pricingTable .pricingTable-signup a:hover {
    color: #fff;
}

.membership {
    margin-top: 142px;
    padding: 200px 0;
    position: relative;
}

.membership::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://custom.democlientlink.com/wisezone/public/assets/front/images/membership-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

.membership::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 21%);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

/* // ************ MemberShip Page ************* // */
</style>

<main>
    @if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @endif
    
    @if(session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif

    <section class="membership">
        <div class="demo">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-4 col-sm-6">
                        <div class="pricingTable">
                            <div class="pricingTable-header">
                                <div class="price-value">
                                    <span class="currency">$</span>
                                    <span class="amount" name="amount">10</span>
                                    <span class="duration">/month</span>
                                </div>
                                <h3 class="title">Standard</h3>
                            </div>
                            <ul class="pricing-content">

                                <li>50GB Disk Space</li>
                                <li>50 Email Accounts</li>
                                <li>50GB Bandwidth</li>
                                <li class="disable">Maintenance</li>
                                <li class="disable">15 Subdomains</li>
                            </ul>
                            <div class="pricingTable-signup">
                                <div class="my-3">
                                    <a class="stripe" href="https://buy.stripe.com/test_7sIcOPda0dcE5YA9AA"><img style="    width: 200px; height: 40px; object-fit: contain; border-radius: 32px;
                                    background: #6772e5;" src="https://custom.democlientlink.com/wisezone/public/assets/front/images/stripe.png" /></a>
                                </div>
                                <div>
                                    <form action="{{ route('create-payment') }}" method="post">
                                        @csrf
                                        <!-- Include the required PayPal fields -->
                                        <input type="hidden" name="cmd" value="_xclick">
                                        <input type="hidden" name="business" value="sb-47xa1g28036193@business.example.com">
                                        <input type="hidden" name="currency_code" value="USD">
                                        <input type="hidden" name="item_name" value="Standard Membership">
                                        <input type="hidden" name="amount" value="10.00">
                                        <!-- Other optional fields can be added here -->
                                        <!--<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif" name="submit" alt="Pay with PayPal">-->
                                        <input class="paypal" type="image" src="https://custom.democlientlink.com/wisezone/public/assets/front/images/paypal.png" name="submit" style="width: 200px; height: 40px;">
                                    </form>
                                    <!---->
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--<div class="col-md-4 col-sm-6">-->
                    <!--    <div class="pricingTable pink">-->
                    <!--        <div class="pricingTable-header">-->
                    <!--            <div class="price-value">-->
                    <!--                <span class="currency">$</span>-->
                    <!--                <span class="amount">20</span>-->
                    <!--                <span class="duration">/month</span>-->
                    <!--            </div>-->
                    <!--            <h3 class="title">Business</h3>-->
                    <!--        </div>-->
                    <!--        <ul class="pricing-content">-->
                    <!--            <li>50GB Disk Space</li>-->
                    <!--            <li>50 Email Accounts</li>-->
                    <!--            <li>50GB Bandwidth</li>-->
                    <!--            <li>Maintenance</li>-->
                    <!--            <li class="disable">15 Subdomains</li>-->
                    <!--        </ul>-->
                    <!--        <div class="pricingTable-signup">-->
                    <!--            <a href="#">Subscribe Now</a>-->
                    <!--        </div>-->
                    <!--    </div>-->
                    <!--</div>-->
                </div>
            </div>
        </div>
    </section>



</main>

@section('script')

<script src="https://www.paypal.com/sdk/js?client-id=AUjradvlHlAFLtGSvv1_woiMmsMjhKWaN8xIFEVxz_Ut9XWUWodiJB4yV4q8sVlNn7jk_icIqj6-EeXf"></script>

<script>
    import { loadScript } from "@paypal/paypal-js";
    loadScript({ "client-id": YOUR_CLIENT_ID })
    .then((paypal) => {
        // start to use the PayPal JS SDK script
    })
    .catch((err) => {
        console.error("failed to load the PayPal JS SDK script", err);
    });
</script>

@endsection
@endsection