@extends('admin.layout')
@section('custom-style')
<link rel="stylesheet"
    href="{{url('admin-assets/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css')}}">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<style>
    .alert {
        padding: 2px 10px;
    }

    .add-new {
        float: right;
    }

    .thumbnail-image {
        height: 30px;
        float: left;
        width: 40%;
        margin-right: 2%;
    }

    .dataTables_length {
        margin-right: 10px;
        /* Adjust the right margin/padding */
    }

    /* Adjust the padding between the "Show" text and the select box */
    .dataTables_length label {
        padding-right: 10px;
        /* Adjust the right padding */
    }

    div.dataTables_length {
        margin-right: 1em;
    }

    /* responsive table wrapper for smaller screens*/
    .details-column {
        width: 100%;
        position: absolute;
        top: 7vh;
        right: 0;
    }

    @media(max-width:575px) {
        .custom_display_dp_link {
            display: none !important;
        }
    }

    @media(min-width:576px) {
        .custom_display_mb_link {
            display: none !important;
        }
    }

    .custom-bg {
        background-color: rgb(60, 141, 188);
    }

    .text-white {
        color: #fff;
    }

    .text-white-heavy {
        color: #fff;
        font-weight: 500;
    }

    .text-white-heavier {
        color: #fff;
        font-weight: 700;
        font-size: 1.2em
    }

    .lf-rev-row {
        color: #fff;
        font-weight: 700;
        font-size: 4em;
    }

    .lf-rev-row-two {
        color: #fff;
        font-weight: 500;
        font-size: 3em;
    }

    .text-grey-heavy {
        color: whitesmoke;
        font-weight: 400;
        font-size: 1em;
    }

    .text-grey-heavier {
        color: floralwhite;
        font-weight: 700;
        font-size: 1.2em;
    }

    @media screen and (min-width:1201px) {
        .rev-flex-container-xl {
            display: flex !important;
            flex-direction: column !important;
        }

        .lf-rev-row {
            width: 100% !important;
        }

        .lf-rev-row-two {
            width: 850px !important;
        }
    }

    .withdrawal-helper-text {
        color: #EAB35C;
        font-size: 1.1em;
        padding: 5px 0 !important;
    }

    .custom-input-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 400px;
        padding: 10px 0;
        margin: 5px 0;
    }

    #withdrawal-amount-input {
        background: #C9CCD3;
        background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4"%3E%3Cpath fill="%239C92AC" fill-opacity="0.4" d="M1 3h1v1H1V3zm2-2h1v1H3V1z"%3E%3C/path%3E%3C/svg%3E'), linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
        width: 100%;
        height: 100px;
        padding: 30px;
        font-size: 3em;
        font-weight: 700;
        color: #E08E0B;
        text-shadow: 0 0 3px #fff;
        border: none;
        border-radius: 10px;
        outline: none;
        transition: all 0.25s;
    }

    #withdrawal-amount-input:focus {
        border-color: #888;
    }

    @media(max-width:575px){
        .text-white-heavy {font-size:15px !Important;}
    }
</style>
@endsection
@section('content')
<section class="content-header">
    <h1>
        Withdraw your earnings
    </h1>
</section>

