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

@section('content2')




<!---->
<!---->



<!-- Error Modal -->
<div id="errorModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50">
    <div class="bg-white rounded-xl shadow-xl max-w-md w-full p-6 text-center">
        <div class="text-5xl mb-3 text-red-500">❌</div>

        <h3 class="text-xl font-semibold mb-2 text-red-600">
            Transfer Failed
        </h3>

        <p id="errorMessage" class="text-gray-600 mb-6"></p>

        <button onclick="closeErrorModal()"
            class="px-6 py-2 rounded-lg text-white bg-red-600 hover:bg-red-700 transition">
            Try Again
        </button>
    </div>
</div>
<script>
    function closeErrorModal() {
        document.getElementById('errorModal').classList.add('hidden');
    }

    document.addEventListener('DOMContentLoaded', function () {
        @if (session('error'))
            document.getElementById('errorMessage').innerText = "{{ session('error') }}";
            document.getElementById('errorModal').classList.remove('hidden');
        @endif
    });
</script>



<div class="min-h-screen bg-gray-900 text-gray-100 p-6 flex flex-col">

  <!-- Header -->
  <div class="flex items-center justify-between mb-8">
    <h1 class="text-2xl font-bold">{{ __('Withdrawal') }}</h1>
    <a href="{{ route('user.dashboard') }}" class="flex items-center gap-2 text-gray-400 hover:text-white">
      <i class="bi bi-arrow-left"></i> {{ __('Back') }}
    </a>
  </div>

  <!-- Page Title -->
  <div class="text-center mb-10">
    <h2 class="text-3xl font-semibold">{{ __('Withdraw Crypto') }}</h2>
    <p class="text-gray-400 mt-2">Choose your withdrawal network and enter details below</p>
  </div>

  <div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">

    <!-- Left Panel -->
    <div class="bg-gray-800 rounded-2xl p-6 flex flex-col justify-between">
      <div>
        <div class="flex justify-end mb-4">
          <a href="{{ route('user.dashboard') }}" class="text-gray-400 hover:text-white text-2xl">
            <i class="fas fa-times-circle"></i>
          </a>
        </div>

        <div class="mb-4 text-gray-200">
          <span class="font-semibold">{{ __('Balance:') }}</span> {{ @Auth::user()->currency }}{{ number_format(auth()->user()->balance, 2) }}
        </div>

        <h3 class="text-lg font-semibold mb-2">{{ __('Withdraw Crypto') }}</h3>
        <ul class="space-y-1">
          <li><a href="deposit" class="text-orange-500 hover:underline">{{ __('Deposit Crypto') }}</a></li>
          <li class="text-gray-500">{{ __('Withdraw Crypto') }}</li>
   
        </ul>
      </div>

      <div class="mt-6">
        <a href="/withdraw/all" class="w-full bg-orange-500 hover:bg-orange-600 text-white py-3 rounded-xl font-semibold text-center transition">
          {{ __('View all Withdraws') }}
        </a>
      </div>
    </div>

    <!-- Right Panel -->
    <div class="bg-gray-800 rounded-2xl p-6 space-y-6">
      <form method="post" action="{{ url('withdraw') }}" class="space-y-6">
        @csrf

        <p class="text-gray-400 text-sm">{{ __('Chosen withdrawal method should correspond with deposit method.') }}</p>

        <div class="text-gray-200">
          <span class="font-semibold">{{ __('Balance:') }}</span> {{ @Auth::user()->currency }}{{ number_format(auth()->user()->balance, 2) }}
        </div>

        <!-- Network Tabs -->
        <div>
          <label class="block mb-2 font-semibold">{{ __('Network') }}</label>
          <ul class="flex space-x-2 border-b border-gray-700 cursor-pointer" id="withdraw-tab">
            @foreach ($withdraws as $withdraw)
              <li class="px-4 py-2 rounded-t-lg bg-gray-700 text-gray-200 hover:bg-gray-600" data-id="{{ $withdraw->id }}">
                {{ $withdraw->name }}
              </li>
            @endforeach
          </ul>
        </div>

        <!-- Amount -->
        <div>
          <label class="block mb-2 font-semibold">{{ __('Amount') }}</label>
          <input type="number" name="amount" placeholder="Amount" class="w-full p-3 rounded-lg bg-gray-900 border border-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500">
        </div>

        <!-- Wallet Address -->
        <div>
          <label class="block mb-2 font-semibold">{{ __('Enter receiving wallet address') }}</label>
          <input type="text" name="wallet_address" placeholder="Enter wallet address" class="w-full p-3 rounded-lg bg-gray-900 border border-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500">
        </div>

        <!-- Transfer Code -->
        <div>
          <label class="block mb-2 font-semibold">{{ __('Transfer Code') }}</label>
          <input type="text" name="transfer_code" placeholder="Request your transfer code from support" class="w-full p-3 rounded-lg bg-gray-900 border border-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500">
        </div>

        <!-- Hidden method -->
        <input type="hidden" name="method" id="withdraw_method_id">

        <!-- Submit -->
        <button type="submit" class="w-full bg-orange-500 hover:bg-orange-600 text-white text-center py-3 rounded-xl font-semibold transition">
          {{ __('Continue') }}
        </button>

        <div class="text-center text-gray-400">--or--</div>

        <a href="withdraw-fiat" class="w-full flex justify-center items-center gap-2 bg-gray-700 hover:bg-gray-600 text-gray-100 py-3 rounded-xl font-semibold transition">
          <i class="fas fa-university"></i> {{ __('Withdraw to Bank') }}
        </a>
      </form>
    </div>

  </div>
</div>

    
    



   


@endsection

@push('script')

    <script>
        $(function() {
            'use strict'

            $('.paynow').on('click', function() {
                const modal = $('#paynow')

                modal.find('form').attr('action', $(this).data('href'))
                modal.find('input[name=id]').val($(this).data('id'))

                modal.modal('show')
            })
        })
    </script>



<script>
    var tabs = document.querySelectorAll('#withdraw-tab li');
    var hiddenInput = document.getElementById('withdraw_method_id');

    tabs.forEach(function(tab, index) {
        tab.addEventListener('click', function () {

            tabs.forEach(function(t) {
                t.classList.remove('bg-orange-500', 'text-white');
                t.classList.add('bg-gray-700', 'text-gray-200');
            });

            tab.classList.remove('bg-gray-700', 'text-gray-200');
            tab.classList.add('bg-orange-500', 'text-white');

            hiddenInput.value = tab.getAttribute('data-id');
        });

        // Set first tab as default
        if (index === 0) {
            tab.classList.add('bg-orange-500', 'text-white');
            hiddenInput.value = tab.getAttribute('data-id');
        }
    });
</script>



@endpush
