@extends('layouts.default')
@section('content')
  <style>
    .copy-wrapper {
      position: relative;
      display: block;
    }

    .copy-wrapper::after {
      content: "Kopyala";
      position: absolute;
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%);
      background-color: #333;
      color: #fff;
      padding: 5px;
      border-radius: 5px;
      font-size: 12px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
      white-space: nowrap;
      z-index: 1000;
    }

    .copy-wrapper:hover::after {
      opacity: 1;
      visibility: visible;
    }

    .copy-wrapper.copied::after {
      content: "Kopyalandı";
      background-color: #28a745;
    }

    .copyable {
      cursor: pointer;
    }
  </style>

  <div class="container">
    <div class="row">
      <x-sidebar />
      <div class="col-lg-9">
        <div class="container">
          <form id="depositForm" method="post">
            <div class="form-step" id="step1">
              <h2 class="fw-400 text-center mt-3">{{__('Hesabınıza Para Yatırın')}}</h2>
              <p class="lead text-center mb-4">{{__('Güvenli bir şekilde para yatırın.')}}</p>
              <div class="row">
                <div class="col-md-9 col-lg-7 col-xl-12 mx-auto">
                  <div class="bg-white shadow-sm rounded p-3 pt-sm-4 pb-sm-5 px-sm-5 mb-4">
                    <div class="mb-3">
                      <label for="bankSelect" class="form-label">{{__('Banka Seçiniz')}}</label>
                      <select id="bankSelect" class="form-select" required>
                        <option value="">{{__('Bankalar')}}</option>
                        @foreach($bankAccounts ?? [] as $account)
                          <option value="{{ $account['id'] }}">{{ $account['bank_name'] }}</option>
                        @endforeach
                      </select>
                    </div>
                    <div class="mb-3">
                      <label for="accountHolder">{{__('Hesap Sahibi')}}</label>
                      <div class="input-group">
                        <div class="copy-wrapper w-100">
                          <input type="text" class="form-control copyable" onclick="copyToClipboard(this.parentElement)" id="accountHolder" required placeholder="" readonly>
                        </div>
                      </div>
                    </div>
                    <div class="mb-3">
                      <label for="iban">{{__('IBAN')}}</label>
                      <div class="input-group">
                        <div class="copy-wrapper w-100">
                          <input type="text" class="form-control copyable" onclick="copyToClipboard(this.parentElement)" id="iban" required placeholder="" readonly>
                        </div>
                      </div>
                    </div>
                    <div class="mb-3">
                      <label for="accountNumber1">{{__('Müşteri Numarası')}}</label>
                      <div class="input-group">
                        <div class="copy-wrapper w-100">
                          <input type="text" class="form-control copyable" onclick="copyToClipboard(this.parentElement)" id="accountNumber1" required value="{{auth()->user()->merchant_id}}" readonly>
                        </div>
                      </div>
                    </div>
                    <i class="fa fa-info-circle" aria-hidden="true"> Yalnızca kendinize ait bir banka hesabından Havale/EFT yapabilirsiniz</i>
                    <i class="fa fa-info-circle" aria-hidden="true"> Havale/EFT sırasında Müşteri Numarasını Açıklama Kısmınına yazmanız gerekmektedir.</i>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const bankAccounts = @json($bankAccounts);

      document.getElementById('bankSelect').addEventListener('change', function() {
        if (this.value) {
          const account = bankAccounts.find(acc => acc.id === parseInt(this.value));
          if (account) {
            document.getElementById('accountHolder').value = account.account_holder_name;
            document.getElementById('iban').value = account.iban;
          }
        } else {
          document.getElementById('accountHolder').value = '';
          document.getElementById('iban').value = '';
        }
      });
    });

    function copyToClipboard(element) {
      // Input elementini bul
      const input = element.querySelector('input');

      navigator.clipboard.writeText(input.value).then(() => {
        element.classList.add('copied');

        setTimeout(() => {
          element.classList.remove('copied');
        }, 2000);
      }).catch(err => {
        console.error("Kopyalama işlemi başarısız: ", err);
      });
    }
  </script>
@endsection