@extends('layouts.auth')

@section('content')
	<div class="container">
		<div class="row">
			<nav class="navbar fixed-top" style="opacity: 1;">
				<div class="d-flex align-items-center navbar-left">
					<a class="navbar-logo" href="/">
						<span class="logo d-none d-xs-block"></span>
						<span class="logo-mobile d-block d-xs-none"></span>
					</a>
				</div>

				<div class="navbar-right">
					<div class="header-icons d-inline-block align-middle"></div>
					<div class="user d-inline-block"></div>
				</div>
			</nav>
		</div>

		<div style="margin-top:100px;"></div>

		<div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">                   
    
                    <div class="card-body">

                    <div class="pb-2">
                    <h2> You will be charged ${{ number_format($plan->amount, 2) }} for {{ $plan->title }} Plan</h2>
                    </div>

                        <form id="payment-form" action="{{ route('subscription.create') }}" method="POST">
                            @csrf
                            <input type="hidden" name="plan" id="plan" value="{{ $plan->id }}">
    
                            <div class="row">
                                <div class="col-xl-12 col-lg-12">
                                    <div class="form-group">
                                        <label for="">Name</label>
                                        <input type="text" name="name" id="card-holder-name" class="form-control" value="" placeholder="Name on the card">
                                    </div>
                                </div>
                            </div>
    
                            <div class="row">
                                <div class="col-xl-12 col-lg-12">
                                    <div class="form-group">
                                        <label for="">Card details</label>
                                        <div id="card-element"></div>
                                    </div>
                                </div>
                                <div class="col-xl-12 col-lg-12">
                                <hr>
                                    <button type="submit" class="btn btn-primary" id="card-button" data-secret="{{ $intent->client_secret }}">Purchase</button>
                                </div>
                            </div>
    
                        </form>
    
                    </div>

                    
                </div>
            </div>
        </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