@extends('layouts.front-end.body')

@section('content')
    <div class="wrapper" style="margin-bottom: 100px;">

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper" style="min-height: 923px;">
            <div class="curve"></div>
            <div class="toast" id="alert_toast" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-body text-white">
                </div>
            </div>
            <div id="toastsContainerTopRight" class="toasts-top-right fixed"></div>
            <!-- Content Header (Page header)-->
            <div class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <!--<h1 class="m-0">New Withdraw</h1>-->
                        </div>

                    </div>
                    <!--<hr class="border-primary">-->
                </div>
            </div>
            <!-- /.content-header -->

            <section class="content">
                <div class="container-fluid">


                    <style>
                        @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

                        * {

                            font-family: 'Poppins', sans-serif;
                        }

                        .range {
                            height: 80px;
                            width: 100%;
                            background: #fff;
                            border-radius: 10px;
                            padding: 0 65px 0 45px;
                            box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
                        }

                        .sliderValue {
                            position: relative;
                            width: 100%;
                        }

                        .sliderValue span {
                            position: absolute;
                            height: 32px;
                            width: 100px;
                            transform: translateX(-70%) scale(0);
                            font-weight: 500;
                            top: -16px;
                            left: 50%;
                            line-height: 35px;
                            z-index: 2;
                            color: #fff;
                            transform-origin: bottom;
                            transition: transform 0.3s ease-in-out;
                            background: #6f42c1;
                            border-radius: 21px;
                            text-align: center;
                        }

                        .sliderValue span.show {
                            transform: translateX(-70%) scale(1);
                        }

                        .sliderValue span:after {
                            content: '';
                            width: 0px;
                            height: 0px;
                            border-style: solid;
                            border-color: #6f42c1 transparent transparent transparent;
                            border-width: 5px;
                            position: absolute;
                            bottom: -5px;
                            left: 50%;
                            -webkit-transform: rotate(94deg);
                            -moz-transform: rotate(94deg);
                            -ms-transform: rotate(94deg);
                            -o-transform: rotate(94deg);
                            transform: rotate(94deg);
                        }


                        .field {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            height: 100%;
                            position: relative;
                        }

                        .field .value {
                            position: absolute;
                            font-size: 18px;
                            color: #664AFF;
                            font-weight: 600;
                        }

                        .field .value.left {
                            left: -22px;
                        }

                        .field .value.right {
                            right: -43px;
                            z-index: 9999;
                        }

                        .range input {
                            -webkit-appearance: none;
                            width: 100%;
                            height: 3px;
                            background: #ddd;
                            border-radius: 5px;
                            outline: none;
                            border: none;
                            z-index: 2222;
                        }

                        .range input::-webkit-slider-thumb {
                            -webkit-appearance: none;
                            width: 20px;
                            height: 20px;
                            background: red;
                            border-radius: 50%;
                            background: #664AFF;
                            border: 1px solid #664AFF;
                            cursor: pointer;
                        }

                        .range input::-moz-range-thumb {
                            -webkit-appearance: none;
                            width: 20px;
                            height: 20px;
                            background: red;
                            border-radius: 50%;
                            background: #664AFF;
                            border: 1px solid #664AFF;
                            cursor: pointer;
                        }

                        .range input::-moz-range-progress {
                            background: #664AFF; //this progress background is only shown on Firefox
                        }

                        input type="text" {
                            resize: none;
                        }

                        .curve {
                            height: 22vh;
                        }

                        .bink_card_ul li input[data-v-cc2885a2] {
                            float: left;
                            width: 6rem;
                            font-size: 1rem;
                            line-height: 1.173333rem;
                            color: #666;
                        }


                        ul,
                        li {
                            padding: 0;
                            margin: 0;
                            list-style: none;
                            box-shadow: none;
                            border-radius: 5px;

                        }


                        .bink_card_ul li[data-v-cc2885a2] {
                            background-color: #fff;
                            padding: 12px 0.56rem;
                            overflow: hidden;
                            height: 45px;
                        }

                        ul {
                            background-color: none;
                        }

                        .bink_card_ul li input[data-v-cc2885a2] {
                            float: left;
                            width: 6rem;
                            font-size: 1rem;
                            line-height: 1.173333rem;
                            color: #666;
                        }

                        .bink_card_ul li h4[data-v-cc2885a2] {
                            float: left;
                            font-size: .8rem;
                            line-height: 1.173333rem;
                            color: #999;
                            width: 2.533333rem;
                        }

                        @media only screen and (min-width:768px) {
                            .bink_card_ul li h4[data-v-cc2885a2] {
                                font-size: 1.1rem;
                            }
                        }

                        button,
                        input,
                        select {
                            outline-style: none;
                            border: 0;
                        }

                        @media only screen and (max-width: 767px) {

                            .form-control,
                            select {
                                border: none;
                                border-bottom: 1px solid #6610f2;
                                border-radius: 0;
                                background-color: #F1F3F8;
                                border-radius: 0;
                            }
                        }
                    </style>
                    <div class="col-md-12">

                        <form action="{{route('request-withdraw')}}" method="POST"  id="manage-withdraw">
                            <input type="hidden" name="id" value="">
                            {{ csrf_field() }}
                            <!-- <input type="hidden" name="create_by" value="1400"> -->

                            <div class="row">
                                <div class="col-md-12">
                                    <div id="msg" class=""></div>


                                    <div class="row">



                                        <div class="col-md-12 p-0 pb-0">
                                            <div data-v-35ad745e="" class="card records_top p-1 pb-0 bg-custom-grad"
                                                style=" width: 100%;">
                                                <div data-v-35ad745e="" class="records_top1" style="color: #28309c;">
                                                    <!-- <p data-v-35ad745e="" style="color: #28309c; font-size: 16px;">บันทึกการรับคำสั่งซื้อ</p><p data-v-35ad745e="" style="font-size: 0.4rem;color: #28309c;">THB3576.00</p> -->

                                                    <div class="col-12"
                                                        style="display: flex; padding-left:5px ;align-items:center">
                                                        <div class="d-flex w-100" style="flex-direction:column">
                                                            <div class="d-flex" style="align-items:center">
                                                                <div class="tou_xiang col-2 p-0">
                                                                    <img style="   width: 52px; height: 52px;"
                                                                        src="{{ asset('front-end/assets/uploads/client.png') }}" alt=""
                                                                        onerror="this.src='{{ asset('front-end/assets/uploads/client.png') }}'"
                                                                        srcset="">
                                                                </div>
                                                                <div class="user_name pl-2 text-white col-10">
                                                                    {{-- <span>: อนุสรณ์ โมคาพันธ์ ID: 1400</span>
                                                                    <div class="d-flex col-12 justify-content-start">

                                                                        <div class="col-5 text-white">
                                                                            User ID 123456 </div>
                                                                        <div class="col-5 text-white">
                                                                            {{__('message.credit')}} 0 </div>
                                                                    </div> --}}
                                                                </div>


                                                            </div>

                                                        </div>
                                                    </div>

                                                    <div style="margin:-6px" class="mt-3">
                                                        <div class="w-100"
                                                            style="background: #fff; padding: 5px; border-radius: 15px;">
                                                            <div
                                                                class="w-100 p-2 d-flex justify-content-start align-items-center border-bottom">

                                                                <div class="w-50 col-6 wallet"
                                                                    style="font-size: 1.4rem;color: #333333;margin-bottom: 5px;">