@extends('layouts.admin.admin-app')
@section('title','Employee Payment View')
@section('content') 
<div class="main-content adduser_page pay-now-page">
    <div class="content_wrapper">
        <div class="content_header">
            <div class="page_title">
                <h2 class="d-inline-block pr-3 mr-3 border-right">Pay</h2>
                <nav aria-label="breadcrumb" class="d-inline-block">
                    <ol class="breadcrumb p-0 mb-0">
                        <li class="breadcrumb-item"><a href="{{url('/admin/employee-payment')}}">Employee Payment</a>
                        </li>
                        <li class="breadcrumb-item"><a href="{{url('/admin/view-employee-payment/'.$employee_id)}}">Employee Payment View</a>
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
        <div class="content">
            <div class="add_form mx-auto">
                <div class="card">
                    <div class="card-header">Pay</div> 
                    <div class="card-body position-relative">
                        <div class="pay-loader" id="hddnDivLoader" style="display:none">
                            <div class="d-flex align-items-center justify-content-center w-100 h-100">
                                <i class="btn_loader"></i>
                            </div>
                        </div>
                        <form id="frmPayNow" method="POST" action="{{url('/admin/submit-subadmin')}}">
                            {{csrf_field()}}
                            <div class="row">
                                <div class="col-sm-12">
                                    <h4 class="sub-hading mt-0">Select Duration</h4>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label">From Date</label>
                                        <div class="dateIcon">
                                            <input type="text" id="fromDate" readonly name="from_date" class="form-control datetimepicker-input" data-target="#fromDate" data-toggle="datetimepicker" placeholder="From Date">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label">To Date</label>
                                        <div class="dateIcon">
                                            <input type="text" readonly disabled="disabled" id="toDate" name="to_date" class="form-control datetimepicker-input" data-target="#toDate" data-toggle="datetimepicker"  placeholder="To Date">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Total Earning</label>
                                        <input type="text" id="totalEarning" readonly class="form-control" name="total_earning" placeholder="Total Earning">
                                        <input type="text" hidden class="form-control" value="{{$employee_id}}" name="employee_id">
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form-group action text-right mb-0">
                                        <button class="btn btn-warning ripple-effect" id="btnPayNow" type="submit" >Pay 

                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        {!! JsValidator::formRequest('App\Http\Requests\PaymentRequest','#frmPayNow') !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $("#btnPayNow").on('click', (function (e) {
            var frm = $('#frmPayNow');
            var btn = $('#btnPayNow');
            e.preventDefault();
            if (frm.valid()) {
                btn.html('Pay {{buttonLoader()}}');
                btn.prop('disabled', true);
                $.ajax({
                    url: "{{url('/admin/payment-transfer')}}",
                    type: "POST",
                    data: frm.serialize(),
                    success: function (data)
                    {
                        btn.prop('disabled', false);
                        btn.html('Pay');
                        $('#frmPayNow')[0].reset();
                        if (data.status) {
                            successToaster(data.message, 'Payment Transfer');
                        } else {
                            errorToaster(data.error, 'Payment Transfer');
                        }
                        // window.location.href = "{{url('/admin/subadmin')}}";
                    },
                    error: function (data) {
                        errorToaster(data.error, 'Payment Transfer');
                    },
                });
            }
        }));

        $(function () {
            if ($('#fromDate').length > 0) {
                $('#fromDate').datetimepicker({
                    format: '{{getDatePickerForamt()}}',
                    useCurrent: false,
                    ignoreReadonly: true,
                    maxDate: new Date(Date.now() + 1 * 24 * 60 * 60 * 1000),
                    minDate: '1990-01-01'
                });
                $('#toDate').datetimepicker({
                    format: '{{getDatePickerForamt()}}',
                    useCurrent: false,
                    ignoreReadonly: true,
                    maxDate: new Date(Date.now() + 1 * 24 * 60 * 60 * 1000),
                    minDate: '1990-01-01'
                });
                $("#fromDate").on("change.datetimepicker", function (e) {
                    $('#toDate').datetimepicker('minDate', e.date);
                    $('#toDate').attr('disabled', false);
                    $('#toDate').val('');
                    $('#totalEarning').val('');
                });
                $("#toDate").on("change.datetimepicker", function (e) {
                    $('#fromDate').datetimepicker('maxDate', e.date);
                    getCommissionAmount();
                });
            }
        });

        function getCommissionAmount() {
            var frm = $('#frmPayNow');
            $('#hddnDivLoader').css('display', 'block');
            $("#commission_list").html('{{ajaxLoader()}}');
            $.ajax({
                url: "{{url('/admin/get-commission-amount')}}",
                type: "POST",
                data: frm.serialize(),
                success: function (response)
                {
                    $('#hddnDivLoader').css('display', 'none');
                    if (response.status == true) {
                        $('#totalEarning').val(response.data);
                    }

                },
                error: function (data) {
                    var obj = jQuery.parseJSON(data.responseText);
                    for (var x in obj) {
                        btn.prop('disabled', false);
                        btn.html('Save');
                        var errors = obj[x].length
                        $('#' + x + '-error').html(obj[x]);
                        $('#' + x + '-error').parent('.form-group').removeClass('has-success').addClass('has-error');
                    }
                },
            });
        }
    </script>
    @endsection