@extends('layout')
@section('title','Cart ')
@section('description','Voir le panier')
@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 class="active" >{{ __('messages.pm') }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="single-product-content">
    <div class="container bg-white mb-50">
	
        <div class="row p-5">
            @php 
                $idcli = session('client')->id;
                $montant = DB::table('commande')->where('id', $idcmde)->first()->montant;
				
				
            @endphp

            <!-- Colonne 1 : Montant -->
            <div class="col-12 col-md-3 pt-5">
                <div class="card custom-card p-4">
                    <p>{{ __('messages.mco') }} : <b>{{$montant}} USD</b></p>
                </div>
            </div>

            <!-- Colonne 2 : Méthode de paiement -->
            <div class="col-12 col-md-3">
                <div style="line-height:35px !important" class="card custom-card p-4"> 
                    <p><b>{{ __('messages.cmp') }}</b></p>
					
					
				@if(\App\Models\Permission::can(session('client')->roles, "Activer", "Paiement en ligne"))
					
                    <label>
                        <input type="radio" name="payment_method" value="ligne" onclick="afficherPaiement('ligne')" >
                        {{ __('messages.pl') }}
                    </label>
					
				@endif
				
				@if(\App\Models\Permission::can(session('client')->roles, "Activer", "Paiement hors ligne"))
					
                    <label>
                        <input type="radio" name="payment_method" value="horsligne" onclick="afficherPaiement('horsligne')" >
                        {{ __('messages.lap') }}
                    </label>
					
				@endif	
			
                </div>
            </div>
			
			
			

            <!-- Colonne 3 : Espace pour images -->
            <div class="col-12 col-md-6" id="Pligne" style="display: none;">
                <div class="row">
                    <!-- Grille 1 -->
                    <div class="col-12 mb-20">
                        <div class="card custom-card p-3">
                            <a href="{{ route('payment-stripe', ['id' => $idcmde]) }}">
                                <img src="{{ asset('assets/images/li.jpg') }}" alt="Paiement" class="img-fluid" style="object-fit: cover;">
                            </a>
                        </div>
                    </div>

                    <!-- Grille 2 -->
                    <div class="col-4 mb-20">
                        <div class="card custom-card p-3">
                            <a href="{{ route('payment-paypal', ['id' => $idcmde]) }}">
                                <img src="{{ asset('assets/images/pa.jpg') }}" alt="Paiement" class="img-fluid" style="height: 107px !important;" >
                            </a>
                        </div>
                    </div>

                    <!-- Grille 3 -->
                    <div class="col-4">
                        <div class="card custom-card p-3">
                            <a href="{{ route('virement-bancaire', ['id' => $idcmde]) }}">
                                <img src="{{ asset('assets/images/vir.jpg') }}" alt="Paiement" class="img-fluid" style="height: 107px !important;">
                            </a>
                        </div>
                    </div>

                    <!-- Grille 4 -->
                    <div class="col-4">
                        <div class="card custom-card p-3">
                            <a href="{{ route('payment-zelle', ['id' => $idcmde]) }}">
                                <img src="{{ asset('assets/images/zee.png') }}" alt="Paiement" class="img-fluid" style="height: 107px !important;" >
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Section qui s'affiche uniquement pour le paiement hors ligne -->
            <div class="col-12 col-md-6" id="Hligne" style="display: none;">
                <div class="row">
				
				    <div class="col-12 mb-20">
                        <div class="card custom-card p-3">
                            <a href="{{ route('payment-hors-ligne', ['id' => $idcmde]) }}">
                                <img src="{{ asset('assets/images/hooo.jpeg') }}" alt="Paiement" class="img-fluid" style="object-fit: cover;">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
        </div> 

    </div>
</div>

@push('scripts')
  <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>

  <script>
    function afficherPaiement(type) {
        const pLigne = document.getElementById('Pligne');
        const hLigne = document.getElementById('Hligne');

        if (type === 'ligne') {
            pLigne.style.display = 'block';  // Si 'ligne' est sélectionné, affiche la section Pligne
            hLigne.style.display = 'none';   // Cache la section Hligne
        } else {
            pLigne.style.display = 'none';   // Cache la section Pligne
            hLigne.style.display = 'block';  // Affiche la section Hligne
        }
    }

    // Initialisation au chargement de la page
    document.addEventListener('DOMContentLoaded', () => {
        const selectedPaymentMethod = document.querySelector('input[name="payment_method"]:checked').value;
        afficherPaiement(selectedPaymentMethod);
    });
  </script>
  
  
	  <script>
	  // Mémoriser le choix de l’utilisateur
	  const toggleSwitch = document.getElementById('toggleSwitch');

	  // Restaurer l’état du switch (si besoin)
	  const savedState = localStorage.getItem('hideDiv');
	  if (savedState === '1') toggleSwitch.checked = true;

	  toggleSwitch.addEventListener('change', function () {
		localStorage.setItem('hideDiv', this.checked ? '1' : '0');
	  });
	</script>
	

@endpush

@endsection
