@extends('layouts.app')

@section('content')
 <style>
        /* Customize the Stripe Elements form */
        .form-control.stripe-element {
            height: 40px;
            padding: 10px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
        /* Customize the error message */
        .invalid-feedback.stripe-error {
            display: block;
            width: 100%;
            margin-top: .25rem;
            font-size: 80%;
            color: #dc3545;
        }
    </style>
@include('layouts.partials.public.breadcrumb', ['pageTitle' => "Approbation d'enchère"])
<div class="auction-details-section pt-50" >
    <div class="container pt-30 mt-2" style="background-color:#f6f6f6 ; padding-top:15px">
  <div class="col-lg-8 offset-md-2 mb-2" >
        
                <div class="tab-pane">
               
                   <h5 class="text-info">{{__('Enchère')}}: {{$enchere->titre}}.</h5>  
                        <h5 class="text-warning">
                        {{__("Veuillez fournir les informations ci-dessous pour obtenir l'approbation de participer à l'enchère")}}.</h5>   
                       @if(session()->has('message'))
                        <div class="alert alert-primary" role="alert">
                             {{ session('message') }}
                        </div>
                        @endif

                        <form class="w-100" id="approbation_form" action="{{ route('user.approbation.update') }}" method="POST">
                        @method('POST')
                        @csrf
                        <hr>
                        <h3>{{__('Informations personnelles')}}</h3>
                        <hr>
                         @php
                  $locale = app()->getLocale();
                  if($locale=='gb')
                    $locale='en';
              @endphp
                                <div class="row"> 
                                      <div class="col-md-6 mb-3">
                                         <input type="hidden" name="enchere_slug" value="{{$enchere->slug}}"/> 
                                        <label for="first_name" class="form-label">{{ __('Nom') }}</label>
                                        <input id="first_name" value="{{old('first_name', $user->first_name)}}" type="text" class="form-control @error('first_name') is-invalid @enderror" name="first_name"  autocomplete="first_name" autofocus>
                                        @error('first_name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                       <div class="col-md-6 mb-3">
                                        <label for="last_name" class="form-label">{{ __('Prénom') }}</label>
                                        <input id="last_name" value="{{old('last_name', $user->last_name)}}" type="text" class="form-control @error('last_name') is-invalid @enderror" name="last_name"  autocomplete="last_name" autofocus>
                                        @error('last_name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                </div>
                                <div class="row"> 
                                      <div class="col-md-6 mb-3">
                                         <input type="hidden" name="enchere_id" value="{{$enchere->id}}"/> 
                                        <label for="num_identite" class="form-label">{{ __('N° Identitié') }}</label>
                                        <input id="num_identite" {{($enchere->approve_id_number_required==1) ? '':'readonly'}} value="{{old('num_identite', $user->num_identite)}}" type="text" class="form-control @error('num_identite') is-invalid @enderror" name="num_identite"  autocomplete="num_identite" autofocus>
                                        @error('num_identite')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                       <div class="col-md-6 mb-3">
                                        <label for="lieu_naissance" class="form-label">{{ __('Lieu de naissance') }}</label>
                                        <input id="lieu_naissance" {{($enchere->approve_birth_place_required==1) ? '':'readonly'}}  value="{{old('lieu_naissance', $user->lieu_naissance)}}" type="text" class="form-control @error('lieu_naissance') is-invalid @enderror" name="lieu_naissance"  autocomplete="last_name" autofocus>
                                        @error('lieu_naissance')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                </div>
                                <div class="row"> 
                                    <div class="col-md-6 mb-3">
                                        <label for="date_naissance" class="form-label">{{ __('Date de naissance') }}</label>
                                        <input id="date_naissance" {{($enchere->approve_birth_date_required==1) ? '':'readonly'}}   value="{{old('date_naissance', $user->date_naissance)}}" type="date" class="form-control @error('date_naissance') is-invalid @enderror" name="date_naissance"  autocomplete="last_name" autofocus>
                                        @error('date_naissance')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                     
                                       <div class="col-md-6 mb-3">
                                        <label for="email" class="form-label">{{ __('email') }}</label>
                                        <input id="email" type="text" value="{{$user->email}}" readonly="readonly" class="form-control @error('email') is-invalid @enderror" name="email"  autocomplete="email" autofocus>
                                        @error('email')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                </div>
                                <div class="row"> 
                                       <div class="col-md-6 mb-3">
                                        <label for="telephone" class="form-label">{{ __('Télephone') }}</label>
                                        <input id="telephone" value="{{old('telephone', $user->telephone)}}" type="text" class="form-control @error('mobile') is-invalid @enderror" name="telephone"  autocomplete="telephone" autofocus>
                                        @error('telephone')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                       <div class="col-md-6 mb-3">
                                        <label for="sexe" class="form-label">{{ __('Sexe') }}</label>
                                               <select name="sexe" id="sexe" class="form-control">
                                                    <option disabled>--------</option>
                                                    @foreach ($genders as $gender)
                                                    <option value="{{ $gender->value }}" @if(old('sexe', $user->sexe)==$gender->value) selected @endif
                                                        >{{ $gender->label() }}</option>
                                                    @endforeach
                                                </select>
                                        @error('sexe')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                </div>
                                <div class="row"> 
                                    <div class="col-md-6 mb-3">
                                        <label for="nickname" class="form-label">{{ __('User name') }}</label>
                                        <input id="nickname" value="{{$user->nickname}}" readonly="readonly" type="text" class="form-control @error('nickname') is-invalid @enderror" name="nickname"  autocomplete="nickname" autofocus>
                                        @error('nickname')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                     
                                    
                                </div>
                                 <hr>
                                  <h3>{{__('Facturation & livraison')}}</h3>
                                 <hr>
                               <div class="row"> 
                                  <div class="col-md-12 mb-3">
                                        <label for="adresse" class="form-label">{{ __('Adresse') }}</label>
                                        <input id="adresse" type="text" value="{{$user->adresse}}" class="form-control @error('adresse') is-invalid @enderror" name="adresse"  autocomplete="adresse" autofocus>
                                        @error('adresse')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                </div>
                                 <div class="row"> 
                                      <div class="col-md-6 mb-3">
                                        <label for="pays_id" class="form-label">{{ __('Pays') }}</label>
                                        <select name="pays_id" id="country_id" class="form-control">
                                                    <option disabled value=''>--------</option>
                                                    @foreach ($countries as $country)
                                                    <option value="{{ $country->id }}"  @if(old('pays_id', $user->pays_id)==$country->id) selected @endif
                                                        >{{ $country->{"nom_" . $locale}  }}</option>
                                                    @endforeach
                                         </select>
                                        @error('pays_id')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="region_id" class="form-label">{{ __('Région') }}</label>
                                        <select name="region_id" id="region_id" class="form-control">
                                                    <option disabled value=''>--------</option>
                                                    @foreach ($states as $state)
                                                    <option value="{{ $state->id }}"  @if(old('region_id', $user->region_id)==$state->id) selected @endif
                                                        >{{ $state->nom }}</option>
                                                    @endforeach
                                         </select>
                                        @error('region_id')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                </div>
                                 <div class="row"> 
                                      <div class="col-md-6 mb-3">
                                        <label for="ville_id" class="form-label">{{ __('Ville') }}</label>
                                        <select name="ville_id" id="ville_id" class="form-control">
                                                    <option value='' disabled>--------</option>
                                                    @foreach ($cities as $city)
                                                    <option value="{{ $city->id }}" @if(old('ville_id', $user->ville_id)==$city->id) selected @endif
                                                        >{{ $city->nom }}</option>
                                                    @endforeach
                                         </select>
                                        @error('ville_id')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                      <div class="col-md-6 mb-3">
                                        <label for="code_postal" class="form-label">{{ __('Code postal') }}</label>
                                        <input id="code_postal" value="{{old('code_postal', $user->code_postal)}}"   type="text" class="form-control @error('code_postal') is-invalid @enderror" name="code_postal"  autocomplete="code_postal" autofocus>
                                        @error('code_postal')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                </div>
                                <hr>
                                @if($enchere->approve_credit_card_required==1)
                           
                                  <h3>{{__('Cartes & paiements')}}</h3>
                                 <hr>
                                 <div class="row justify-content-center mb-2">
                                    <div class="col-md-12">
                                        <div class="card">
                                         <div class="card-body">
                                                <h6 class="card-title">{{__("Entrez les détails de votre carte de crédit")}}</h6>
                                                  <div class="form-group mt-3">
                                                      
                                                           <div id="payment-element">
                                                              <!-- Elements will create form elements here -->
                                                          </div>
                                                            <input type="hidden" name="intent_id" value="{{$intent_id}}">
                                                             <div id="card-errors" role="alert"></div>
                                                  </div>
                                                  <div class="text-warning text-justify mt-3" role="alert">
                                                     <p>
                                                    {{  __('approbation_information', [
                                                            'montant' => $enchere->approve_deposit_amount,
                                                            'devise' => $enchere->devise
                                                        ])}}
                                                      </p> 
                                                  </div>
                                              
                                                  <!-- 
                                                  
                                                    <div class="form-group col-md-6 mb-3">
                                                        <label for="card-number" class="form-label">Card Number</label>
                                                        <input type="text" name="card-number" id="card-number" class="form-control" placeholder="1234 5678 9012 3456">
                                                    </div>
                                                    <div class="form-row">
                                                        <div class="form-group col-md-3 mb-3">
                                                            <label for="cardholder-name" class="form-label">Cardholder Name</label>
                                                            <input type="text" name="cardholder-name" id="cardholder-name" class="form-control" placeholder="John Doe">
                                                        </div>
                                                        <div class="form-group col-md-3 mb-3">
                                                            <label for="card-type" class="form-label">Card Type</label>
                                                            <select id="card-type" name="card-type" class="form-control">
                                                                <option value="visa">Visa</option>
                                                                <option value="mastercard">Mastercard</option>
                                                                <option value="amex">American Express</option>
                                                                <option value="discover">Discover</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="form-row">
                                                        <div class="form-group col-md-2 mb-3">
                                                            <label for="expiry-date" class="form-label">Expiry Date</label>
                                                            <input type="text" name="card_exp_month" id="card_exp_month" class="form-control" placeholder="MM">
                                                            <input type="text" name="card_exp_year" id="card_exp_year" class="form-control" placeholder="MM">
                                                        </div>
                                                        <div class="form-group col-md-1 mb-3">
                                                            <label for="cvc" class="form-label">CVC</label>
                                                            <input type="text" name="cvc" id="cvc" class="form-control" placeholder="123">
                                                        </div>
                                                    </div>
                                                  -->
                                                 
                                           
                                            </div>


                                        </div>
                                    </div>
                                </div>
                                @endif
                                  <div class="row justify-content-center mb-2">
                                      <div class="form-group col-md-4 mb-3">
                                      <button type="submit" class="btn btn-primary pt-2"> {{__('Confirmer vos informations')}}</button>
                                        </div>
                        </div>
                    </form>
                </div>
    </div>
</div>

@push('scripts')
<script src="/public_assets/js/countdown.js"></script>
 <script src="https://js.stripe.com/v3/"></script>
<script>
   /* const stripe = Stripe("{{ env('STRIPE_API_PUBLIC_KEY') }}");

    const elements = stripe.elements();
    const cardElement = elements.create('card', {
        style: {
            base: {
                fontSize: '16px',
                color: '#32325d', // Customize text color
                fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                fontSmoothing: 'antialiased',
                '::placeholder': { // Customize placeholder text
                    color: '#aab7c4',
                },
            },
            invalid: {
                color: '#fa755a',
                iconColor: '#fa755a',
            },
        },
    });
    cardElement.mount('#card-element');

            // Handle real-time validation errors from the card Element
        cardElement.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('approbation_form');
        form.addEventListener('submit', function(event) {
            event.preventDefault();

            stripe.createToken(cardElement).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('approbation_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();
        }*/

    @if($enchere->approve_credit_card_required==1)
        var stripe = Stripe("{{ env('STRIPE_API_PUBLIC_KEY') }}");
                const options = {
          clientSecret: '{{ $client_secret }}',
          // Fully customizable with appearance API.
          appearance: {
                  theme: 'stripe'
                },
        };

        // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step
        const elements = stripe.elements(options);

        // Create and mount the Payment Element
        const paymentElement = elements.create('payment');
        paymentElement.mount('#payment-element');


    @endif
</script>
@endpush
@endsection