@extends('admin.layouts.master')

@section('title')
    Cash Advance Payment
@stop

@section('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" type="text/css" href="{{asset('/css/jsteps/normalize.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('/css/jsteps/jquery.steps.css')}}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />

    <style>
        .select2{
                width: 100% !important;
            }
        .select2-container, .select2-dropdown, .select2-search, .select2-results {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -ms-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
        }
    </style>

@stop

@section('content')
<div class="content-wrapper" >
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                <span class="fa fa-user-plus"></span> New Payment
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-user-plus"></i> Admin Panel</a></li>
                <li class="active">New Payment</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content" style=" padding-bottom: 10%;">
            <div class="page-header">
                <a href="{{route('advances.payments')}}" class="btn btn-primary"><i class="fa fa-backward"></i> Back</a>
            </div>
            <form id="frmPayment" method="post" action="{{route('advances.payment.new')}}">
                <input type="hidden" name="manager_id" id="manager_id" class="form-control" value="" readonly>
                <div class="col-md-6">
                    <div class="form-group has-feedback @if($errors->has('pay_date')) has-error @endif">
                        <label for="pay_date" class="control-label">Payment Date:</label>
                        <div class='input-group date datetimepicker1' id='datetimepicker1' required>
                            <input type='text' class="form-control" id="pay_date" name="pay_date"  />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                        @if($errors->has('pay_date')) <span class="help-block">{{$errors->first('pay_date')}}</span> @endif
                    </div>

                    <div class="form-group has-feedback @if($errors->has('amount')) has-error @endif">
                        <label for="amount" class="control-label">Payment Amount</label>
                        <input type="text" name="amount" id="amount" class="form-control" value="0.00" style="text-align: right;" required>
                        <span class="fa fa-barcode form-control-feedback"></span>
                        @if($errors->has('amount')) <span class="help-block">{{$errors->first('amount')}}</span> @endif
                    </div>

                    <div class="form-group has-feedback @if($errors->has('balance')) has-error @endif">
                        <label for="balance" class="control-label">Balance Amount</label>
                        <input type="text" name="balance" id="balance" class="form-control" value="0.00" readonly style="text-align: right;">
                        <span class="fa fa-barcode form-control-feedback"></span>
                        @if($errors->has('balance')) <span class="help-block">{{$errors->first('balance')}}</span> @endif
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group has-feedback @if($errors->has('agents')) has-error @endif">
                        <label for="agents" class="control-label">Agent</label>
                        <select name="agents" id="agents" class="form-control" required>
                            <option value="">Select Agent /Manager</option>
                            @foreach($agents as $agent)
                                <option value="{{$agent->agent_id}}">{{$agent->fullname}}</option>
                            @endforeach
                        </select>
                        @if($errors->has('agents')) <span class="help-block">{{$errors->first('agents')}}</span> @endif
                    </div>

                    <div class="form-group has-feedback @if($errors->has('remarks')) has-error @endif">
                        <label for="remarks" class="control-label">Remarks</label>
                        <textarea class="form-control txt" rows="8" name="remarks" id="remarks" placeholder="" required></textarea>
                        @if($errors->has('remarks')) <span class="help-block">{{$errors->first('remarks')}}</span> @endif
                    </div>

                </div>

                <div class="form-group" style="padding: 10px;">
                    <button type="submit" id="btnSubmit" name="btnSubmit" class="btn btn-success btn-s"><i class="fa fa-floppy-o" aria-hidden="true"></i> Save Payment</button>
                </div>
                {{csrf_field()}}
            </form>

        </section>
        @if(Session('info'))
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                    <div class="tem alert alert-success navbar-fixed-bottom"><span class="glyphicon glyphicon-ok-circle"></span> {{Session('info')}}</div>
                </div>
            </div>
        @endif
</div>
@stop

@section('script')

    {{--<script type="text/javascript" src="{{ asset('js/invoice.js') }}" ></script>--}}
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
    <script type="text/javascript" src="{{ asset('js/numeric/jquery.masknumber.js') }}" ></script>

<script>
    $(document).ready(function () {

        //$('#agents').select2();

        $('#datetimepicker1').datetimepicker({
             format: 'MM/DD/YYYY',
             defaultDate: new Date()
        });

        $('.datetimepicker1').datetimepicker({
            format: 'MM/DD/YYYY',
            defaultDate: new Date()
        });

        $('#amount').maskNumber();
        $('#balance').maskNumber();

        /*select2:select*/
        $('#agents').on('change', function (e) {
            var agent_id    = $('#agents option:selected').val();
            var manager_id  = $('#manager_id').val();

            console.log(agent_id);
            console.log(manager_id);
            //alert(agent);
            $.ajax({
            url:"{{route('advances.payment.get-agent-data')}}",
            method: 'get',
            headers:  {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data:{
                'agent_id':agent_id,
                'manager_id':manager_id
            },
            dataType:'json',
            success:function(data){
                $('#amount').val('');
                console.log(data.agents);
                console.log(data.balance);
                var bal = ReplaceNumberWithCommas(data.balance);
                $('#balance').val(bal);
                $.each(data.agents, function (i,item) {
                    var ln = item.manager_id;
                    $('#manager_id').val(ln);
                });

                if (bal == 0) {
                    $('#btnSubmit').attr("disabled", true);
                } else {
                    $('#btnSubmit').attr("disabled", false);
                }
                /*$.each(data.balance, function (i,item) {
                    var bal = item.manager_id;
                    $('#manager_id').val(ln);
                });*/
            },
            error: function (jqXHR, exception) {
                console.log(jqXHR);
                }
            });
        });
    });

    $('#amount').on('blur', function (e) {
        var bal2 = $('#balance').val();
        var amt2 = $('#amount').val();

        var amt  = amt2.replace(",", "");
        var ball  = bal2.replace(",", "");

        /*if (amt > ball) {  //|| amt == '' || amt <= 0) {
            //alert('not allowed...');
            console.log('not allowed');
            console.log(amt);
            console.log(ball);
            //$('#amount').val(bal2);
            $('#btnSubmit').attr("disabled", true);
        } else {
            console.log('ready');
            $('#btnSubmit').attr("disabled", false);
            //alert('readyyy...');
        }*/
    });

    $('#btnSubmit').on('click', function (e) {
        e.preventDefault();
        var bal2 = $('#balance').val();
        var amt2 = $('#amount').val();
        var rem  = $('#remarks').val();

        var amt  = amt2.replace(",", "");
        var ball = bal2.replace(",", "");

        if (amt == 0 || amt == '' || rem=='') {
            alert('Fill-in required fields.');
        }

        if (parseInt(amt) > parseInt(ball)) {  //|| amt == '' || amt <= 0) {
            //alert('not allowed...');
            console.log('not allowed');
            console.log(amt);
            console.log(ball);
            //$('#amount').val(bal2);
            //$('#btnSubmit').attr("disabled", true);
            alert('Amount exceeds with the maximum balance.\nPlease input lower amount.');
            //return false;
        } else {
            console.log('ready');
            //$('#btnSubmit').attr("disabled", false);
            //$(this).parents('form').submit();
            $('#frmPayment')[0].submit();
            //alert('readyyy...');
        }
    });

    function ReplaceNumberWithCommas(yourNumber) {
        //Seperates the components of the number
        var n= yourNumber.toString().split(".");
        //Comma-fies the first part
        n[0] = n[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        //Combines the two sections
        return n.join(".");
    }

</script>

@stop