@extends($activeTemplate . 'layouts.master')

@push('style')
    <style>
        .quick_amount p {
            display: inline-block;
            text-align: center;
            font-size: 16px;
            border: 1px #dcdada solid;
            color: #000;
            width: 32%;
            background: #f7f7f7;
            border-radius: 4px;
            padding: 6px 0;
        }

        .quick_amount {
            width: 100%;
        }

        .chen {
            font-weight: 600;
        }

        .chen i {
            display: block;
            font-size: 12px;
            font-style: normal;
            font-weight: 100;
        }

        .quick_amount p.active {
            border: #FFA500 1px solid;
            color: #fff;
            background: #FFA500;
        }

        .quick_method p {
            display: inline-block;
            text-align: center;
            font-size: 16px;
            border: 1px #dcdada solid;
            color: #000;
            width: 32%;
            background: #f7f7f7;
            border-radius: 4px;
            padding: 6px 0;
        }

        .quick_method {
            width: 100%;
        }

        .quick_method p.active {
            border: #FFA500 1px solid;
            color: #fff;
            background: #FFA500;
        }

        .btn-lg {
            height: 34px;
            padding: 0 15px;
            font-size: 14px;
            border-radius: 30px;
        }

        .appContent {
            border-radius: 16px 16px 0 0;
        }


    </style>
@endpush

@section('content')


<body>
    
    <style>        
         body {
        margin: 0;
        padding: 0;
        font-family: 'Poppins', sans-serif;
        background: linear-gradient(to bottom, #FFA500, #e0eafc);
        min-height: 100vh;
        height:100%;
        
        display: flex;
        justify-content: center;
        align-items: flex-start;
      }
      </style>
    <!-- Page loading -->
    <div class="loading">
        <div class="spinner-grow"></div>
    </div>

    <!-- App Header -->
    <div class="appHeader"  style="background-color:#FFA500;margin-bottom:30px">
        <div class="left">
            <a href="{{ route('user.home') }}" class="icon goBack">
                <i class="icon ion-ios-arrow-back"></i>
            </a>
        </div>
        <div class="pageTitle">Withdraw</div>
        <div class="right">
            <a class="link"></a>
        </div>
    </div>

    <div id="appCapsule" class="pb-2" style="background:none;height:0px;">
        <div class="appContent pb-0 mt-3">
            <form action="{{ route('user.withdraw.money') }}" method="post">
                @csrf

                <div class="form-group">
                    <label>Payment Channel</label>
                    <select class="form-control" name="method_code" required>
                        <option value="">@lang('Select One')</option>
                        @foreach($withdrawMethod as $data)
                            <option value="{{ $data->id }}" data-resource="{{ $data }}">{{ __($data->name) }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label>Amount</label>
                    <input type="number" class="form-control" name="amount" id="amount" placeholder="00.00" oninput="updateSecondInput()">
                </div>

                <!--<div class="form-group">-->
                <!--    <label>Converted Amount (x0.012)</label>-->
                <!--    <input type="text" class="form-control" id="u_amount" readonly>-->
                <!--</div>-->

                <div class="form-group" id="u" style="display: none;">
                    <!-- This block is conditionally shown based on method -->
                    <label>Additional Info for USDT</label>
                    <input type="text" class="form-control" placeholder="e.g., wallet address">
                </div>

                <div class="quick_method" style="display: none;">
                    <button type="submit" class="chen active">Cas</button>
                </div>

                <div class="form-group mt-3">
                    <button type="submit" class="btn btn-primary btn-lg btn-block">Withdraw</button>
                </div>

                <div class="form-group mt-3">
                    <label>Withdraw Instructions:</label>
                    <div class="quick_method">
                        <span style="color: #0C0C0C">
                            1. The minimum withdrawal is 150 {{ __($general->cur_text) }} and the recharge time is 24/7.<br/>
                            2. If the account balance does not update within 30 minutes, please contact customer service.<br/>
                            3. Please complete the recharge within the platform.<br/>
                            4. The recharge amount must match the payment amount to avoid errors.<br/>
                            5. If payment fails, please go back and try again.<br/>
                        </span>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- JS scripts -->
    <script src="/static/js/jquery-3.4.1.min.js"></script>
    <script src="/static/js/app.js"></script>
    <script src="/static/js/mui.min.js"></script>
    <script src="/static/js/mui.loading.js"></script>
    <script src="/static/js/base.js"></script>

    <script>
        var $amountInput = $('#amount');
        var $amountInput1 = $('#u_amount');
        var $amountInput2 = $('#u');
        var amount = '';

        $(".quick_amount p").on("click", function () {
            amount = $(this).attr('data-item');
            if (!$(this).hasClass('active')) {
                $(this).addClass('active').siblings().removeClass('active');
                $amountInput.val(amount);
                $amountInput1.val((amount * 0.012).toFixed(4));
            } else {
                $(this).removeClass('active');
                $amountInput.val('');
                $amountInput1.val('');
            }
        });

        $(".quick_method p").on("click", function () {
            $(this).addClass('active').siblings().removeClass('active');
            $("#pay_type").val($(this).attr('data-type'));

            if ($(this).text() === 'Usdt') {
                $amountInput2.show();
            } else {
                $amountInput2.hide();
            }
        });

        $amountInput.on('input', function () {
            $('.quick_amount p').removeClass('active');
            updateSecondInput();
        });

        function updateSecondInput() {
            var amount = parseFloat($amountInput.val());
            if (!isNaN(amount)) {
                $amountInput1.val((amount * 0.012).toFixed(4));
            } else {
                $amountInput1.val('');
            }
        }

        function FormSubmit1(target) {
            var form = $(target).attr('data-form');
            var data = $("#" + form).serialize();
            var url = $("#" + form).attr('action');
            mui.showLoading("loading...", "div");
            $.post(url, data, function (data) {
                mui.hideLoading();
                if (data.url) {
                    window.location.href = data.url;
                } else {
                    mui.alert(data.msg);
                }
            }, 'json');
        }
    </script>
    
    </body>
@endsection
