@extends('layouts.app')

@section('content')
@include('layouts.partials.public.breadcrumb', ['pageTitle' => 'Paiements'])
<div class="dashboard-section pt-120 pb-120">
    <div class="container">
        <div class="row g-4">
              @include('layouts.partials.public.sidebar',['active' => 'paiements', 'admin' => false])
            <div class="col-lg-9">
                <div class="tab-pane">
                     <div class="table-title-area">
                    <h3>{{__('Paiements')}}</h3>
          
                    <form  class="d-flex align-items-center">

                        <select  name="sort">
                         <option value=""> Trier: Tout (Sort ASC/DESC)</option>
                         <option value="created+asc" @selected(request()->sort == 'created+asc')>Sort By: Created At (ASC)</option>
                         <option value="created+desc" @selected(request()->sort == 'created+desc')>Sort By: Created At (DESC)</option>
                         <option value="start+asc" @selected(request()->sort == 'start+asc')>Sort By : Start Date (ASC)</option>
                         <option value="start+desc" @selected(request()->sort == 'start+desc')>Sort By : Start Date (DESC)</option>
                         <option value="end+asc" @selected(request()->sort == 'end+asc')>Show: End Date (ASC)</option>
                         <option value="end+desc" @selected(request()->sort == 'end+desc')>Show: End Date (DESC)</option>
                      </select>
                      <button type="submit" class="filter-btn bg-dark text-white ml-2">Sort</button>
                     </form>
                    </div>
                    

          
                    <div class="ad-listing-wrapper mt-4">
    
                        <table class="table table-bordered" style="font-size: 13px">
                            <thead>
                                <tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">{{__('Enchère')}}</th>
                                    <th scope="col">{{__('Facture')}}</th>
                                    <th scope="col">{{__('Méthode de paiement')}}</th>
                                    <th scope="col">{{__('Status')}}</th>
                                    <th scope="col">{{__('Montant Payé')}}</th>
                                    <th scope="col">Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                 @foreach($paiements as $paiement)
                                        <tr>
                                            <td>{{ $paiement->txn_id }}</td>
                                            <td style="width: 8rem;" >{{ $paiement->facture->session->enchere->titre }}</td>
                                            <td>{{ $paiement->facture_id }}</td>
                                            <td>{{ $paiement->gateway->label() }}</td>
                                            <td class="text-{{ $paiement->status->color() }} fw-bold text-uppercase">{{ $paiement->status->label() }}</td>
                                            <td>{{ money($paiement->montant) }}</td>
                                            <td>{{ $paiement->created_at->format('d M Y h:i A') }}</td>
                                        </tr>
                                    @endforeach
                            </tbody>
                        </table>
                    </div>
                     @if(isset($paymentProfiles))
                     {{$paymentProfiles}}
                     @endif
                   
                   
                    </div>
                </div>
          </div>
        </div>
    </div>
</div>

@push('scripts')
 <script src="https://js.stripe.com/v3/"></script>
 <script>
        // Create a Stripe client
        var stripe = Stripe("{{ env('STRIPE_API_PUBLIC_KEY') }}");
      
        // Create an instance of Elements
        var elements = stripe.elements();

        // Custom styling can be passed to options when creating an Element.
        var style = {
            base: {
                fontSize: '16px',
                color: '#32325d',
            },
        };

        // Create an instance of the card Element
        var card = elements.create('card', { style: style });

        // Add an instance of the card Element into the `card-element` div
        card.mount('#card-element');

        // Handle real-time validation errors from the card Element
        card.addEventListener('change', function(event) {
            var displayError = document.getElementById('card-errors');
            if (event.error) {
                displayError.textContent = event.error.message;
            } else {
                displayError.textContent = '';
            }
        });

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

            stripe.createToken(card).then(function(result) {
                if (result.error) {
                    // Inform the user if there was an error
                    var errorElement = document.getElementById('card-errors');
                    errorElement.textContent = result.error.message;
                } else {
                    // Send the token to your server
                    stripeTokenHandler(result.token);
                }
            });
        });

        // Submit the form with the token ID
        function stripeTokenHandler(token) {
            // Insert the token ID into the form so it gets submitted to the server
            var form = document.getElementById('payment-form');
            var hiddenInput = document.createElement('input');
            hiddenInput.setAttribute('type', 'hidden');
            hiddenInput.setAttribute('name', 'stripeToken');
            hiddenInput.setAttribute('value', token.id);
            form.appendChild(hiddenInput);

            // Submit the form
            form.submit();
        }
    </script>

@endpush
@endsection