@extends('front.layouts.master-auth')
@section('content')

    <!-- Start Page Content -->
    <section class="page-content">
        <div class="container">
            @if(is_null($user->stripe_connect_onboarded_at))
                <div class="alert alert-warning">
                    <strong>تنبيه!</strong> يجب إكمال ربط حساب Stripe Connect أولاً لتتمكن من السحب. <a id="strip-connect" href="{{route('stripe.connect.create-and-redirect')}}" target="_blank" rel="noopener noreferrer">اضغط هنا لإكمال الربط</a>
                </div>
            @endif
            <div class="money-form-page-title">
                <h2 class="money-form-name">
                    @lang('front.Withdraw Money')
                </h2>
                <a href="{{ route('user.transactions') }}" class="money-form-back">
                    @lang('front.Back to transactions')
                </a>

            </div>
            <div class="money-form-page-cont">
                <div class="money-form-cont">
                    <div class="money-right-div">
                        <div class="withdraw-page__method" role="status">
                            <span class="withdraw-page__method-icon" aria-hidden="true">
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M3 21h18"/>
                                    <path d="M5 21V7l8-4 8 4v14"/>
                                    <path d="M9 21v-4h6v4"/>
                                    <path d="M8 13h8"/>
                                </svg>
                            </span>
                            <span class="withdraw-page__method-text">@lang('front.Bank transfer')</span>
                        </div>
                        <div class="withdraw-balance-card">
                            <span class="withdraw-balance-card__label">@lang('front.Available Balance')</span>
                            <div class="withdraw-balance-card__row" dir="ltr">
                                <span class="withdraw-balance-card__currency" aria-hidden="true">$</span>
                                <span class="withdraw-balance-card__amount">{{ number_format((float) $balance, 2) }}</span>
                            </div>
                        </div>

                        
                        <form action="{{route('user.withdraw.request')}}" method="post" id="withdraw-form">
                            @csrf
{{--                            <input type="hidden" name="payment_method" value="paypal" id="payment_method_input">--}}
                            <input type="hidden" name="payment_method" value="bank" id="payment_method_input">

