{{-- <x-app-layout title="Scraptcha - Catcha Solver"> --}}
<x-app title="Recharge_balance" active="captcha">
    @section('extra-css')
    <style>
        .table td {
            font-size: 18px;
            font-weight: bold;
        }
    </style>
    @endsection
    <x-slot name="header">
        <h1 style="color: white;font-size:22px">
            {{ __('Rechargement du Solde') }}
        </h1>
    </x-slot>

    <div class="page-inner mt-3">
        {{-- <div class="row mt--2"> --}}
        <div class="row">
            <div class="col-md-12">
                <div class="">

                    <div class="card-body">
                        @foreach (['danger', 'success'] as $status)
                        @if (Session::has($status))
                        <div class="alert alert-{{ $status }} alert-dismissible" style="margin-top:18px;">
                            <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
                            <strong>
                                @if ($status == 'success')
                                Félicitations!
                                @else
                                Attention!
                                @endif
                            </strong>{{ Session::get($status) }}
                        </div>
                        @endif
                        @endforeach

                        <div class="row justify-content-center">

                            <div class="card col-md-10 my-4" style="width: 18rem;">
                                <div class="card-body">

                                    </p>
                                    <form id="formOffer1" class="mt-3" action="{{ route('balance.fill', ['locale' => app()->getLocale()]) }}" method="post">
                                        @csrf
                                        <div class="form-group row">
                                            <label for="balanceLabel" class="col-sm-2 col-form-label">
                                                {{ __('messages.solde_actuel') }}

                                            </label>
                                            <div class="col-sm py-2 mx-2 border">
                                                @livewire('balance')
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="inputAmount" class="col-sm-2 col-form-label">
                                                {{ __('messages.montant_ajouter') }}

                                            </label>
                                            <div class="col-sm-10">
                                                <input type="number" step="1" class="form-control" id="inputAmount" min="1" name="inputAmount" placeholder="" required>
                                            </div>
                                        </div>
                                        <input type="text" hidden id="payment-method" name="payment_method" />
                                        <div class="row">
                                            <div class="col-sm-2"></div>
                                            <div class="col-sm-10">
                                                <div class="row justify-content-center mt-4">
                                                    <button name="nameSubmitButton" class="btn btn-default waves-effect p-3 col-sm-3" id="submit-button">
                                                        {{ __('messages.valider') }}
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    </div>

    @section('extra-js')
    {{-- <script defer>
            // I used defer here, to wait for the script of stripe to load before beginning the treatment

            const stripe = Stripe(
                "pk_test_51JZshPGkjBKJY179JkwH8XLWb4jPWP8kwJYeZdKaJFYg4QAeaLTqXU8oxTjYIg3JqifLJMdAHzATsNJPhCBzFg2I00SA49spb5"
            );
            const elements = stripe.elements();
            const cardElement = elements.create('card', {
                classes: {
                    base: 'StripElement bg-white p-2 rounded-lg'
                }
            });
            cardElement.mount('#card-element');
            console.log("i was here");
            const cardButton = document.getElementById('submit-button');
            console.log("im here");
            cardButton.addEventListener('click', async (e) => {
                e.preventDefault();
                const {
                    paymentMethod,
                    error
                } = await stripe.createPaymentMethod('card', cardElement);
                if (error) {
                    alert("Un problème est survénu. Veuillez vérifier les informations fournies");
                } else {
                    document.getElementById('payment-method').value = paymentMethod.id;
                    document.getElementById('formOffer1').submit();
                }
            });
        </script> --}}
    @endsection

</x-app>