@extends('layout')
@section('title','Cart ')
@section('description','Payment')
@section('content')

<div class="breadcrumb-area mb-50">
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="breadcrumb-container">
                    <ul>
                      <li><a href="{{route('accueil')}}"><i class="fa fa-home"></i> {{ __('messages.acc') }}</a></li>
                        <li><a href="{{route('cart')}}">{{ __('messages.pan') }}</a></li>
                        <li><a href="{{route('choose_payment',['id'=>$idcmde])}}">{{ __('messages.pm') }}</a></li>
                        <li class="active" >{{ __('messages.pap') }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="single-product-content">
    <div class="container bg-white mb-50" style="max-width: 1100px !important;">
	
					@if (session('status'))
                        <div class="alert alert-success" style="font-size: 15px; background-color: #328039; color: white">
                            <i class="ti-check"></i> {{ session('status') }}
                        </div>
                    @endif

                    @if (session('error'))
                        <div class="alert alert-danger" style="font-size: 15px; background-color: #fb5757; color: white">
                            <i class="ti-na"></i> {{ session('error') }}
                        </div>
                    @endif
                    @if ($errors->any())
                        <div class="alert alert-danger" style="font-size: 15px; background-color: #fb5757; color: white" >
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li> <i class="ti-na"></i> {{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
	
	 @php
	    	$idcli = session('client')->id ?? null;
			$commande = DB::table('commande')->where('id', $idcmde)->first();
			$ref = DB::table('commande')->where('id', $idcmde)->first()->reference;
			$montant = $commande->montant ?? 0;
			
			$nom = DB::table('client')->where('id', $idcli)->first()->nom;
			$prenom = DB::table('client')->where('id', $idcli)->first()->prenom;
			$email = DB::table('client')->where('id', $idcli)->first()->email;
			$adr = DB::table('client')->where('id', $idcli)->first()->adresse;
			$tel = DB::table('client')->where('id', $idcli)->first()->tel;
			
			
	@endphp

		
        <div class="row p-5">
         
            <!-- Colonne 1 : Montant -->
            <div class="col-12 col-md-4 pt-5">
                <div class="card custom-card p-4">
                    <img src="{{ asset('assets/images/hooo.jpeg') }}" alt="Paiement" class="img-fluid" style="object-fit: cover;">
                </div>
            </div>

            <!-- Colonne 2 : Méthode de paiement -->
            <div class="col-12 col-md-8">
			 <div class="card custom-card p-2">
				  <div class="login-form">
                        <form action="{{ route('horspaiePost') }}" method="post" enctype="multipart/form-data">
						
						   @csrf
						
                            <div class="row">
							
							  <div class="col-md-6 col-12 mb-5">
                                    <label> {{ __('messages.no') }}</label>
                                    <input type="text" value="{{ $nom }}" name="nom"  class="form-control"  >
                               </div>
							
                                <div class="col-md-6 col-12 mb-0">
                                    <label > {{ __('messages.pnom') }}</label>
                                    <input type="text" value="{{ $prenom }}" name="prenom" class="form-control" >
									<input type="hidden" name="idclient" id="idclient" value="{{ $idcli }}">
                                    <input type="hidden" name="idcommande" id="idcommande" value="{{ $idcmde }}">

								</div>

                                <div class="col-md-6 col-12 mb-0">
                                    <label> {{ __('messages.tel') }}</label>
                                   <input type="text" value="{{ $tel }}" name="tel" class="form-control" >
                                   
                                </div> 
								
								<div class="col-md-6 col-12 mb-0">
                                    <label> {{ __('messages.em') }}</label>
                                   <input type="text" value="{{ $email }}" name="email" class="form-control" >
                                   
                                </div>

                                <div class="col-md-12 col-12 mb-5">
                                    <label for="amount"> {{ __('messages.adr') }}</label>
                                    <input type="text" value=" {{ $adr }}" name="adresse"  class="form-control"  >
                                </div>
								
								<div class="col-md-6 col-12 mb-5">
                                    <label for="amount"> {{ __('messages.vil') }} <font color="red">*</font></label>
                                    <input type="text" name="ville" name="ville"  class="form-control" required >
                                </div>


	                            <div class="col-md-6 col-12 mb-5">
                                    <label for="amount"> {{ __('messages.pays') }} <font color="red">*</font></label>
                                    <input type="text" name="pays" name="pays" class="form-control" required >
                                </div>
								
								  <div class="col-md-6 col-12 mb-15">
                                    <label for="amount"> {{ __('messages.ref') }}</label>
                                    <input type="text" value="# {{ $ref }}"  class="form-control" readonly  >
                                </div> 

								
								<div class="col-md-6 col-12 mb-15">
                                    <label for="amount"> {{ __('messages.amo') }} (FCFA)</label>
                                    <input type="number" id="amount" name="amount" value="{{$montant}}"  class="form-control" readonly >
                                </div> 


                                <div class="col-md-12 col-12">
                                    
									<button type="submit" class="btn btn-primary" id="submit-button">
										<span id="button-text"> {{ __('messages.coninfor') }}</span>
										<span id="spinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
									</button>
									
                                </div>
                            </div>
                        </form>
                    </div>
					
                    </div>
               
            </div>
       
            <!-- Section qui s'affiche uniquement pour le paiement hors ligne -->
          
        </div>
    </div>
</div>

@push('styles')

  <style>
    .card.custom-card {
        border: 2px solid lightblue; /* Bordure bleu ciel */
        box-shadow: 0 4px 12px rgba(173, 216, 230, 0.5); /* Ombre bleu ciel */
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    /* Effet au survol de la carte */
    .card.custom-card:hover {
        box-shadow: 0 6px 18px rgba(173, 216, 230, 0.7);
        transform: translateY(-5px);
    }
    
    /* Assurer que les images soient bien dimensionnées */
    .card.custom-card img {
        max-width: 100%;
        height: auto;
		
    }

    @media (max-width: 767px) {
        .p-5 {
            padding: 2rem !important;
        }

        .col-12 {
            margin-bottom: 1rem;
        }
    }
	
  </style>
  
@endpush

@push('scripts')

 
 
@endpush

@endsection