@extends('admin.layouts.master')

@section('title')
    C/A 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> Edit C/A Payment
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-user-plus"></i> Admin Panel</a></li>
                <li class="active">Edit C/A Payment</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content" style=" padding-bottom: 1%;">
            <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.update')}}">
                <input type='hidden' class="form-control" id="id_" name="id_" value="{{$adv->id}}" readonly/>
                 <input type="hidden" name="manager_id" id="manager_id" class="form-control" value="{{$adv->manager_id}}" 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">Date Applied:</label>
                        <div class="input-group date datetimepicker1" id="datetimepicker1">
                            <input type='text' class="form-control" id="pay_date" name="pay_date" value="{{date("m/d/Y", strtotime($adv->payment_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">Cash Amount</label>
                        <input type="text" name="amount" id="amount" class="form-control" value="{{ number_format((float) $adv->amount, 2)}}" style="text-align: right;">
                        <span class="glyphicon glyphicon-book 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">
                            {{--<option value="">Select Agent</option>--}}
                            @foreach($agents as $agent)
                               @if($adv->agent_id == $agent->agent_id)
                                    <option value="{{$agent->agent_id}}" selected="selected">{{$agent->fullname}}</option>
                               {{--@else
                                    <option value="{{$agent->agent_id}}"> {{$agent->fullname}} </option>--}}
                               @endif
                            @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="">{{$adv->remarks}}</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> Update 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 () {

        var agent_id    = $('#agents option:selected').val();
        var manager_id  = $('#manager_id').val();

        load_data(agent_id,manager_id);

        //$('#agents').select2();
        //$('#agents').attr("disabled", true);

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

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

        $('#agents').on('select2:select', function (e) {
            console.log(agent_id);
            //alert(agent);
            //load_data(agent_id,manager_id);
        });

        /*keyup keydown change*/
        $('#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>

<script>
    function load_data(agent_id,manager_id) {
        $.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);
            }
        },
        error: function (jqXHR, exception) {
            console.log(jqXHR);
            }
        });
    }
</script>

@stop