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

@section('content2')


<style>


.tabs--style-5 .tabs__item {
    padding: 12px 0;
    width: 100%;
    border: 1px solid hsla(0, 0%, 100%, .1);
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    gap: 10px;
    justify-content: center;
    line-height: 16px;
    position: relative;
    text-align: center;
    background: black;
}
    .tabs {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    gap: 18px;
    margin-bottom: 1.5rem;
}
.tabs--style-5 {
    row-gap: 8px;
}

/*.tabs--style-5 .tabs__item {*/
/*    padding: 12px 0;*/
/*    width: 100%;*/
/*    border: 1px solid hsla(0,0%,100%,.1);*/
/*    border-radius: 2px;*/
/*    color: #fff;*/
/*    cursor: pointer;*/
/*    display: flex;*/
/*    font-size: 14px;*/
/*    font-weight: 500;*/
/*    gap: 10px;*/
/*    justify-content: center;*/
/*    line-height: 16px;*/
/*    position: relative;*/
/*    text-align: center;*/
/*}*/
.tabs:not(.tabs--disabled) .tabs__item--active {
    background: #315df1;
}

.btn--blue:not(.btn--outline) {
    background-color: #315cf0;
    color: #fff;
}
.btn--full-width {
    width: 100%;
}
</style>
<!-- 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="dashboard-body-part flex flex-col items-center px-6 py-12 bg-[#08090d] text-gray-100">

    <!-- Section Header -->
    <div class="mb-6 w-full max-w-2xl text-center">
        <h4 class="text-xl font-semibold mb-2">{{ __('Withdraw To Bank') }}</h4>
        <div class="earn-box__val text-gray-300">
            {{ __('Your Balance:') }} <span>{{ @Auth::user()->currency }}</span>{{ number_format(auth()->user()->balance, 2) }}
        </div>
        <div class="mt-3">
            <a href="/withdraw/all" class="btn btn--blue btn--full-width">{{ __('View Pending Withdrawals') }}</a>
        </div>
    </div>

    <!-- Withdrawal Form -->
    <div class="w-full max-w-2xl bg-[#0e0f13] border border-gray-800 rounded-2xl shadow-2xl p-8">
        <form method="POST" action="{{ url('withdraw') }}" class="space-y-5">
            @csrf

            <!-- Method Tabs -->
            <ul id="fiat-tabs" class="flex justify-center space-x-4 mb-4 cursor-pointer">
                <li class="tabs__item tabs__item--active" data-method="Bank">
                    <img src="/asset/img/w-cards.3f1e01876b3f8729f783.png" class="h-10">
                </li>
                <li class="tabs__item" data-method="PayPal">
                    <img src="/asset/img/w-paypal.6f680a07d572029fb1bd.png" class="h-10">
                </li>
                <li class="tabs__item" data-method="WebMoney">
                    <img src="/asset/img/w-webmoney.73a32705a40276bb7f16.png" class="h-10">
                </li>
            </ul>

            <!-- Hidden Method Input -->
            <input type="hidden" name="method" value="Bank" id="withdraw-method">

            <!-- Currency Selector -->
            <div>
                <label class="block mb-1 font-semibold">{{ __('Currency') }}</label>
                <select 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-[#f26a23]" name="currency">
                    @foreach ($currencies as $currency)
                        <option value="{{ $currency->symbol }}">{{ $currency->symbol }} - {{ $currency->name }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Amount -->
            <div>
                <label class="block mb-1 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-[#f26a23]">
                <p class="text-gray-400 mt-1 text-sm">
                    {{ __('Limits:') }} {{ @Auth::user()->currency }}{{ number_format($general->withdrawal_min_amount) }} - {{ @Auth::user()->currency }}{{ number_format($general->withdrawal_max_amount) }}
                </p>
            </div>

            <!-- Bank Details -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block mb-1 font-semibold">{{ __('Account Name') }}</label>
                    <input type="text" name="account_name" 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-[#f26a23]">
                </div>
                <div>
                    <label class="block mb-1 font-semibold">{{ __('Account Number') }}</label>
                    <input type="text" name="account_number" placeholder="{{ __('Enter bank account number') }}" 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-[#f26a23]">
                </div>
                <div>
                    <label class="block mb-1 font-semibold">{{ __('Bank Name') }}</label>
                    <input type="text" name="bank_name" 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-[#f26a23]">
                </div>
                <div>
                    <label class="block mb-1 font-semibold">{{ __('Country') }}</label>
                    <input type="text" name="account_country" 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-[#f26a23]">
                </div>
                <div class="md:col-span-2">
                    <label class="block mb-1 font-semibold">{{ __('Routine Number / Sort Code / IBAN (Optional)') }}</label>
                    <input type="text" name="iban" 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-[#f26a23]">
                </div>
            </div>

            <!-- Transfer Code -->
            <div>
                <label class="block mb-1 font-semibold">{{ __('Transfer Code') }}</label>
                <input type="text" name="transfer_code" 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-[#f26a23]">
            </div>

            <!-- Submit Button -->
            <button type="submit" class="text-center w-full py-3 rounded-lg bg-[#f26a23] text-white font-semibold hover:bg-[#ff7e3d] transition focus:outline-none focus:ring-2 focus:ring-[#f26a23]">
                {{ __('Confirm') }}
            </button>

            <p class="text-center my-4 text-gray-400">--or--</p>

            <!-- Withdraw via Crypto Button -->
            <a href="withdraw" class="w-full flex justify-center py-3 rounded-lg bg-[#1e293b] text-gray-100 font-semibold hover:bg-[#374151] transition items-center">
                <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2">
                    <path d="M1.5 9.457h12.75" stroke="#343a40" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M14.25 7.71v5.362c-.023 2.138-.607 2.678-2.835 2.678h-7.08c-2.265 0-2.835-.563-2.835-2.797V7.71c0-2.025.472-2.677 2.25-2.782.18-.008.375-.015.585-.015h7.08c2.265 0 2.835.562 2.835 2.797Z" stroke="#343a40" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M16.5 5.048v5.242c0 2.025-.473 2.678-2.25 2.783V7.71c0-2.235-.57-2.798-2.835-2.798h-7.08c-.21 0-.405.008-.585.016.022-2.138.608-2.678 2.835-2.678h7.08c2.265 0 2.835.563 2.835 2.798Z" stroke="#343a40" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M3.938 13.357h1.29M6.832 13.357h2.58" stroke="#343a40" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                {{ __('Withdraw Via Crypto') }}
            </a>
        </form>
    </div>

</div>

<!-- Script for method tabs -->
<script>
    const tabs = document.querySelectorAll('#fiat-tabs .tabs__item');
    const methodInput = document.getElementById('withdraw-method');

    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            tabs.forEach(t => t.classList.remove('tabs__item--active'));
            tab.classList.add('tabs__item--active');
            methodInput.value = tab.dataset.method;
        });
    });
</script>



   <style>
       .btn--full-width {
                width: 100%;
            }
            .btn--blue {
                color: #fff;
            }
            
             .btn--blue3:not(.btn--outline) {
                background-color: #00bdb0;
                color:#fff;
            }
   </style>


@endsection

@push('script')

<script>
    var tabs = document.querySelectorAll('#fiat-tabs .tabs__item');
    var methodInput = document.querySelector('input[name="method"]');
    var fiatRp = document.querySelector('#fiat-rp');

    tabs.forEach(function(tab) {
        tab.addEventListener('click', function() {
            // Remove 'tabs__item--active' class from all tabs
            tabs.forEach(function(t) {
                t.classList.remove('tabs__item--active');
            });

            // Add 'tabs__item--active' class to the clicked tab
            tab.classList.add('tabs__item--active');

            // Get the 'data-name' attribute value of the clicked tab
            var dataId = tab.getAttribute('data-name');
           

            // Set the value of the 'method' input to the 'data-name'
            // methodInput.value = dataId;

            // Update the HTML content of #fiat-rp based on the selected list item
            if (dataId === 'Bank') {
                fiatRp.innerHTML = `
                <div class="input input--small input--label-bold input--dark2">
                                    <div class="input__label pt-3"> Account Name </div>
                                    <div class="input__wrapper">
                                       
                                        <div class="input__box">
                                           <input class="input__field form-control" name="acct_name"  tabindex="0" type="text">
                                        </div>
                                    </div>
                                </div>
                                <div class="input input--small input--label-bold input--trans">
                                    <div class="input__label pt-3"> Account Number </div>
                                    <div class="input__wrapper">
                                       
                                        <div class="input__box">
                                            <input class="input__field form-control" name="acct_no"  placeholder="Enter bank account number" tabindex="0" type="text">
                         
                                        </div>
                                    </div>
                                </div>
                                <div class="input input--small input--label-bold input--trans">
                                    <div class="input__label pt-3"> Bank Name </div>
                                    <div class="input__wrapper">
                                        
                                        <div class="input__box">
                                            <input class="input__field form-control" name="bank"  tabindex="0" type="text">
                                            
                                        </div>
                                    </div>
                                </div>
                `;
            } else if (dataId === 'PayPal') {
                fiatRp.innerHTML = `
                <div class="input input--small input--label-bold input--trans">
                                    <div class="input__label pt-3"> Email </div>
                                    <div class="input__wrapper">
                                       
                                        <div class="input__box">
                                            <input class="input__field form-control" name="email"  tabindex="0" type="text">
                                            
                                        </div>
                                    </div>
                                </div>
                `;
            } else if (dataId === 'WebMoney') {
                fiatRp.innerHTML = `
                <div class="input input--small input--label-bold input--trans">
                                    <div class="input__label pt-3"> Number </div>
                                    <div class="input__wrapper">
                                        
                                        <div class="input__box">
                                            <input class="input__field form-control" name="webmoney_number"  tabindex="0" type="text">
                                            
                                        </div>
                                    </div>
                                </div>
                `;
            }
        });
    });

    // Set the initial value of the 'method' input and #fiat-rp content
    var firstTab = document.querySelector('#fiat-tabs .tabs__item--active');
    var initialDataId = firstTab.getAttribute('data-id');
    methodInput.value = initialDataId;
    
    

</script>



@endpush
