@extends(backpack_view('blank'))

@section('content')

<div class="row">
    @if ( $isDefaultPaymentMethodExpire ) 
        
        <div class="alert alert-danger d-flex align-items-center payment-method-alert" role="alert">
            <i class="las la-exclamation-triangle"></i>
            No valid default payment method is available.<br />
            Charges will fail until you add a new default. Set another card as default or add a new one.
        </div>

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

                                @if ($paymentMethod->isExpired)
                                    <span class="badge bg-danger mt-2">
                                        Expired
                                    </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)

                                    @if (!$paymentMethod->isExpired)
                                        <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>
                                @else
                                    @if ( $isDefaultPaymentMethodExpire ) 
                                        This default payment method has expired.  Please add a new payment method or make another payment method as default.
                                    @endif
                                @endif
                            </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