@extends('personal.dashboard.layouts.app')


@section('title',panel_setting_title("Panel"))



@push('style-libraries')

@endpush



@push('styles')

@endpush

@section('content')

<div class="bg-white">
    <div class="container d-flex justify-content-center">
      <ul class="nav nav-tabs nav-lg border-bottom-0">
        <li class="nav-item"> <a class="nav-link active" href="{{route('personal.dashboard.deposit')}}">Para Yatır</a></li>
        <li class="nav-item"> <a class="nav-link" href="{{route('personal.dashboard.withdraw')}}">Para Çek</a></li>
      </ul>
    </div>
  </div>
  <!-- Secondary menu end -->

  <!-- Content
  ============================================= -->
  <div id="content" class="py-4">
    <div class="container" style="padding-right:0px ; padding-left: 0px">
      <div class="row"> 
        
        <!-- Left Panel
        ============================================= -->
       @include('personal.dashboard.layouts.sidebar')
        <!-- Left Panel End -->
        
        <!-- Middle Panel
        ============================================= -->
        <div class="col-lg-9">
          <h2 class="fw-400 mb-3">Para Yatır</h2>
         <div id="content" class="py-4">
   <div class="container" style="padding-right:0px ; padding-left: 0px">
     <div class="row">
       <div class="col-md-12 col-lg-12 col-xl-12 mx-auto">
         <div class="bg-white shadow-sm rounded p-3 pt-sm-5 pb-sm-5 px-sm-5 mb-4" style="border-radius: 50px !important;">
           <!-- Deposit Money Form
            ============================================= -->
           <form id="form-send-money" method="get" action="{{route('personal.dashboard.deposit.confirm')}}">
             <div class="mb-3">
               <label for="youSend">Tutar</label>
               <span style="color: red;">*</span>
               <div class="input-group">
                 <input type="text" class="form-control currency-input" data-bv-field="youSend" name="amount" id="amount" value="" oninput="formatAmount(this)" placeholder="0.00" required>
                 <span class="input-group-text">₺</span>
               </div>
             </div>
             <div class="mb-3">
               <label for="paymentMethod" class="form-label">Ödeme Yöntemi</label>
               <span style="color: red;">*</span>
               <select id="paymentMethod" class="form-select" onchange="toggleBankSelect()" required="">
                 <option value="">Ödeme Yöntemi Seçiniz</option>
                 <option>Kredi & Banka Kartı</option>
                 <option>Banka Hesabı</option>
               </select>
             </div>
             <div class="mb-3" id="bankSelectDiv" style="display: none;">
               <label for="bank" class="form-label">Bankalar</label>
               <span style="color: red;">*</span>
               <select id="bank" class="form-select" onchange=" showSelectedBankLogo(); generateAndSetIBAN(); " required="">
                 <option value="">Banka Seçiniz</option> @foreach($bankalar as $bank) <option value="{{ $bank->id }}" data-logo="{{ $bank->path }}">{{ $bank->name }}</option> @endforeach
               </select>
             </div>
             <div class="mb-3" id="bankLogoDiv" style="display: none;text-align: center;">
               <img id="bankLogo" src="" alt="Banka Logo" style="width:150px;height:auto">
             </div>
             <div class="mb-3" id="additionalFields" style="display: none;">
               <label for="hesapSahibiAdi">Hesap Sahibi Adı</label>
               <span style="color: red;">*</span>
               <div class="input-group">
                 <input type="text" readonly class="form-control" data-bv-field="hesapSahibiAdi" id="hesapSahibiAdi" value="{{ panel_setting_item('brand_name') }} Ödeme Hizmetleri A.Ş." placeholder="10.00" required>
                 <span class="input-group-text popover-trigger" onclick="copyName()">
                   <i class="fas fa-copy"></i>
                   <span class="popover-content"> Kopyalandı! </span>
                 </span>
               </div>
               <label for="iban">IBAN</label>
               <span style="color: red;">*</span>
               <div class="input-group">
                 <input type="text" readonly class="form-control" data-bv-field="iban" id="iban" placeholder="IBAN" required>
                 <span class="input-group-text popover-trigger" onclick="copyIban()">
                   <i class="fas fa-copy"></i>
                   <span class="popover-content"> Kopyalandı! </span>
                 </span>
               </div>
               <label for="musteriNumarasi">Müşteri Numarası</label>
               <span style="color: red;">*</span>
               <div class="input-group">
                 <input type="text" readonly class="form-control" data-bv-field="musteriNumarasi" id="musteriNumarasi" value="{{ \Illuminate\Support\Facades\Auth::user()->customer_id }}" placeholder="10.00" required>
                 <span class="input-group-text popover-trigger" onclick="copyCustomerNumber()">
                   <i class="fas fa-copy"></i>
                   <span class="popover-content"> Kopyalandı! </span>
                 </span>
               </div>
             </div>
             <i class="fas fa-info-circle info-icon mr-2"></i>
             <span> Yalnızca kendinize ait bir banka hesabından Havale/EFT yapabilirsiniz. </span>
             <br>
             <i class="fas fa-info-circle info-icon mr-2"></i>
             <span> Havale/EFT sırasında Müşteri Numarasını Açıklama Kısmınına yazmanız gerekmektedir. </span>
             <hr>
             <div class="d-grid">
               <button class="btn btn-primary" onclick="clickFunction()">Devam</button>
             </div>
           </form>
           <!-- Deposit Money Form end -->
         </div>
       </div>
     </div>
   </div>
 </div>
          
        
        </div>
        <!-- Middle End --> 
      </div>
    </div>
  </div>
  <!-- Content end -->

