@extends('layout')
@section('title','Cart ')
@section('description','Payment Zelle')
@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;
	@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/zee.png') }}" 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('zellePost') }}" method="post" enctype="multipart/form-data">
						
						   @csrf
						
                            <div class="row">
							
							  <div class="col-md-6 col-12 mb-5">
                                    <label> {{ __('messages.nbe') }}</label>
                                    <input type="text" value="{{ config('bank.beneficiaire') }}"  class="form-control" readonly >
                               </div>
							
                                <div class="col-md-6 col-12 mb-0">
                                    <label > {{ __('messages.embe') }}</label>
                                    <input type="text" value="{{ config('bank.email') }}" class="form-control" readonly>
									<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.tbe') }}</label>
                                   <input type="text" value="{{ config('bank.telephone') }}" class="form-control" readonly>
                                   
                                </div>

                                <div class="col-md-6 col-12 mb-5">
                                    <label for="amount"> {{ __('messages.mopa') }}</label>
                                    <input type="text" value="# {{ $ref }}"  class="form-control" readonly >
                                </div> 

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

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

								<div class="col-md-12 col-12 mb-20">
                                    <label for="amount"> {{ __('messages.filcap') }} <font color="red">*</font> </label>
                                   
								   <div class="drop-area" id="drop-area">
									 {{ __('messages.clifil') }}
									  <input type="file" name="docu" id="fileInput" accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx" multiple style="display: none;">
									</div>

									<div class="preview-container" id="preview"></div>
								   
                                </div>

                              
                                <div class="col-md-12 col-12">
                                    
									<button type="submit" class="btn btn-primary" id="submit-button">
										<span id="button-text"> {{ __('messages.pay') }}</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>

           <div id="paypal-button-container"></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;
        }
    }
	

	
	.preview-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }
	
	.preview-container img {
	  width: 120px;
	  height: 120px;
	  object-fit: cover;
	  border: 1px solid #ccc;
	  border-radius: 8px;
	}

    .drop-area {
      border: 2px dashed #aaa;
      padding: 30px;
      text-align: center;
      border-radius: 10px;
      cursor: pointer;
    }
    .drop-area.hover {
      background-color: #f0f0f0;
    }
	
	@keyframes shake {
	  0% { transform: translateX(0px); }
	  25% { transform: translateX(-5px); }
	  50% { transform: translateX(5px); }
	  75% { transform: translateX(-5px); }
	  100% { transform: translateX(0px); }
	}

	.drop-area.input-error {
	  border: 2px solid red !important;
      background-color: #fff0f0;
	  animation: shake 0.3s;
	}

}
	
  </style>
@endpush

@push('scripts')

  <script>
  const dropArea = document.getElementById('drop-area');
  const fileInput = document.getElementById('fileInput');
  const preview = document.getElementById('preview');
  const form = document.querySelector('form');

  form.addEventListener('submit', function (e) {
	  if (!fileInput.files.length) {
		e.preventDefault();
		alert("Veuillez sélectionner un fichier.");
		fileInput.click();

		// Ajout de la bordure rouge
		dropArea.classList.add('input-error');
		return;
	  } else {
		// Retire la bordure rouge si un fichier est sélectionné
		dropArea.classList.remove('input-error');
	  }
	});


  // Affichage de l’aperçu des fichiers
  fileInput.addEventListener('change', () => {
    preview.innerHTML = '';
    for (const file of fileInput.files) {
      const reader = new FileReader();
      const fileType = file.type;

      if (fileType.startsWith('image/')) {
        reader.onload = e => {
          const img = document.createElement('img');
          img.src = e.target.result;
          preview.appendChild(img);
        };
        reader.readAsDataURL(file);
      } else {
        const fileBox = document.createElement('div');
        fileBox.style.padding = '10px';
        fileBox.style.border = '1px solid #ccc';
        fileBox.style.borderRadius = '8px';
        fileBox.style.background = '#f9f9f9';
        fileBox.style.width = '120px';
        fileBox.style.height = '120px';
        fileBox.style.display = 'flex';
        fileBox.style.alignItems = 'center';
        fileBox.style.justifyContent = 'center';
        fileBox.style.textAlign = 'center';
        fileBox.style.fontSize = '12px';
        fileBox.style.flexDirection = 'column';

        const ext = file.name.split('.').pop().toLowerCase();
        const icon = {
          pdf: '📄',
          doc: '📝',
          docx: '📝',
          xls: '📊',
          xlsx: '📊',
          ppt: '📽️',
          pptx: '📽️'
        }[ext] || '📁';

        fileBox.innerHTML = `${icon}<br><small>${file.name}</small>`;
        preview.appendChild(fileBox);
      }
    }
  });

  // Drag & drop
  ['dragenter', 'dragover'].forEach(eventName => {
    dropArea.addEventListener(eventName, e => {
      e.preventDefault();
      e.stopPropagation();
      dropArea.classList.add('hover');
    });
  });

  ['dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, e => {
      e.preventDefault();
      e.stopPropagation();
      dropArea.classList.remove('hover');
    });
  });

  dropArea.addEventListener('drop', e => {
    const files = e.dataTransfer.files;
    fileInput.files = files;
    fileInput.dispatchEvent(new Event('change'));
  });

  // Clic sur la zone de drop ouvre le file input
  dropArea.addEventListener('click', () => fileInput.click());
</script>

  
 
@endpush

@endsection