{{--                            <!-- PayPal Form Fields -->--}}
{{--                            <div id="paypal-fields" class="payment-fields">--}}
{{--                                <div class="money-inputs">--}}
{{--                                    <div class="form-group">--}}
{{--                                        <label>@lang('front.Enter the amount you want to withdraw')</label>--}}
{{--                                        <div class="input-cont">--}}
{{--                                            <input type="number" name="amount" min="{{ $minWithdrawalUsd }}" max="{{$balance}}" value="{{old('amount')}}" required class="form-control">--}}
{{--                                            <span>$</span>--}}
{{--                                        </div>--}}
{{--                                        @error('amount')--}}
{{--                                            <div class="alert alert-danger">{{ $message }}</div>--}}
{{--                                        @enderror--}}
{{--                                    </div>--}}
{{--                                    <div class="form-group">--}}
{{--                                        <label>@lang('PayPal Email')</label>--}}
{{--                                        <div class="input-cont">--}}
{{--                                            <input type="email" name="paypal_email" value="{{old('paypal_email',isset($user)?$user->paypal_email:"")}}" required class="form-control">--}}
{{--                                        </div>--}}
{{--                                        @error('paypal_email')--}}
{{--                                            <div class="alert alert-danger">{{ $message }}</div>--}}
{{--                                        @enderror--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <div class="checkbox">--}}
{{--                                    <label>--}}
{{--                                        <input type="checkbox" name="save_email" value="1">--}}
{{--                                        @lang('Save email for future use')--}}
{{--                                    </label>--}}
{{--                                </div>--}}
{{--                            </div>--}}

                            <!-- Bank Transfer Form Fields -->
                            <div id="bank-fields" class="payment-fields">
                                <div class="money-inputs">
                                    <div class="form-group">
                                        <label>@lang('front.Enter the amount you want to withdraw')</label>
                                        <div class="input-cont withdraw-amount-input-wrap">
                                            <span class="withdraw-amount__currency" aria-hidden="true">$</span>
                                            <input type="number"
                                                   required
                                                   name="bank_amount"
                                                   id="bank_amount"
                                                   min="{{ $minWithdrawalUsd }}"
                                                   max="{{ $balance }}"
                                                   value="{{ old('bank_amount') }}"
                                                   class="form-control withdraw-amount__input"
                                                   placeholder="@lang('front.Withdraw amount placeholder')"
                                                   inputmode="decimal"
                                                   step="any"
                                                   autocomplete="off">
                                        </div>
                                        <small class="text-muted d-block mt-1">@lang('front.Minimum withdrawal amount is :amount USD.', ['amount' => $minWithdrawalUsd])</small>
                                        @error('bank_amount')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
{{--                                    <div class="form-group">--}}
{{--                                        <label>@lang('front.Account Holder Name')</label>--}}
{{--                                        <div class="input-cont">--}}
{{--                                            <input type="text" required name="account_name" value="{{old('account_name')}}" class="form-control" >--}}
{{--                                        </div>--}}
{{--                                        @error('account_name')--}}
{{--                                            <div class="alert alert-danger">{{ $message }}</div>--}}
{{--                                        @enderror--}}
{{--                                    </div>--}}
{{--                                    <div class="form-group">--}}
{{--                                        <label>@lang('front.Bank Name')</label>--}}
{{--                                            <select name="bank_id" class="form-control" required>--}}
{{--                                                <option value="">@lang('Select')</option>--}}
{{--                                                @foreach($banks as $bank)--}}
{{--                                                    <option value="{{ $bank->id }}" {{ old('bank_id') == $bank->id ? 'selected' : '' }}>--}}
{{--                                                        {{ $bank->name }} @if($bank->code)({{ $bank->code }})@endif--}}
{{--                                                    </option>--}}
{{--                                                @endforeach--}}
{{--                                            </select>--}}
{{--                                        @error('bank_id')--}}
{{--                                            <div class="alert alert-danger">{{ $message }}</div>--}}
{{--                                        @enderror--}}
{{--                                    </div>--}}
{{--                                    <div class="form-group">--}}
{{--                                        <label>@lang('front.IBAN Number')</label>--}}
{{--                                        <div class="input-cont">--}}
{{--                                            <input type="text" required name="iban" value="{{old('iban')}}" class="form-control" >--}}
{{--                                        </div>--}}
{{--                                        @error('iban')--}}
{{--                                            <div class="alert alert-danger">{{ $message }}</div>--}}
{{--                                        @enderror--}}
{{--                                    </div>--}}
{{--                                    <div class="form-group">--}}
{{--                                        <label>@lang('front.SWIFT Code')</label>--}}
{{--                                        <div class="input-cont">--}}
{{--                                            <input type="text" required name="swift_code" value="{{old('swift_code')}}" class="form-control" id="swift_code_input">--}}
{{--                                        </div>--}}
{{--                                        <small class="text-muted">@lang('SWIFT code will be auto-filled when you select a bank')</small>--}}
{{--                                        @error('swift_code')--}}
{{--                                            <div class="alert alert-danger">{{ $message }}</div>--}}
{{--                                        @enderror--}}
{{--                                    </div>--}}
                                </div>
                            </div>

                            <button class="money-form-submit" type="submit">
                                @lang('front.Complete Process')
                            </button>
                        </form>
                    </div>
                    {{-- <div class="money-img">
                        <img src="{{asset('front/images/withdraw.png')}}" class="img-fluid">
                    </div> --}}
                </div>
                <div class="side-cont">
                    <h3 class="side-title">
                        @lang('Important Tips')
                    </h3>
                    <ol class="help" style="padding: 10px 30px !important;">
                        <li class="fs-15">@lang('front.Withdraw notes static 1')</li>
                        <li class="fs-15">@lang('front.Withdraw notes static 2')</li>
                        <li class="fs-15">@lang('front.Withdraw notes static 3')</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <!-- End Page Content -->

    <script>
        // Bank data for auto-filling SWIFT codes
        const banksData = @json($banks->keyBy('id')->map(function($bank) {
            return [
                'name' => $bank->name,
                'swift_code' => $bank->swift_code
            ];
        }));

        document.addEventListener('DOMContentLoaded', function() {
            const paypalMethod = document.getElementById('paypal_method');
            const bankMethod = document.getElementById('bank_method');
            const paypalFields = document.getElementById('paypal-fields');
            const bankFields = document.getElementById('bank-fields');
            const paymentMethodInput = document.getElementById('payment_method_input');
            const withdrawForm = document.getElementById('withdraw-form');
            const bankSelect = document.querySelector('select[name="bank_id"]');
            const swiftCodeInput = document.getElementById('swift_code_input');

            // Function to switch between payment methods
            function switchPaymentMethod(method) {
                if (!bankFields || !paymentMethodInput) {
                    return;
                }
                const bankAmount = bankFields.querySelector('input[name="bank_amount"]');
                if (method === 'paypal' && paypalFields) {
                    paypalFields.style.display = 'block';
                    bankFields.style.display = 'none';
                    paymentMethodInput.value = 'paypal';

                    const paypalAmount = paypalFields.querySelector('input[name="amount"]');
                    if (paypalAmount && bankAmount) {
                        paypalAmount.required = true;
                        bankAmount.required = false;
                        if (bankAmount.value) {
                            paypalAmount.value = bankAmount.value;
                        }
                    }
                } else {
                    if (paypalFields) {
                        paypalFields.style.display = 'none';
                    }
                    bankFields.style.display = 'block';
                    paymentMethodInput.value = 'bank';

                    const paypalAmount = paypalFields ? paypalFields.querySelector('input[name="amount"]') : null;
                    if (paypalAmount && bankAmount) {
                        paypalAmount.required = false;
                        bankAmount.required = true;
                        if (paypalAmount.value) {
                            bankAmount.value = paypalAmount.value;
                        }
                    } else if (bankAmount) {
                        bankAmount.required = true;
                    }
                }
            }

            if (paypalMethod) {
                paypalMethod.addEventListener('change', function() {
                    if (this.checked) {
                        switchPaymentMethod('paypal');
                    }
                });
            }

            if (bankMethod) {
                bankMethod.addEventListener('change', function() {
                    if (this.checked) {
                        switchPaymentMethod('bank');
                    }
                });
            }

            // Form submission handler
            withdrawForm.addEventListener('submit', function(e) {
                const checked = document.querySelector('input[name="payment_method"]:checked');
                const selectedMethod = checked ? checked.value : (paymentMethodInput ? paymentMethodInput.value : 'bank');

                if (selectedMethod === 'paypal') {
                    if (!paypalFields) {
                        return;
                    }
                    const amount = paypalFields.querySelector('input[name="amount"]').value;
                    const email = paypalFields.querySelector('input[name="paypal_email"]').value;

                    if (!amount || !email) {
                        e.preventDefault();
                        alert('@lang("Please fill in all required PayPal fields")');
                        return;
                    }
                } else if (selectedMethod === 'bank') {
                    const amount = bankFields.querySelector('input[name="bank_amount"]').value;
                    const accountNameEl = bankFields.querySelector('input[name="account_name"]');
                    if (accountNameEl) {
                        const bankId = bankFields.querySelector('select[name="bank_id"]');
                        const iban = bankFields.querySelector('input[name="iban"]');
                        const swiftCode = bankFields.querySelector('input[name="swift_code"]');
                        if (!amount || !accountNameEl.value || !bankId || !bankId.value || !iban || !iban.value || !swiftCode || !swiftCode.value) {
                            e.preventDefault();
                            alert('@lang("Please fill in all required bank transfer fields")');
                            return;
                        }
                    } else if (!amount) {
                        e.preventDefault();
                        alert('@lang("Please fill in all required bank transfer fields")');
                    }
                }
            });

            if (bankSelect && swiftCodeInput) {
                bankSelect.addEventListener('change', function() {
                    const selectedBankId = this.value;
                    if (selectedBankId && banksData[selectedBankId]) {
                        swiftCodeInput.value = banksData[selectedBankId].swift_code || '';
                    } else {
                        swiftCodeInput.value = '';
                    }
                });
            }

            if (bankFields && paymentMethodInput) {
                switchPaymentMethod('bank');
            }
        });
    </script>

    <style>
        .fs-15 {
            font-size: 15px !important;
            line-height: unset !important;
        }

        .payment-fields {
            transition: all 0.3s ease;
        }

        .alert-danger {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }

        .input-cont {
            position: relative;
        }

        .input-cont span {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #666;
        }

        .withdraw-amount-input-wrap .withdraw-amount__currency {
            left: 14px;
            right: auto;
            font-weight: 600;
            color: #333;
            opacity: 0.9;
        }

        .withdraw-amount__input {
            padding-left: 2.35rem;
            min-height: 44px;
        }

        .input-cont select {
            padding-right: 30px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 0.75rem;
            width: 100%;
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 0.7rem center;
            background-size: 1em;
        }

        .input-cont select:focus {
            border-color: #007bff;
            outline: none;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        .input-cont select option {
            padding: 0.5rem;
        }

        .withdraw-page__method {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            margin-bottom: 1.25rem;
            border-radius: 10px;
            background: rgba(20, 150, 90, 0.08);
            color: var(--primary-color, #14965a);
            font-weight: 600;
            font-size: 15px;
        }

        .withdraw-page__method-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 9px;
            background: #fff;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        }

        .withdraw-page__method-icon svg {
            display: block;
        }

        .withdraw-balance-card {
            margin-bottom: 1.35rem;
            padding: 1rem 1.15rem;
            /* border-radius: 12px; */
            border: 1px solid rgba(20, 150, 90, 0.18);
            /* background: linear-gradient(135deg, rgba(20, 150, 90, 0.07) 0%, #fff 55%); */
            /* box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05); */
        }

        .withdraw-balance-card__label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: #555;
            margin-bottom: 0.35rem;
            letter-spacing: 0.01em;
        }

        .withdraw-balance-card__row {
            display: inline-flex;
            align-items: baseline;
            gap: 0.2rem;
            flex-wrap: wrap;
        }

        .withdraw-balance-card__currency {
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--primary-color, #14965a);
            line-height: 1;
        }

        .withdraw-balance-card__amount {
            font-size: clamp(1.65rem, 4vw, 2rem);
            font-weight: 700;
            color: var(--primary-color, #14965a);
            letter-spacing: 0.03em;
            font-variant-numeric: tabular-nums;
        }
    </style>

@endsection