@extends('admin.layouts.master')

@section('title')
    Rental
@stop

@section('style')
    {{--<link rel="stylesheet" type="text/css" href="{{asset('/css/jsteps/main.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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.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;
        }
        .wizard > .content
        {
            background: #eee;
            display: block;
            margin: 0.5em;
            min-height: 20em!important; /*50em;*/
            overflow: hidden;
            position: relative;
            width: auto;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
    </style>
@stop

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

        <!-- Main content -->
        <section class="content" style=" padding-bottom: 10%;">
            <div class="page-header">
                <a href="{{route('rentals')}}" class="btn btn-primary"><i class="fa fa-backward"></i> Back</a>
            </div>

            <form id="frmRentals" method="post" action="{{route('rentals.create')}}" role="form">
                {{--{{csrf_field()}}--}}
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <div class="form-group">
                    <h3>Rental Info</h3>
                    <section>
                    <div class="col-md-6">
                        <div class="form-group has-feedback @if($errors->has('contract_date')) has-error @endif">
                            <label for="contract_date" class="control-label">Effectivity of Contract Date:</label>
                            <div class='input-group date datetimepicker1' id='datetimepicker1'>
                                <input type='text' class="form-control" id="contract_date" name="contract_date"  />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                            @if($errors->has('contract_date')) <span class="help-block">{{$errors->first('contract_date')}}</span> @endif
                        </div>

                        <div class="form-group has-feedback @if($errors->has('client_name')) has-error @endif">
                            <label for="client_name" class="control-label">Client Name *:</label>
                            <input type="text" name="client_name" id="client_name" class="form-control">
                            <span class="glyphicon glyphicon-user form-control-feedback"></span>
                            @if($errors->has('client_name')) <span class="help-block">{{$errors->first('client_name')}}</span> @endif
                        </div>

                        <div class="form-group has-feedback @if($errors->has('client_number')) has-error @endif">
                            <label for="client_number" class="control-label">Client Contact No *:</label>
                            <input type="text" name="client_number" id="client_number" class="form-control">
                            <span class="glyphicon glyphicon-phone form-control-feedback"></span>
                            @if($errors->has('client_number')) <span class="help-block">{{$errors->first('client_number')}}</span> @endif
                        </div>

                        <div class="form-group has-feedback @if($errors->has('client_fb')) has-error @endif">
                            <label for="client_fb" class="control-label">Client Facebook *:</label>
                            <input type="text" name="client_fb" id="client_fb" class="form-control">
                            <span class="fa fa-facebook form-control-feedback"></span>
                            @if($errors->has('client_fb')) <span class="help-block">{{$errors->first('client_fb')}}</span> @endif
                        </div>

                        <div class="form-group has-feedback @if($errors->has('client_email')) has-error @endif">
                           <label for="client_email" class="control-label">Client Email *:</label>
                           <input type="text" name="client_email" id="client_email" class="form-control">
                           <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                           @if($errors->has('client_email')) <span class="help-block">{{$errors->first('client_email')}}</span> @endif
                       </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group has-feedback @if($errors->has('address')) has-error @endif">
                            <label for="address" class="control-label">Address:</label>
                            <input type="text" name="address" id="address" class="form-control">
                            <span class="glyphicon form-control-feedback"></span>
                            @if($errors->has('address')) <span class="help-block">{{$errors->first('address')}}</span> @endif
                        </div>
                    </div>

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

                        <div class="form-group has-feedback @if($errors->has('umanager_id')) has-error @endif">
                            <label for="umanager_id" class="control-label">Unit Manager</label>
                            <select name="umanager_id" id="umanager_id" name="umanager_id" class="form-control">
                                <option value="">Select Unit Manager</option>
                                @foreach($ums as $um)
                                    <option value="{{$um->id}}">{{$um->fullname}}</option>
                                @endforeach
                            </select>
                            <span class="fa form-control-feedback"></span>
                            @if($errors->has('umanager_id')) <span class="help-block">{{$errors->first('umanager_id')}}</span> @endif
                        </div>
                    </div>

                    </section>
                    <h3>Rental Details</h3>

                    <section>

                    <div class="col-md-6">
                      <div class="form-group has-feedback @if($errors->has('end_date')) has-error @endif">
                           <label for="end_date" class="control-label">End of Contract Date:</label>
                           <div class='input-group date datetimepicker2' id='datetimepicker2'>
                               <input type='text' class="form-control" id="end_date" name="end_date"  />
                               <span class="input-group-addon">
                                   <span class="glyphicon glyphicon-calendar"></span>
                               </span>
                           </div>
                           @if($errors->has('end_date')) <span class="help-block">{{$errors->first('end_date')}}</span> @endif
                       </div>

                        <div class="form-group has-feedback @if($errors->has('authorized_name')) has-error @endif">
                           <label for="authorized_name" class="control-label">Authorized Name:</label>
                           <input type="text" name="authorized_name" id="authorized_name" class="form-control">
                           <span class="glyphicon glyphicon-user form-control-feedback"></span>
                           @if($errors->has('authorized_name')) <span class="help-block">{{$errors->first('authorized_name')}}</span> @endif
                       </div>

                       <div class="form-group has-feedback @if($errors->has('prop_location')) has-error @endif">
                           <label for="prop_location" class="control-label">Property Location:</label>
                           <input type="text" name="prop_location" id="prop_location" class="form-control">
                           <span class="form-control-feedback"></span>
                           @if($errors->has('prop_location')) <span class="help-block">{{$errors->first('prop_location')}}</span> @endif
                       </div>

                    </div>

                    <div class="col-md-6">
                        <div class="form-group has-feedback @if($errors->has('monthly_rent')) has-error @endif">
                            <label for="monthly_rent" class="control-label">Monthly Rent: </label>
                            <input type="text" name="monthly_rent" id="monthly_rent" class="form-control" value="" style="text-align: right">
                            <span class="glyphicon glyphicon-triangle-right form-control-feedback"></span>
                            @if($errors->has('monthly_rent')) <span class="help-block">{{$errors->first('monthly_rent')}}</span> @endif
                        </div>
                        <div class="form-group has-feedback @if($errors->has('deposit')) has-error @endif">
                            <label for="deposit" class="control-label">Deposit:</label>
                            <input type="text" name="deposit" id="deposit" class="form-control" value="" style="text-align: right">
                            <span class="glyphicon glyphicon-triangle-right form-control-feedback "></span>
                            @if($errors->has('deposit')) <span class="help-block">{{$errors->first('deposit')}}</span> @endif
                        </div>
                        <div class="form-group has-feedback @if($errors->has('advance')) has-error @endif">
                            <label for="advance" class="control-label">Advanced:</label>
                            <input type="text" name="advance" id="advance" class="form-control" value="" style="text-align: right">
                            <span class="glyphicon glyphicon-triangle-right form-control-feedback"></span>
                            @if($errors->has('advance')) <span class="help-block">{{$errors->first('advance')}}</span> @endif
                        </div>
                    </div>
     
                    </section>
                </div>
            </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

        <!--Modal Notif-->
        {{--<div class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" style=" padding-right: 0px;background-color: rgba(4, 4, 4, 0.8);">
          <div class="modal-dialog modal-lg" style="top: 20%;width: 70%;text-align: center;">
            <div class="modal-content" style="border-radius: 0px;border: none;top: 40%;">
              <div class="modal-body" id="modBody" style="background-color: #0f8845;color: white;">
                <h2 id="h22"></h2>
                <h4 id="h44"></h4>
              </div>
            </div>
          </div>
        </div>--}}

    </div>
@stop

@section('script')

    <script type="text/javascript" src="{{ asset('js/numeric/jquery.masknumber.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>
        $(document).ready(function() {
            $('#developer_id').select2();
            $('#project_id').select2();
            $('#agent_id').select2();
            $('#umanager_id').select2();

            $('#total_selling_price').maskNumber();
            $('#net_selling_price').maskNumber();
            $('#equity').maskNumber();
            $('#loanable_amount').maskNumber();
            $('#agent_com_rate').maskNumber();
            $('#um_com_rate').maskNumber();
            $('#broker_com_rate').maskNumber();
            $('#ref_com_rate').maskNumber();

        });

        /*$('input[type=number]').each(function () {
          $(this).change(function () {
            var $replace = $(this).val().toString().replace(/,/g, '.');
            $(this).val($replace);
          })
        });*/

        function notifPopup(title,body) {
            $('#h22').text(title);
            $('#h44').text(body);
            //$('.bs-modal-lg').modal('toggle');
            //setTimeout(function() {$('.bs-modal-lg').modal('hide');}, 5000);
        }
    </script>

    <script>
        var form = $("#frmRentals");
        /*form.validate({
            errorPlacement: function errorPlacement(error, element) { element.before(error); },
            rules: {
                confirm: {
                    equalTo: "#password"
                }
            }
        });*/
        form.children("div").steps({
            headerTag: "h3",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            /*onStepChanging: function (event, currentIndex, newIndex)
            {
                form.validate().settings.ignore = ":disabled,:hidden";
                return form.valid();
            },*/
            /*: function (event, currentIndex)
            {
                form.validate().settings.ignore = ":disabled";
                return form.valid();
            },*/
            onFinished: function (event, currentIndex)
            {
                console.log("ready");
                $("#frmRentals").submit();
                notifPopup('Sales Notification', 'New Sales was successfully created.');
                //$("#frmRentals").submit();
                 //var form = $(this);
                     //form.submit();
            }
        });
    </script>

    <script>

        $(document).ready(function() {
            //$('#project_id option:not(:selected)').prop('disabled', true);
            $('#datetimepicker1').datetimepicker({
                 format: 'MM/DD/YYYY',
                 widgetPositioning: {
                    horizontal: "auto",
                    vertical: "bottom"
                 }
            });
            $('#datetimepicker2').datetimepicker({
                 format: 'MM/DD/YYYY',
                 widgetPositioning: {
                    horizontal: "auto",
                    vertical: "bottom"
                 }
            });
            //$("#agent_id").val(7);
            $("#agent_id option:selected").val(7);
        });

        $('#umanager_id').on('change', function () {
            var agent_id = $('#agent_id option:selected').val();
            var um_id    = $('#umanager_id option:selected').val();
            //alert (agent_id);
            //jQuery("#agent_id option").eq(jQuery(this).find(':selected').index()).prop('selected',true);
            var mgr = $("#umanager_id option:selected").text();
            if($('#agent_id').val()) {
            //if($(this).val()===""){
                //alert (agent_id);
            } else {
                console.log('empty');
                //alert ('no value');
                //$('#agent_id').text('TEST');
                //$("#agent_id").val(um_id);
                //$("#agent_id").val(um_id);
                $("#agent_id option:selected").text(mgr);
                //$('#agent_id option:selected').val(um_id);
            }
        });

        $('#developer_id').on('change', function () {
            var developer_id = $(this).find('option:selected').val();
            //alert(property_id);
            //alert($option.val());
            if(developer_id==''){
            $('#developer_id').val('');
                }
                else{
                    //$('#spinner').modal({backdrop: 'static', keyboard: false});
                        $.ajax({
                        url:"{{route('receivables.getRCVDDtls')}}",
                        method: 'get',
                        headers:  {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                        data:{
                          'developer_id':developer_id
                        },
                        dataType:'json',
                        success:function(data){

                            console.log(data);

                            $('#project_id').empty();
                            $('#project_id').append("<option selected disabled>Select Project</option>");
                            data.devs.forEach(function(prj){
                                $('#project_id').append('<option value="'+prj.id+'">'+prj.name+'</option>');
                            });
                            //$('#spinner').modal('toggle');
                    },
                    /*error:function(e){
                      console.log(e);
                    }*/
                    error: function (jqXHR, exception) {
                        console.log(jqXHR);
                    }
                });
                } //end else
            });

        $('#total_selling_price').on('keyup', function () {
            var ttl_sell_price = $('#total_selling_price').val();
            var comm_rate = $('#comm_rate').val();

            $.ajax({
                url:"{{route('sales.getDefaultValues')}}",
                method: 'get',
                headers:  {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                data:{
                  //'developer_id':developer_id
                },
                dataType:'json',
                success:function(data){
                    console.log(data.vat);
                    console.log(data.proc_fee);
            },
            /*error:function(e){
              console.log(e);
            }*/
            error: function (jqXHR, exception) {
                console.log(jqXHR);
            }
            });
        });

        function realParseFloat(s)
        {
            s = s.replace(/[^\d,.-]/g, ''); // strip everything except numbers, dots, commas and negative sign
            if (navigator.language.substring(0, 2) !== "de" && /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(s)) // if not in German locale and matches #,###.######
            {
                s = s.replace(/,/g, ''); // strip out commas
                return parseFloat(s); // convert to number
            }
            else if (/^-?(?:\d+|\d{1,3}(?:\.\d{3})+)(?:,\d+)?$/.test(s)) // either in German locale or not match #,###.###### and now matches #.###,########
            {
                s = s.replace(/\./g, ''); // strip out dots
                s = s.replace(/,/g, '.'); // replace comma with dot
                return parseFloat(s);
            }
            else // try #,###.###### anyway
            {
                s = s.replace(/,/g, ''); // strip out commas
                return parseFloat(s); // convert to number
            }
        }

        function formatnum(n) {
            return n.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
        }

        function compute_comm(nsp) {
            var agt_pcg_rate    = $('#agent_pcg_rate').val();
            var um_pcg_rate     = $('#um_pcg_rate').val();
            var broker_pcg_rate = $('#broker_pcg_rate').val();
            var ref_pcg_rate    = $('#ref_pcg_rate').val();

            var agt_com_amt     = nsp * (agt_pcg_rate / 100);
            var um_com_amt      = nsp * (um_pcg_rate / 100);
            var broker_com_amt  = nsp * (broker_pcg_rate / 100);
            var ref_com_amt     = nsp * (ref_pcg_rate / 100);

            console.log(formatnum(agt_com_amt));
            console.log(formatnum(um_com_amt));

            $('#agent_com_rate').val(formatnum(agt_com_amt));
            $('#um_com_rate').val(formatnum(um_com_amt));
            $('#broker_com_rate').val(formatnum(broker_com_amt));
            $('#ref_com_rate').val(formatnum(ref_com_amt));
        }

        $('#net_selling_price').on('keyup keydown change', function () {
             var y = $('#net_selling_price').val();
             var num = realParseFloat(y);
             compute_comm(num);

        });

        $('.comm_rate').on('keyup keydown change', function () {

            var sum = 0;
            //var nsp = $('#net_selling_price').val();
            //var rate = $(this).val();
            var y = $('#net_selling_price').val();
            var num = realParseFloat(y);

            $('.comm_rate').each(function() {
                sum += Number($(this).val());
            });
            console.log(sum);
            /*if (sum < 100) {
                console.log('kulang');
                $('a[href="#finish"]').css('display', 'none');
                $('#modBody').css("background-color","#BB2E0F");
                notifPopup('Notification', 'Total sharing % came short.');
            } else if (sum > 100) {
                console.log('sobra');
                $('a[href="#finish"]').css('display', 'none');
                $('#modBody').css("background-color","#BB2E0F");
                notifPopup('Notification', 'Total sharing % exceeded.');
                //notifPopup('Notification', 'Sobra');
            } else {
                console.log('sakto. daw coke');
                $('a[href="#finish"]').css('display', 'block');
            }*/
            compute_comm(num);

            //comm = parseFloat(nsp) * parseFloat(rate);
            //$('#ttl_basic_pay').val(sum);
            //$('#gross_pay').val(gross_pay);
            //get_totals();

        });

        /*$('#client_name').on('blur', function () {

            var client_name = $('#client_name').val();

            $.ajax({
                url:"{{route('sales.chkClientName')}}",
                method: 'get',
                headers:  {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                data:{
                  'client_name':client_name
                },
                dataType:'json',
                success:function(data){
                    console.log(data.chk);
                    if (data.chk == true) {
                        //alert('naa');
                        $('#modBody').css("background-color","#BB2E0F");
                        notifPopup('Notification', 'Client Name already exist. Please provide another name');
                        //$('#btnSave').prop("disabled", true);
                        $('a[href="#finish"]').css('display', 'none');
                    } else {
                        $('a[href="#finish"]').css('display', 'block');
                        }
                    //$('#spinner').modal('toggle');
                },
                error: function (jqXHR, exception) {
                    console.log(jqXHR);
                }
            });
        //} //end else
        });*/

    </script>
@stop