@extends('layouts.master')

@section('content')
<div class="container">
	<div class="card card-custom gutter-b">
		<div class="card-header flex-wrap py-3">
			<div class="card-title">
				<h3 class="card-label">Withdrawal</h3>
			</div>
			<div class="card-toolbar">
				<!--begin::Button-->
				<button type="button" class="btn btn-primary save-config-cashout">
				    Save Withdrawal
				</button>
				<!--end::Button-->
			</div>
		</div>
		<div class="card-body">
            <form>
                @csrf
                <div class="form-group">
                    <label>Type of cashout charge<span class="text-danger">*</span></label>
                    <div class="radio-inline">
                        <label class="radio radio-rounded">
                        <input type="radio" name="type_cashout" id="type_cashout_1" value="1"/>
                        <span></span>Fixed</label>
                        <label class="radio radio-rounded">
                        <input type="radio" name="type_cashout" id="type_cashout_2" value="2"/>
                        <span></span>Percent</label>
                    </div>
                </div>
                <div class="form-group" id="isFixed" style="display: none">
                    <label>Rate (RM)<span class="text-danger">*</span></label>
                    <input type="number" step='0.01' min="0.00" class="form-control" name="rate" id="rate_fixed" placeholder="Enter rate (RM)" />
                </div>
                <div class="form-group" id="isPercent" style="display: none">
                    <label>Rate (%)<span class="text-danger">*</span></label>
                    <input type="number" step='0.01' min="0.00" max="100" class="form-control" name="rate" id="rate_percent" placeholder="Enter rate (%)" />
                </div>
            </form>
        </div>
	</div>
</div>

@endsection
@push('script')
<script type="text/javascript">
    $(document).ready(function() {

        var url = "{{ route('configure.cashout.data') }}";

        $.ajax({
            url: url,
            type: "GET",
            dataType: "json",
            success: function(data) 
            {
                let item = data.data;

                if(item.type == 1)
                {
                    document.getElementById("type_cashout_1").checked = true;
                    $('#isFixed').show();
                    $('#rate_fixed').val(parseFloat(item.value).toFixed(2));
                    $('#isPercent').hide();
                }
                else
                {
                    document.getElementById("type_cashout_2").checked = true;
                    $('#isFixed').hide();
                    $('#isPercent').show();
                    $('#rate_percent').val(parseFloat(item.value).toFixed(2));
                }
            }
        });

        $('.save-config-cashout').on('click', function () {
            addConfigCommission();
        });

        $('input[name="type_cashout"]').on('change', function(){
            var val = $(this).val();

            if(val == 1)
            {
                $('#isFixed').show();
                $('#isPercent').hide();
            }
            else
            {
                $('#isFixed').hide();
                $('#isPercent').show();
            }
        });
            
    });

    function addConfigCommission()
    {
        var type    = $('input[name="type_cashout"]:checked').val();
        if(type == 1)
            var value = $('#rate_fixed').val();
        else
            var value = $('#rate_percent').val();
     	var _token 	= $("input[name='_token']").val();
        var url 	= "{{ route('configure.cashout.store') }}";

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: {
                type   : type,
                value  : value,
                _token : _token
            },
            success: function(data) {
                if(data.status != 'success'){
                    var errors = data;
                    $.each(errors, function(index, sm){
                        toastr.error(sm, {timeOut: 5000});
                    });
                } else{
                	Swal.fire({
					  	title: "Success!",
					  	text: "Successfully Update Withdrawal!",
					  	icon: "success",
					  	buttonsStyling: false,
					  	showConfirmButton: false,
        				timer: 3000
					 });
                }
            }
        });
    }
</script>
@endpush