@extends(backpack_view('blank'))

@section('content')

<div class="row pt-4">

    {{-- Existing Payment Methods --}}
    <div class="col-md-8">

        <div class="card">

            <div class="card-header">
                <h4 class="mb-0">
                    <i class="la la-credit-card"></i>
                    Payment Methods
                </h4>
            </div>

            <div class="card-body">

                <table class="table table-bordered align-middle">

                    <thead>
                        <tr>
                            <th width="100">Status</th>
                            <th>Card</th>
                            <th>Expiry</th>
                            <th width="220"></th>
                        </tr>
                    </thead>

                    <tbody>

                    @forelse($paymentMethods as $paymentMethod)

                        <tr>

                            <td>

                                @if($defaultPaymentMethod == $paymentMethod->id)

                                    <span class="badge bg-success">
                                        Default
                                    </span>

                                @endif

                            </td>

                            
                            <td>

                                <i class="la la-credit-card me-2"></i>

                                {{ ucfirst($paymentMethod->card->brand) }}

                                **** **** ****

                                {{ $paymentMethod->card->last4 }}

                            </td>


                            <td>

                                {{ sprintf('%02d', $paymentMethod->card->exp_month) }}
                                /
                                {{ $paymentMethod->card->exp_year }}

                            </td>


                            <td>


                                @if($defaultPaymentMethod != $paymentMethod->id)

                                    <form
                                        method="POST"
                                        action="{{ route('backpack.account.payment-methods.default', $paymentMethod->id) }}"
                                        class="d-inline">

                                        @csrf

                                        <button
                                            type="submit"
                                            class="btn btn-sm btn-primary">

                                            Make Default

                                        </button>

                                    </form>

                                @endif



                                <form
                                    method="POST"
                                    action="{{ route('backpack.account.payment-methods.delete', $paymentMethod->id) }}"
                                    class="d-inline">

                                    @csrf

                                    @method('DELETE')

                                    <button
                                        type="submit"
                                        class="btn btn-sm btn-danger"
                                        onclick="return confirm('Are you sure you want to remove this card?')">

                                        Delete

                                    </button>

                                </form>


                            </td>


                        </tr>


                    @empty

                        <tr>

                            <td colspan="4" class="text-center">

                                No saved payment methods.

                            </td>

                        </tr>

                    @endforelse


                    </tbody>

                </table>

            </div>

        </div>

    </div>



    {{-- Add Card --}}
    <div class="col-md-4">


        <div class="card">


            <div class="card-header">

                <h5 class="mb-0">

                    <i class="la la-plus-circle"></i>

                    Add Credit Card

                </h5>

            </div>


            <div class="card-body">


                <form id="payment-form">


                    <div id="payment-element"></div>


                    <button
                        id="submit-button"
                        type="submit"
                        class="btn btn-success w-100 mt-3">

                        Save Card

                    </button>


                    <div
                        id="payment-message"
                        class="text-danger mt-2">
                    </div>


                </form>


            </div>


        </div>


    </div>


</div>


@endsection



@push('after_scripts')


<script src="https://js.stripe.com/v3/"></script>


<script>


const stripe = Stripe(
    "{{ config('services.stripe.public') }}"
);


let elements;



async function initStripePaymentElement()
{


    const response = await fetch(
        "{{ route('backpack.account.payment-methods.setup-intent') }}",
        {
            method: "POST",

            headers: {

                "X-CSRF-TOKEN":
                    "{{ csrf_token() }}",

                "Accept":
                    "application/json",

                "Content-Type":
                    "application/json"

            }
        }
    );


    const data = await response.json();


    elements = stripe.elements({

        clientSecret: data.client_secret

    });


    const paymentElement = elements.create(
        'payment',
        {
            layout: 'tabs'
        }
    );


    paymentElement.mount(
        '#payment-element'
    );


}



initStripePaymentElement();




document
.getElementById('payment-form')
.addEventListener(
    'submit',
    async function(e)
    {

        e.preventDefault();


        const button =
            document.getElementById('submit-button');


        const message =
            document.getElementById('payment-message');


        button.disabled = true;

        message.innerHTML = '';



        const {error} =
            await stripe.confirmSetup({

                elements,


                confirmParams: {

                    return_url:
                        "{{ route('backpack.account.payment-methods') }}"

                }

            });



        if(error)
        {

            message.innerHTML =
                error.message;

            button.disabled = false;

        }


    }
);


</script>


@endpush