@extends(template().'layout.master2')

@section('content2')

  <!-- Mobile Header -->
  <div class="flex items-center justify-between mb-6 md:hidden">
    <h5 class="text-lg font-semibold text-white">{{ __('Transfer') }}</h5>
    <a href="{{ route('user.dashboard') }}" class="flex items-center text-[#2FE6DE] hover:text-[#22c9c2] text-sm">
      <i class="bi bi-arrow-left mr-1"></i> {{ __('Back') }}
    </a>
  </div>

  <div class="grid lg:grid-cols-2 gap-8">
    <!-- Left Sidebar -->
    <div
      class="bg-[#0F0A1F]/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-gray-800/30 hover:border-[#2FE6DE]/10 transition-all duration-300 flex flex-col justify-between">
      <div>
        <h2 class="text-xl font-semibold text-white mb-6">Transfer Crypto</h2>
        <div class="space-y-3">
          <a href="{{ route('user.deposit') }}"
            class="block text-gray-400 hover:text-[#2FE6DE] transition-colors">Deposit Crypto</a>
          <a href="{{ route('user.withdraw') }}"
            class="block text-gray-400 hover:text-[#2FE6DE] transition-colors">Withdraw Crypto</a>
          <a href="{{ route('user.transfer') }}"
            class="block text-[#2FE6DE] font-semibold cursor-not-allowed opacity-70">Transfer Crypto</a>
          <a href="{{ route('user.exchange') }}"
            class="block text-gray-400 hover:text-[#2FE6DE] transition-colors">Exchange Crypto</a>
        </div>
      </div>

      <div class="mt-8">
        <a href="{{ route('user.transfer.log') }}"
          class="w-full inline-flex items-center justify-center px-4 py-3 rounded-xl bg-[#22c9c2] text-[#0D0B1E] font-semibold hover:bg-[#2FE6DE] transition-all duration-300">
          View All Transfers
        </a>
      </div>
    </div>

    <!-- Right Form -->
    <div
      class="bg-[#0F0A1F]/80 backdrop-blur-sm rounded-2xl p-8 shadow-lg border border-gray-800/30 hover:border-[#2FE6DE]/10 transition-all duration-300">
      <form action="{{ route('user.transfer.submit') }}" method="POST">
        @csrf

        <!-- Receiver -->
        <div class="mb-6">
          <label class="block text-gray-300 mb-2 font-medium">Receiver</label>
          <input type="text" name="receiver"
            placeholder="Wallet Address or Email"
            class="w-full bg-[#1A1428] text-white rounded-xl p-4 focus:outline-none focus:ring-2 focus:ring-[#22c9c2]/60 placeholder-gray-500" />
        </div>

        <!-- Currency -->
        <div class="mb-6">
          <label class="block text-gray-300 mb-2 font-medium">Currency</label>
          <select name="currency"
            class="w-full bg-[#1A1428] text-white rounded-xl p-4 focus:outline-none focus:ring-2 focus:ring-[#22c9c2]/60">
            @foreach ($currencies as $currency)
              <option value="{{ $currency->name }}">{{ $currency->name }}</option>
            @endforeach
          </select>
        </div>

        <!-- Amount -->
        <div class="mb-6">
          <label class="block text-gray-300 mb-2 font-medium">Amount</label>
          <input type="text" name="amount"
            placeholder="Enter Amount"
            class="w-full bg-[#1A1428] text-white rounded-xl p-4 focus:outline-none focus:ring-2 focus:ring-[#22c9c2]/60 placeholder-gray-500" />
        </div>

        <!-- Submit -->
        <button type="submit"
          class="w-full bg-[#22c9c2] text-[#0D0B1E] font-semibold py-3 rounded-xl hover:bg-[#2FE6DE] transition-all duration-300">
          Continue
        </button>
      </form>
    </div>
  </div>


   


@endsection

@push('script')



@endpush