<!-- Main content -->
<section class="content">

    <!-- Info boxes -->
    <!-- form start -->
    <form role="form" method="post" enctype="multipart/form-data">
        {{csrf_field()}}
        <div class="row" style="margin-bottom: 20px;">
            <div class="col-lg-9" style="margin-bottom:10px;">
                <div class="revenue-div mx-auto custom-bg p-3 px-1" style="border-radius:5px;padding:10px;">
                    <h4 class="h4 text-white-heavy my-0" style="padding-bottom:5px;border-bottom:1px solid #ccc;">
                        Proceed to
                        withdraw total earnings of amount</h4>
                    <span class="withdrawal-helper-text">Enter amount below in USD (Max: $<b>{{ $client_total_earnings}}</b>, Min: $<b>{{ $withdrawable_threshold }}</b> )</span>
                    <div class="custom-input-container">
                        <input type="number" id="withdrawal-amount-input" name="requested_withdrawal_amount"
                            min="{{$withdrawable_threshold}}" max="{{$client_total_earnings}}" min="{{$withdrawable_threshold}}" step="0.01" placeholder="1" required />
                    </div>
                    <div class="row rev-flex-container-xl"
                        style="margin-left:0px !important;margin-right:0px !important;">
                        <div class="col-lg-9 lf-rev-row">
                        </div>
                        <div class="col-12 lf-rev-row-two"
                            style="margin-bottom:10px;">
                            <h5 class="h5" style="width:100%;">Your preferred withdrawal method</h5>

                            @isset($preferred_withdrawal_method)
                          
                                <div style="width:100%;margin:10px 0;">
                                    <button class="btn btn-lg btn-warning" style="outline:none;margin:10px 0;"> <i
                                            class="fa fa-money"></i>
                                        @if($preferred_withdrawal_method == 'paypal')
                                            @php $preferred_withdrawal_method = 'Paypal'; @endphp
                                        @elseif($preferred_withdrawal_method == 'bankers-cheque')
                                            @php $preferred_withdrawal_method = "Banker's Cheque"; @endphp
                                        @elseif($preferred_withdrawal_method == 'bank-transfer')
                                            @php $preferred_withdrawal_method = "Bank Transfer"; @endphp
                                        @elseif($preferred_withdrawal_method == 'mobile-money')
                                            @php $preferred_withdrawal_method = "Mobile Money"; @endphp
                                        @endif
                                        {{ $preferred_withdrawal_method }} </button>

                                    <a style="margin:10px 0;" href="{{ Route('admin.clients-payment-methods.preferred.set-or-update')}}">
                                        <button type="button" class="btn btn-sm btn-info" style="border-radius:20px;outline:none;"> <i
                                                class="fa fa-pencil"></i> Change Withdrawal Method
                                        </button>
                                    </a>
                                </div>
                                <div style="width:100%;">

                                        <button type="submit" class="btn btn-lg btn-dark" style="border-radius:20px;outline:none;background-color:#F0F0F0;color:#3C8DBC;"> <i
                                                class="fa fa-money"></i> Submit Request
                                        </button>
                                </div>
                            @else
                            <a href="{{Route('admin.clients-payment-methods.preferred.set-or-update')}}" type="button" class="btn btn-md btn-success"
                                            style="background-color:orange;border-radius:30px;padding:10px;border:none;outline:none;">
                                                <p style="display:inline-flex;align-items:center;padding:0 5px;margin:0;"><i
                                                class="fa fa-gear" style="margin:0 3px;"></i>  Setup your preferred payment method here </p></a>
                                
                            @endisset
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </form>
        <div class="col-sm-8">
            @if ($errors->any())
                <div>
                    @foreach ($errors->all() as $error)
                        <li class="alert alert-danger" style="padding:10px !important;">{{ $error }}</li>
                    @endforeach
                </div>
            @endif
            @if(\Session::has('error'))
                <div>
                    <li class="alert alert-danger" style="padding:10px !important;">{!! \Session::get('error') !!}</li>
                </div>
            @endif
            @if(\Session::has('success'))
                <div>
                    <li class="alert alert-success" style="padding:10px !important;">{!! \Session::get('success') !!}</li>
                </div>
            @endif
        </div>
</section>
<!-- /.content -->
@endsection

@section('custom-scripts')
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
@endsection

<script>
    // document.getElementById('withdrawal-amount-input').addEventListener('input', function () {
    //     const min = parseFloat(this.min);
    //     const max = parseFloat(this.max);
    //     const value = parseFloat(this.value);

    //     if (value < min || value > max) {
    //         this.setCustomValidity('Please enter a value between ' + min + ' and ' + max + '.');
    //     } else {
    //         this.setCustomValidity('');
    //     }
    // });
</script>