@extends($activeTemplate.'layouts.master')
@section('content')
@if($isHoliday)
<script>
    "use strict"
    function createCountDown(elementId, sec) {
        var tms = sec;
        var x = setInterval(function () {
            var distance = tms * 1000;
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
            var days = `<span>${days}d</span>`;
            var hours = `<span>${hours}h</span>`;
            var minutes = `<span>${minutes}m</span>`;
            var seconds = `<span>${seconds}s</span>`;
            document.getElementById(elementId).innerHTML = days +' '+ hours + " " + minutes + " " + seconds;
            if (distance < 0) {
                clearInterval(x);
                document.getElementById(elementId).innerHTML = "COMPLETE";
            }
            tms--;
        }, 1000);
    }
</script>

@push('style')
    <style>
        .counter-area span {
            font-size: 45px;
            font-weight: bold;
            margin: 0px 7px;
            font-family: 'Lora', serif;
        }
    </style>
@endpush

@endif

<div class="card-balance bg-primary row">
                <div class="col" style="padding: 0px;">
                    <h4 style="font-family: 'Roboto', sans-serif; font-size: 30px; color: #FFFFFF; margin-bottom: 0px;">{{ $general->cur_sym }}{{ showAmount(auth()->user()->deposit_wallet) }}</h4>
                    <span style="color: #FFFFFF; font-weight: 700; font-size: 14px;">Available balance</span>
                </div>
                <div class="col" style="padding: 0px; text-align: right;">
                    <span style="color: #FFFFFF; font-weight: 700; font-size: 14px;">Account type</span>
                    <h4 style="font-family: 'Roboto', sans-serif; font-size: 30px; color: #FFFFFF; margin-bottom: 0px; text-transform: capitalize;">investment</h4>
                </div>
            </div>

            <div style="padding: 20px 20px;">
               

                <div class="d-flex justify-content-between">
                <h4 class="title" style="margin-left: 0px;">Withdraw from your investment account</h4>
                <span>
                    <a href="{{ route('user.withdraw.history') }}" style="margin-left: 0px;" class="btn btn-primary btn--smd">@lang('Withdraw History') <i class="las la-long-arrow-alt-right"></i></a>
                </span>
            </div>

            </div>


            @if($isHoliday && !$general->holiday_withdraw)
            <div class="text-center counter-area mt-5">
                <h3 class="text--base">@lang('Next Working Day')</h3>
                <div id="counter"></div>
                <script>createCountDown('counter', {{\Carbon\Carbon::parse($nextWorkingDay)->diffInSeconds()}});</script>
            </div>
            @else
            <div class="transfer">
            <div class="alert alert-primary mb-2">
                    <strong><i class="uil uil-lightbulb-alt"></i> Info</strong> 
                    Withdraw funds from your investment account to any cryptocurrency wallet of your choice, for other means of withdrawal kindly contact support.
                </div>
                    <form action="{{route('user.withdraw.money')}}" method="post">
                        @csrf
                        <div class="form-group">
                            <label class="form-label">@lang('Amount to withdraw')</label>
                            <div class="input-group">
                                <input type="number" step="any" name="amount" placeholder="Amount to withdraw" value="{{ old('amount') }}" class="form-control form--control" required>
                                <span class="input-group-text">{{ $general->cur_text }}</span>
                            </div>
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label">@lang('Token name')</label>
                            <select class="form-control form--control form-select" name="method_code" required>
                                <option value="">@lang('Token name')</option>
                                @foreach($withdrawMethod as $data)
                                    <option value="{{ $data->id }}" data-resource="{{$data}}">  {{__($data->name)}}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="mt-3 preview-details d-none">
                            <ul class="list-group text-center">
                                <li class="list-group-item d-flex justify-content-between">
                                    <span>@lang('Limit')</span>
                                    <span><span class="min fw-bold">0</span> {{__($general->cur_text)}} - <span class="max fw-bold">0</span> {{__($general->cur_text)}}</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between">
                                    <span>@lang('Charge')</span>
                                    <span><span class="charge fw-bold">0</span> {{__($general->cur_text)}}</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between">
                                    <span>@lang('Receivable')</span> <span><span class="receivable fw-bold"> 0</span> {{__($general->cur_text)}} </span>
                                </li>
                                <li class="list-group-item d-none justify-content-between rate-element">

                                </li>
                                <li class="list-group-item d-none justify-content-between in-site-cur">
                                    <span>@lang('In') <span class="base-currency"></span></span>
                                    <strong class="final_amo">0</strong>
                                </li>
                            </ul>
                        </div>

                        <div class="alert alert-info mt-4">
                        <strong><i class="uil uil-lightbulb-alt"></i>Tip </strong> After placing a withdrawal, kindly wait for confirmation which takes less than 24hrs and funds will arrive in your wallet.
                    </div>

                        <button type="submit" class="btn btn-primary w-100 mt-3">@lang('Next')</button>
                    </form>
             
            </div>
            @endif

