{{-- <x-app-layout title="Scraptcha - Catcha Solver"> --}}
<x-app title="Captcha Solver" 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">
            {{ __('Captcha Solver') }}
        </h1>
    </x-slot>

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

                    <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="col-sm-5">
                                <h1 class="h2"> {{ __('messages.title_captcha_solver') }} </h1>
                                <p class="text-lg pb-3">
                                    {{ __('messages.descp_captcha_solver') }}
                                </p>
                                <p class="text-lg">
                                    {{ __('messages.descp_captcha_solver2') }}
                                </p>
                                <div class="mt-5">
                                    <a href="https://scraptcha.com/documentation" class="inline-flex items-center justify-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 focus:outline-none focus:border-red-700 focus:ring focus:ring-red-200 active:bg-red-600 disabled:opacity-25 transition text-decoration-none" id="doc">
                                        Documentation
                                    </a>
                                </div>
                            </div>
                            <div class="col-sm-5 p-5">
                                <img src="{{ asset('images/services/screen2.png') }}" alt="Recaptcha">
                            </div>
                            <div class="card col-md-10 my-4" style="width: 18rem;">
                                <div class="card-body">
                                    <h5 id="balance" class="card-title">
                                        {{ __('messages.balance') }}

                                    </h5>
                                    {{-- <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> --}}
                                    <p class="card-text">
                                        {{ __('messages.text_min_paiement') }}

                                    </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>
                                        {{-- <div class="row mt-3">
                                            <div class="col-sm-2 py-3 pl-4">Informations de la carte</div>
                                            <div class="border py-3 ml-3 mr-4 col-sm " id="card-element">
                                            </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>

                                {{-- <a href="#" class="card-link">Card link</a> --}}
                                {{-- <a href="#" class="card-link">Another link</a> --}}
                            </div>

                        </div>
                    </div>

                    <h4 class="card-title text-center my-4">
                        {{ __('messages.nos_solutions') }}

                    </h4>


                    <div class="row justify-content-center align-items-center my-1">

                        <div class="col-md-10">
                            <table class="table">
                                <thead class="thead-light">
                                    <tr>
                                        <th scope="col"><i class="fas fa-fingerprint text-lg"></i> &nbsp;
                                            {{ __('messages.notre_solution') }}

                                        </th>
                                        <th scope="col"><i class="fas fa-tag text-lg"></i> &nbsp;
                                            {{ __('messages.tarification') }}

                                        </th>
                                        <th scope="col"><i class="flaticon-stopwatch text-lg"></i> &nbsp;
                                            {{ __('messages.vitesse') }}

                                        </th>
                                        <th scope="col"><i class="fas fa-chart-bar  text-lg"></i> &nbsp;
                                            {{ __('messages.moy_succes') }}

                                        </th>
                                        <th scope="col"><i class="fas fa-toggle-on text-lg"></i> &nbsp;
                                            {{ __('messages.statut') }}

                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row">RECAPTCHA V2<img src="{{ asset('images/captcha_google.png') }}" style="height:30px;width:30px;"><small>Google Inc</small>
                                        </th>
                                        <td> € 0.0012 HT

                                        </td>
                                        <td>30s-120s</td>
                                        <td>98%</td>
                                        <td><i class="fas fa-circle text-success"></i></td>
                                    </tr>
                                    <tr>
                                        <th scope="row">RECAPTCHA V3<img src="{{ asset('images/captcha_google.png') }}" style="height:30px;width:30px;"><small>Google Inc</small>
                                        </th>
                                        <td> € 0.0016 HT
                                        </td>
                                        <td>30s-120s</td>
                                        <td>98%</td>
                                        <td><i class="fas fa-circle text-success"></i></td>
                                    </tr>
                                    <tr>
                                        <th scope="row">HCAPTCHA<img src="{{ asset('images/captcha_google.png') }}" style="height:30px;width:30px;"><small>Google Inc</small>
                                        </th>
                                        <td> € 0.001 HT
                                        </td>
                                        <td>30s-120s</td>
                                        <td>99%</td>
                                        <td><i class="fas fa-circle text-success"></i></td>
                                    </tr>
                                    <tr>
                                        <th scope="row">{{ __('messages.img_totext')}}<img src="{{ asset('images/captcha_google.png') }}" style="height:30px;width:30px;"><small>{{ __('messages.all_type_support') }}</small>
                                        </th>
                                        <td> € 0.006 HT
                                        </td>
                                        <td>30s-120s</td>
                                        <td>96%</td>
                                        <td><i class="fas fa-circle text-success"></i></td>
                                    </tr>

                                </tbody>
                            </table>
                        </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>