</div>

<style>
.popover-trigger {
  display: inline-block;
  cursor: pointer;
}

.popover-content {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  transition:1s;
}

.popover-trigger:active .popover-content {
  display: block;
  transition:1s;
}
</style>
@endsection


@push('script-libraries')

@endpush

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<script>
    var bankalar = @json($bankalar);
</script>
<script>
    // Banka resimlerini içeren bir dizi
    var bankaResimleri = [
        @foreach($bankalar as $bank)
            '{{ \Illuminate\Support\Facades\Storage::url("{$bank->path}") }}',
        @endforeach
    ];

    function showSelectedBankLogo() {
        var bankSelect = document.getElementById("bank");
        var selectedBankIndex = bankSelect.selectedIndex;
        var bankLogoDiv = document.getElementById("bankLogoDiv");
        var bankLogo = document.getElementById("bankLogo");

       if (selectedBankIndex !== 0) {
    // Seçilen bankanın resim yolunu al
    var logoPath = bankaResimleri[selectedBankIndex - 1]; 

    if (logoPath) {
       
        bankLogo.src = logoPath;
        bankLogoDiv.style.display = "block";
    } else {
        
        bankLogoDiv.style.display = "none";
    }
      } 
    }
</script>

<script>
  function clickFunction() {
    var amount = document.getElementById("amount").value;
    var paymentMethod = document.getElementById("paymentMethod").value;
    var bank = document.getElementById("bank").value;
    bank = $('#bank option[value="'+bank+'"]').text();
    var hesapSahibiAdi = document.getElementById("hesapSahibiAdi").value;
    var iban = document.getElementById("iban").value;
    // Diğer verileri de ekleyin...

    // LocalStorage'a verileri ekle
    localStorage.setItem("amount", amount);
    localStorage.setItem("paymentMethod", paymentMethod);
    localStorage.setItem("bank", bank);
    localStorage.setItem("hesapSahibiAdi", hesapSahibiAdi);
    localStorage.setItem("iban", iban);

}

</script>

<script>
    function copyIban() {
        var copyIban = document.getElementById("iban");
        copyIban.select();
        document.execCommand("copy");
        window.getSelection().removeAllRanges();

    }
function copyName() {
        var copyIban = document.getElementById("hesapSahibiAdi");
        copyIban.select();
        document.execCommand("copy");
        window.getSelection().removeAllRanges();
    }

    function copyCustomerNumber() {
        var copyCustomerNumber = document.getElementById("musteriNumarasi");
        copyCustomerNumber.select();
        document.execCommand("copy");
        window.getSelection().removeAllRanges();
    }
</script>

<script>
    function formatAmount(input) {
        // Girilen değerden sadece sayıları al
        var value = input.value.replace(/[^\d,]/g, '');

        // Virgül eklemek için formatla
        value = formatNumber(value);

        // Input değerini güncelle
        input.value = value;
    }

    function formatNumber(number) {
        // Sayıyı ters çevir (virgülü sağa almak için)
        number = number.split('').reverse().join('');

        // Sayıyı 3'er gruplara ayır ve aralarına nokta ekle
        var formattedNumber = number.replace(/(\d{3})/g, '$1.').split('').reverse().join('');

        // Başındaki ve sondaki noktaları temizle
        if (formattedNumber.substring(0, 1) === '.') {
            formattedNumber = formattedNumber.substring(1);
        }

        return formattedNumber;
    }
</script>
<script>
    function toggleBankSelect() {
        var paymentMethodSelect = document.getElementById("paymentMethod");
        var bankSelectDiv = document.getElementById("bankSelectDiv");
        var additionalFields = document.getElementById("additionalFields");

        if (paymentMethodSelect.value === "Banka Hesabı") {
            bankSelectDiv.style.display = "block";
            additionalFields.style.display = "block";
            generateAndSetIBAN(); // IBAN'ı oluştur ve set et
        } else {
            bankSelectDiv.style.display = "none";
            additionalFields.style.display = "none";
            document.getElementById("iban").value = "";
        }
    }

    function generateAndSetIBAN() {
        var randomIBAN = generateRandomNumericIBAN();
        document.getElementById("iban").value = randomIBAN;
    }

    function generateRandomNumericIBAN() {
        var length = 24;
        var characters = "0123456789";
        var result = "TR";

        for (var i = 2; i < length; i++) {
            result += characters.charAt(Math.floor(Math.random() * characters.length));
        }

        return result;
    }

</script>

@endpush