@endsection

@push('script')
<script>
    (function ($) {
        "use strict";
        $('select[name=method_code]').change(function(){
            if(!$('select[name=method_code]').val()){
                $('.preview-details').addClass('d-none');
                return false;
            }
            var resource = $('select[name=method_code] option:selected').data('resource');
            var fixed_charge = parseFloat(resource.fixed_charge);
            var percent_charge = parseFloat(resource.percent_charge);
            var rate = parseFloat(resource.rate)
            var toFixedDigit = 2;
            $('.min').text(parseFloat(resource.min_limit).toFixed(2));
            $('.max').text(parseFloat(resource.max_limit).toFixed(2));
            var amount = parseFloat($('input[name=amount]').val());
            if (!amount) {
                amount = 0;
            }
            if(amount <= 0){
                $('.preview-details').addClass('d-none');
                return false;
            }
            $('.preview-details').removeClass('d-none');

            var charge = parseFloat(fixed_charge + (amount * percent_charge / 100)).toFixed(2);
            $('.charge').text(charge);
            if (resource.currency != '{{ $general->cur_text }}') {
                var rateElement = `<span>@lang('Conversion Rate')</span> <span class="fw-bold">1 {{__($general->cur_text)}} = <span class="rate">${rate}</span>  <span class="base-currency">${resource.currency}</span></span>`;
                $('.rate-element').html(rateElement);
                $('.rate-element').removeClass('d-none');
                $('.in-site-cur').removeClass('d-none');
                $('.rate-element').addClass('d-flex');
                $('.in-site-cur').addClass('d-flex');
            }else{
                $('.rate-element').html('')
                $('.rate-element').addClass('d-none');
                $('.in-site-cur').addClass('d-none');
                $('.rate-element').removeClass('d-flex');
                $('.in-site-cur').removeClass('d-flex');
            }
            var receivable = parseFloat((parseFloat(amount) - parseFloat(charge))).toFixed(2);
            $('.receivable').text(receivable);
            var final_amo = parseFloat(parseFloat(receivable)*rate).toFixed(toFixedDigit);
            $('.final_amo').text(final_amo);
            $('.base-currency').text(resource.currency);
            $('.method_currency').text(resource.currency);
            $('input[name=amount]').on('input');
        });
        $('input[name=amount]').on('input',function(){
            var data = $('select[name=method_code]').change();
            $('.amount').text(parseFloat($(this).val()).toFixed(2));
        });
    })(jQuery);
</script>
@endpush


@push('style')


