@extends('layouts.auth')

@section('content')

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style type="text/css">
    .loginbox 
    {
        max-width: 900px;
    }
    .login-wrapper .loginbox .login-right {
        width: 500px;
    }
    .text-left 
    {
        text-align:left;
    }
    .panel-title {
        display: inline; 
        font-weight: bold;
    }
    .display-table {
        display: table;
    }
    .display-tr {
        display: table-row; 
    }
    .display-td {
        display: table-cell;
        vertical-align: middle;
        width: 61%;
    }
    .hide{
        display: none;
    }
    #card-element {
        border: 1px solid #ddd;
        box-shadow: none;color: #333;
        font-size: 15px;
        height: 45px;
        padding: 10px;
    }
    #link-save {
        display:none;
    }
    #link-pay {
        display:none;
    }
</style> 

<div class="login-right">
    <div class="login-right-wrap text-center">
        <center>
            <img class="img-fluid" src="{{ Storage::disk('s3')->url('images/logo.png') }}" style="max-width:100px;" alt="Logo">
        </center>
 
        @include('layouts.errors')

        <div class="row mt-3 mb-3">
            <div class="col-md-12 text-left">
                <label for="coupon" class="form-label">Promo Code (Optional)</label>
                <input
                    id="coupon"
                    type="text"
                    class="form-control"
                    name="coupon"
                    autocomplete="off"
                    placeholder="Enter your promo code if available">
                <small id="coupon_msg" class="text-muted">
                    If you have a promo code, enter it here to receive your discount.
                </small>
            </div>
        </div>

        <h2>Enter your card details below.</h2>

        <div class="row mt-3">
            <div class="col-md-8 text-left">{{ $plan->name }}</div>
            <div class="col-md-4 text-left">${{ number_format($plan->price, 2) }}</div>
        </div>

        <div class="row">
            <div class="col-md-8 text-left">Discount</div>
            <div class="col-md-4 text-left discount-amount">-$0.00</div>
        </div>

        <div class="row mb-2">
            <div class="col-md-8 text-left">Total</div>
            <div class="col-md-4 text-left" id="final_amount">${{ number_format($plan->price, 2) }}</div>
        </div>
        
        <!-- Form -->
        <form id="payment-form" action="{{ route('payment.post', $user->id) }}" method="POST">
        @csrf

            <input type="hidden" name="plan" id="plan" value="{{ $plan->id }}">
            <input type="hidden" name="coupon_id" id="coupon_id" value="">


            <div class="form-group mt-1 text-left">
                <label>Name <span class="login-danger">*</span></label>
                <input type="text" name="name" id="card-holder-name" class="form-control" value="" placeholder="Name on the card" autocomplete="off">
            </div>

            <div class="form-group mt-1 text-left">
                <label for="card-element">Card details <span class="login-danger">*</span></label>
                <br>
                <div id="card-element"></div>
            </div>

            <div class="form-group mt-3 text-left">
                <button type="submit" class="btn btn-primary" id="card-button" data-secret="{{ $intent->client_secret }}">Purchase</button>
            </div>
        </form>
        <!-- /Form -->
    </div>
</div>


<script src="https://js.stripe.com/v3/"></script>
<script>
    const stripe = Stripe('{{ env('STRIPE_KEY') }}')
   
    const elements = stripe.elements()
    const cardElement = elements.create('card')
   
    cardElement.mount('#card-element')
   
    const form = document.getElementById('payment-form')
    const cardBtn = document.getElementById('card-button')
    const cardHolderName = document.getElementById('card-holder-name')
   
    form.addEventListener('submit', async (e) => {
        e.preventDefault()
   
        cardBtn.disabled = true
        const { setupIntent, error } = await stripe.confirmCardSetup(
            cardBtn.dataset.secret, {
                payment_method: {
                    card: cardElement,
                    billing_details: {
                        name: cardHolderName.value
                    }   
                }
            }
        )
   
        if(error) {
            cardBtn.disable = false
        } else {
            let token = document.createElement('input')
            token.setAttribute('type', 'hidden')
            token.setAttribute('name', 'token')
            token.setAttribute('value', setupIntent.payment_method)
            form.appendChild(token)
            form.submit();
        }
    })
</script>

@endsection