@extends('layouts.dashboard')

@section('meta')
<title>{{ config('app.name') }} - Payment Methods</title>
@endsection

@section('title')
Payment Methods
@endsection

@section('form')
@php
$user = auth()->user();
@endphp
<!--CLIENT ADMIN-->
<div class="container-fluid color-white pt-2 pb-4 shippinArea">
    <div class="container">
        <div class="row">

            <!--content Area-->
            <div id="admin-main-control" class="col-md-12">
                <div class="content-title m-x-auto col-sm-12">
                    <i class="fa fa-truck"></i> Payment Methods
                </div>

                {{-- Message Display--}}
                @if (session('success'))
                <div class="alert alert-success d-flex justify-content-center w-100">
                    {{ session('success') }}
                </div>
                @elseif (session('fail'))
                <div class="alert alert-danger d-flex justify-content-center">
                    {{ session('fail') }}
                </div>
                @endif

                <div class="col-sm-12 order-history">
                    <div class="card">
                        <div class="card-title">
                            <button class="btn btn-white-new" data-toggle="modal" data-target="#addModal"><i
                                    class="fa fa-plus"></i> Add a New Payment Method</button>

                        </div>
                        <div class="clearfix"></div>

                        @foreach ($user->paymentMethods()->map(function ($paymentMethod) {
                        return $paymentMethod->asStripePaymentMethod();
                        }) as $paymentMethod)
                        <div class="card-body">
                            <div class="row mb-2 pb-3">
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="pull-right"><label
                                                    class="label label-danger">{{ $user->defaultPaymentMethod() ? ($paymentMethod->id == $user->defaultPaymentMethod()->id ? 'Default' : '') : '' }}</label>
                                            </div>
                                            <span>{{ Str::upper($paymentMethod->card->brand) }}
                                                ••••{{ $paymentMethod->card->last4 }}</span><br>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="row justify-content-between">
                                                <div class="col-md-4 ml-3">
                                                    <div class="row">
                                                        <b>Expiry At:
                                                            {{ $paymentMethod->card->exp_month }}/{{ $paymentMethod->card->exp_year }}</b>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="pull-right">
                                                        <button class="btn btn-white-new" data-toggle="modal"
                                                            data-target="#deleteModal-{{ $paymentMethod->id }}">Delete</button>
                                                    </div>
                                                    <div class="pull-right">
                                                        @if (!$user->defaultPaymentMethod() || $paymentMethod->id !=
                                                        $user->defaultPaymentMethod()->id)
                                                        <form action="{{ route('payment-methods-default') }}"
                                                            method="POST">
                                                            @csrf
                                                            <input type="hidden" name="payment_method_id"
                                                                value="{{ $paymentMethod->id }}">
                                                            <button class="btn btn-white-new mr-2">Set
                                                                as Default</button>
                                                        </form>
                                                        @endif
                                                    </div>
                                                    <!-- Modal -->
                                                    <div class="modal fade" id="deleteModal-{{ $paymentMethod->id }}"
                                                        tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                                                        aria-hidden="true">
                                                        <div class="modal-dialog modal-dialog-centered">
                                                            <div class="modal-content">
                                                                <form action="{{ route('payment-methods') }}"
                                                                    method="post">
                                                                    @csrf
                                                                    @method('delete')
                                                                    <input type="hidden" name="payment_method_id"
                                                                        value="{{ $paymentMethod->id }}">
                                                                    <div class="modal-header">
                                                                        <h5 class="modal-title" id="exampleModalLabel">
                                                                            Delete Payment Method</h5>
                                                                        <button type="button" class="close"
                                                                            data-dismiss="modal" aria-label="Close">
                                                                            <span aria-hidden="true">&times;</span>
                                                                        </button>
                                                                    </div>
                                                                    <div class="modal-body">
                                                                        Confirm the deletion of payment method
                                                                        {{ Str::upper($paymentMethod->card->brand) }}
                                                                        ••••{{ $paymentMethod->card->last4 }}
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-secondary"
                                                                            data-dismiss="modal">Close</button>
                                                                        <button type="submit"
                                                                            class="btn btn-primary">Confirm</button>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr class="my-0" style="border-color: inherit">
                        @endforeach
                    </div>

                </div>

            </div>
            <!--content Area-->
        </div>
    </div>
</div>
<!--CLIENT ADMIN-->

<!-- Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="{{ route('payment-methods') }}" method="post" id="add-form">
                @csrf
                <input type="hidden" name="payment_method_id" id="payment_method_id">
                <div class="modal-header">
                    <h5 class="modal-title">
                        Add Payment Method</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group col-md-12">
                        <div class="form-group">
                            <label for="card-holder-name">Card Holder Name</label>
                            <input id="card-holder-name" placeholder="Card Holder Name" class="form-control"
                                type="text">
                        </div>
                        <div class="form-group">
                            <label for="card-element">Credit or Debit Card</label>
                            <!-- Stripe Elements Placeholder -->
                            <div id="card-element" class="form-control"
                                style='height: 2.4em; padding-top: .3em; padding-bottom: .3em;'>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button id="card-button" data-secret="{{ $intent->client_secret }}" type="button"
                        class="btn btn-primary">Confirm</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://js.stripe.com/v3/"></script>
{{-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> --}}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
    integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous">
</script>

<script>
    $ = jQuery;

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

    const elements = stripe.elements();
    const cardElement = elements.create('card');

    cardElement.mount('#card-element');

    const cardHolderName = document.getElementById('card-holder-name');
    const cardButton = document.getElementById('card-button');
    const clientSecret = cardButton.dataset.secret;

    cardButton.addEventListener('click', async (e) => {
        const { setupIntent, error } = await stripe.confirmCardSetup(
            clientSecret, {
                payment_method: {
                    card: cardElement,
                    billing_details: { name: cardHolderName.value }
                }
            }
        );

        if (error) {
            alert(error.message);
        } else {
            $('#payment_method_id').val(setupIntent.payment_method);
            $('#add-form').submit();
        }
    });
</script>
@endsection