@extends('user.layouts.master')
@section('title', __('unlimited'))
@section('contents')
    <!-- Start /.body content -->
    <div class="body-content">
        <div class="decoration blur-2"></div>
        <div class="decoration blur-3"></div>
        <div class="container-xxl"> 

             @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

                </div>
            @endif
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <div class="card mb-4">
                <div class="card-header position-relative">
                    <h6 class="fs-17 fw-semi-bold mb-0">Payment</h6>
                </div>
                <div class="card-body">
 


                       <form action="{{ route('user.payment_send') }}" method="POST" id="payment-form">
                        @csrf 
                        <input type="hidden" name="amount" id="amount" value="{{$subscription->price}}" >
                        <input type="hidden" name="subscription_id" id="subscription_id" value="{{$subscription->id}}" >

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

                        <button class="btn d-block mt-4 btn-outline-primary text-nowrap" type="submit">Pay</button>

                        <div id="card-errors" role="alert"></div>
                    </form>
                        
                   


                    <!-- <form method="post" id="password-form" action="{{ url('user/changing-password') }}"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="row g-4">
                        <div class="col-sm-6">
                            <div class="">
                                <label for="current_password" class="required fw-medium mb-2">Current Password</label>
                                <input type="password" class="form-control" name="current_password" id="current_password" required>
                                @error('current_password')
                                <p class="text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                         
                        <div class="col-sm-12">
                            <div class="">
                                <label for="new_password_confirmation" class="required fw-medium mb-2">Confirm Password</label>
                                <input type="password" class="form-control" name="new_password_confirmation"
                                    id="new_password_confirmation" required>
                                <span id="password-error" class="text-danger"></span>
                                @error('new_password_confirmation')
                                <p class="text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-12 mt-2">
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary">Change</button>
                            </div>
                        </div>
                    </div>
                </form> -->

                </div>
            </div>

        </div>
    </div>
    <!--/.body content-->

@endsection
@push('script')
    <script src="https://js.stripe.com/v3/"></script>

   <script>
        var stripe = Stripe('{{ config('services.stripe.key') }}');
        var elements = stripe.elements();

        var card = elements.create('card');
        card.mount('#card-element');

        var form = document.getElementById('payment-form');
        form.addEventListener('submit', function(event) {
            event.preventDefault();

            stripe.createToken(card).then(function(result) {
                if (result.error) {
                    var errorElement = document.getElementById('card-errors');
                    errorElement.textContent = result.error.message;
                } else {
                    var form = document.getElementById('payment-form');
                    var hiddenInput = document.createElement('input');
                    hiddenInput.setAttribute('type', 'hidden');
                    hiddenInput.setAttribute('name', 'stripeToken');
                    hiddenInput.setAttribute('value', result.token.id);
                    form.appendChild(hiddenInput);
                    form.submit();
                }
            });
        });
    </script>


@endpush