<style>
        .row{
            margin: 0px;
            padding: 0px;
        }
        .light .main-container{
            height: 100vh;
            background: #F0F0F0;
            padding: 20px;
        }
        .light .sidebar{
            width: 200px;
            position: absolute;
        }
        .light .nav-logo{
            
        }
        .light .sidebar ul{
            list-style-type: none;
            padding: 0px;
            padding-top: 6px;
            margin: 0px;
        }
        .light .sidebar ul li{
            font-size: 16px;
            padding: 10px 10px;
            margin: 0px 0px;
            margin-left: 15px;
            margin-right: 15px;
            border-bottom: 2px solid transparent;
        }
        .light .sidebar ul li a{
            text-decoration: none;
            font-size: 16px;
            color: #000000;
        }
        .light .sidebar ul li i{
            margin-left: 20px;
            margin-right: 10px;
            font-size: 22px;
        }
        .light .sidebar ul li:hover{
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            box-shadow:
            0  5px 10px rgba(154,160,185,0.05),
            0 15px 40px rgba(166,173,201,0.2);
            cursor: pointer;
        }
        .light .sidebar ul li.active{
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            
            border-bottom:;
            box-shadow:
            0  5px 10px rgba(154,160,185,0.05),
            0 15px 40px rgba(166,173,201,0.2);
        }
        .light .sidebar ul li.active i{
            color: #EC2244;
        }
        .light .input-group-text{
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            background: #FFFFFF;
            border-right: 0px;
            box-shadow:
            0  5px 10px rgba(154,160,185,0.05),
            0 15px 40px rgba(166,173,201,0.2);
        }
        .light .form-control{
            font-family: 'Open Sans', sans-serif;
            border-radius: 20px;
            background: #FFFFFF;
            border-left: 0px;
            box-shadow:
            0  5px 10px rgba(154,160,185,0.05),
            0 15px 40px rgba(166,173,201,0.2);
        }
        .light .page-body{
            background: #F8F8F8;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            box-shadow:
            0  5px 10px rgba(154,160,185,0.05),
            0 15px 40px rgba(166,173,201,0.2);
            padding: 20% 0px;
            padding-top: 20px;      
            padding-bottom: 12%; 
            
            width: 82%;
            margin-left: 200px;
            margin-top: 9px;
            
        }
        .light .top-bar .nav-btns{
            
        }
        .light .top-bar .nav-btns .btn{
            background: ;
            border-radius: 50%;
            font-size: 20px;
            padding: 11px 12px;
        }
        .light .fund-btn{
            background: #EC2244;
            color: #FFFFFF;
            font-size: ;
            padding: 10px 22px;
        }
        .light .btn.top-up{
            background: #EC2244;
            color: #FFFFFF;
            font-size: 14px;
            padding: 8px 40px;
        }
        .light .btn.top-up:hover{
            background: #011A41;
        }
        .light .welcome{
            border-radius: 8px;
            background: #EC2244;
            padding: 25px 15px;
            margin: 0px 20px;

        }
        .light .welcome img{
            border-radius: 50%;
            width: 100px;
        }
        .light .balance-holder{
            padding: 10px;
            
        }
        .light .balance-holder h4{
            font-family: 'Roboto', sans-serif;
            font-weight: 700;
            font-size: 20px;
            margin: 20px 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            color: #303030;
        }
        .light .balance{
            padding: 10px;

        }
        .light .balance .item{
            border-radius: 8px;
            background: #FFFFFF;
            padding: 40px;
            box-shadow:
            0  5px 10px rgba(154,160,185,0.05),
            0 15px 40px rgba(166,173,201,0.2);
        }
        .light .balance .item .one{
            padding: 20px;
        }
        .light .long-chart{
            height: 400px;
            margin: 20px;
            border-radius: 8px;
            box-shadow:
            0  5px 10px rgba(154,160,185,0.05),
            0 15px 40px rgba(166,173,201,0.2);
            background: #FFFFFF;
        }
        .light h4.title{
            font-family: 'Roboto', sans-serif;
            font-weight: 700;
            font-size: 20px;
            margin: 20px 10px;
            margin-left: 10px;
            color: #303030;
        }
        .refer{
            background: linear-gradient(to right, #ee0979, #ff6a00);
            border-radius: 8px;
            box-shadow:
            0  5px 10px rgba(154,160,185,0.05),
            0 15px 40px rgba(166,173,201,0.2);
            padding: 20px;
            margin: 10px 20px;
        }
        .refer h4{
            font-family: 'Roboto', sans-serif;
            font-weight: 700;
            color: #FFFFFF;
        }
        .refer p{
            color: #FFFFFF;
            font-family: 'Roboto', sans-serif;
            font-weight: 400;
        }
        .refer .form-control{
            font-family: 'Roboto', sans-serif;
            font-weight: 400;
            background: #FFFFFF;
            padding: 25px 10px;
            font-size: 16px;
        }
        .refer .form-control:focus{
            border: 1px solid transparent;
        }
        .refer .btn{
            background: #FFFFFF;
            border-radius: 8px 8px 8px 8px;
            color: #FFFFFF;
            font-weight: 600;
            font-size: 14px;
            padding: 6px;
        }
        .refer .btn:hover{
            color: #FFFFFF;
        }
        .refer .btn:focus{
            box-shadow: none;
        }
        .navibar2 {
            display: none;
        }
        @media screen and (max-width: 1200px) {
            .navibar {
                display: none;
            }
            .navibar2 {
                display: flex;
            }
            .light .page-body{
                width: 100%;
                margin-left: 0px;
            }
        }
        .sidenav {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 20;
            top: 0;
            left: 0;
            box-shadow:
            0  5px 10px rgba(154,160,185,0.05),
            0 15px 40px rgba(166,173,201,0.2);
            background-color: #FFFFFF;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 30px;
        }
        .sidenav .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }
        .light .sidenav img{
            padding-left: 20px;
            width: 200px;
        }
        .light .sidenav ul{
            list-style-type: none;
            padding: 0px;
            padding-top: 6px;
            margin: 0px;
        }
        .light .sidenav ul li{
            font-size: 16px;
            padding: 10px 10px;
            margin: 0px 0px;
            margin-left: 15px;
            margin-right: 15px;
            border-bottom: 2px solid transparent;
        }
        .light .sidenav ul li a{
            text-decoration: none;
            font-size: 16px;
            color: #000000;
        }
        .light .sidenav ul li i{
            margin-left: 20px;
            margin-right: 10px;
            font-size: 22px;
        }
        .light .sidenav ul li:hover{
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            box-shadow:
            0  5px 10px rgba(154,160,185,0.05),
            0 15px 40px rgba(166,173,201,0.2);
            cursor: pointer;
        }
        .light .sidenav ul li.active{
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            
            border-bottom:;
            box-shadow:
            0  5px 10px rgba(154,160,185,0.05),
            0 15px 40px rgba(166,173,201,0.2);
        }
        .light .sidenav ul li.active i{
            color: #EC2244;
        }

        #main {
            transition: margin-left .5s;
            padding: 16px;
        }

        @media screen and (max-height: 450px) {
            .sidenav {padding-top: 15px;}
            .sidenav a {font-size: 18px;}
        }

        .light .cc-holder{
            padding: 5%;
            overflow-y: scroll;
            display: flex;
            justify-content: center;
        }
        .light .cc-card{
            width: 300px;
            background-image: url("../../images/card-bg2.jpg");
            background-image: 
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)),
            url('../../images/card-bg2.jpg');
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            box-shadow:
            0  5px 10px rgba(154,160,185,0.05),
            0 15px 40px rgba(166,173,201,0.2);
            padding: 20px 30px;
            border-radius: 20px;
        }
        .light .cc-card .text{
            font-size: 15px;
            color: #FFFFFF;
            text-shadow: 1px 1px 2px black;
        }

        .light .card-details{
            background: #FFFFFF;
            padding: 20px 15px;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        }
        .light .card-balance{
            background: #EC2244;
            padding: 20px;
            margin: 0px 15px;
            border-radius: 8px;
            box-shadow:
            0  5px 10px rgba(154,160,185,0.05),
            0 15px 40px rgba(166,173,201,0.2);
        }
        .alert{
            font-family: 'Roboto', sans-serif; 
            font-size: 14px;
        }
        .light .error{
            font-weight: 500;
            padding-top: 10px;
            font-size: 14px;
            color: #C73E1D
        }
        .transfer{
            background: #FFFFFF;
            padding: 20px;
            margin: 16px;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            box-shadow:
            0  5px 10px rgba(154,160,185,0.05),
            0 15px 40px rgba(166,173,201,0.2);
        }
        .light .input-group-text{
            font-size: 17px;
            border-radius: 0px;
            border: none;
            background: #F1F5FB;
            color: #EC2244;
        }
        .light .form-control{
            font-family: 'Open Sans', sans-serif;
            border-radius: 0px;
            border: none;
            background: #F1F5FB;
        }
        .light .form-control:focus{
            box-shadow: none;
            background: #F1F5FB;
            color: #000000;
        }
        .light .transfer .text h4{
            font-family: 'Roboto', sans-serif; 
            font-size: 24px;
            text-align: center;
            margin-top:20px;
        }
        .light .transfer .text p{
            font-family: 'Roboto', sans-serif; 
            font-size: 14px;
            text-align: center;
            margin-top: 0px;
        }
        .light h4.title{
            font-family: 'Roboto', sans-serif;
            font-weight: 700;
            font-size: 20px;
            margin: 20px 10px;
            margin-left: 20px;
            color: #303030;
        }
        .light p.title{
            font-family: 'Roboto', sans-serif;
            font-weight: 400;
            font-size: 16px;
            margin: 0px 0px;
            margin-left: 0px;
            color: #303030;
        }
    </style>

@endpush