@extends('layouts.app')

@section('title')
    NOC
@stop

@section('breadcrumb')
    <ol class="breadcrumb pull-right">
        <li><a href="{{ route('home') }}"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="{{ route('noc_req') }}">NOC'S</a></li>
        <li class="active">Issue of NOC</li>
    </ol>
@stop

@section('css')

    <style type="text/css">
        .tick_cross {
            width: 30px;
            display: block;
            margin: 40px auto 0;
        }

        .path {
            stroke-dasharray: 1000;
            stroke-dashoffset: 0;

            &.circle {
                -webkit-animation: dash 0.9s ease-in-out;
                animation: dash 0.9s ease-in-out;
            }

            &.line {
                stroke-dashoffset: 1000;
                -webkit-animation: dash 0.9s 0.35s ease-in-out forwards;
                animation: dash 0.9s 0.35s ease-in-out forwards;
            }

            &.check {
                stroke-dashoffset: -100;
                -webkit-animation: dash-check 0.9s 0.35s ease-in-out forwards;
                animation: dash-check 0.9s 0.35s ease-in-out forwards;
            }
        }

        p {
            text-align: center;
            margin: 20px 0 60px;
            font-size: 1.25em;

            &.success {
                color: #73af55;
            }

            &.error {
                color: #d06079;
            }
        }

        @-webkit-keyframes dash {
            0% {
                stroke-dashoffset: 1000;
            }

            100% {
                stroke-dashoffset: 0;
            }
        }

        @keyframes dash {
            0% {
                stroke-dashoffset: 1000;
            }

            100% {
                stroke-dashoffset: 0;
            }
        }

        @-webkit-keyframes dash-check {
            0% {
                stroke-dashoffset: -100;
            }

            100% {
                stroke-dashoffset: 900;
            }
        }

        @keyframes dash-check {
            0% {
                stroke-dashoffset: -100;
            }

            100% {
                stroke-dashoffset: 900;
            }
        }

        .input_sty {
            width: 350px;
        }
    </style>

@stop

@section('content')

    <div class="container-fluid">
        <form method="post" action="{{ route('noc.insert') }}" class="form-horizontal" id="receipt_form">
            {{ csrf_field() }}
            <div class="row">
                <div class="col-lg-12 col-sm-12 col-xs-12">
                    @if ($errors->any())
                        <div class="white-box">
                            <h2>Errors</h2>
                            <ul>
                                {!! implode(
                                    '',
                                    $errors->all('<li><span
                                                                                                                                                                                                                class="help-block"><strong>:message</strong></span></li>'),
                                ) !!}
                            </ul>
                        </div>
                    @endif
                    <div class="white-box">
                        <h3 class="box-title"><i class="fa fa-plus-circle" aria-hidden="true"></i> Issue of NOC</h3>
                        <span class="text-muted m-b-30 font-13" style="height: 5px;"> Add the information </span>

                        <hr>
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="exampleInputuname" class="control-label col-md-4">NOC No
                                            <span style="color: red">*</span>
                                        </label>
                                        <div class="col-md-6">
                                            <div class="input-group">
                                                <input type="text" class="form-control  " name="noc_no"
                                                    value="NOC-000{{ \App\NOC::count() + 1 }}" id="noc_no"
                                                    style="width:350px;">
                                                @if ($errors->has('noc_no'))
                                                    <span class="help-block">
                                                        <strong>{{ $errors->first('noc_no') }}</strong>
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputuname" class="control-label col-md-4">NOC Date
                                            <span style="color: red">*</span>
                                        </label>
                                        <div class="col-md-6">
                                            <div class="input-group" style="width: 338px;">
                                                <input type="date" class="form-control" name="noc_date" id="noc_date"
                                                    style="width:350px;">
                                                @if ($errors->has('noc_date'))
                                                    <span class="help-block">
                                                        <strong>{{ $errors->first('noc_date') }}</strong>
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputuname" class="control-label col-md-4">NOC Valid Till Date
                                            <span style="color: red">*</span>
                                        </label>
                                        <div class="col-md-6">
                                            <div class="input-group" style="width: 338px;">
                                                <input type="date" class="form-control" name="noc_valid_date"
                                                    id="noc_valid_date" style="width:350px;">
                                                @if ($errors->has('noc_valid_date'))
                                                    <span class="help-block">
                                                        <strong>{{ $errors->first('noc_valid_date') }}</strong>
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">


                                        <label class="control-label col-md-4">Select Customer<span
                                                style="color: red">*</span></label>
                                        <div class="col-md-8">
                                            <select name="customer_id" id='customer_id' class="form-control chosen-select"
                                                onchange="updateProperty(this.value)">
                                                <option value="" selected="">None</option>

                                                @foreach ($customers as $customer)
                                                    @if (old('customer_id') == $customer->id)
                                                        <option selected="" value="{{ $customer->id }}">
                                                            {{ $customer->name }} - {{ $customer->cnic }} </option>
                                                    @else
                                                        <option value="{{ $customer->id }}">{{ $customer->name }} -
                                                            {{ $customer->cnic }}</option>
                                                    @endif
                                                @endforeach
                                            </select>

                                            @if ($errors->has('customer_id'))
                                                <span class="help-block">
                                                    <strong>{{ $errors->first('customer_id') }}</strong>
                                                </span>
                                            @endif

                                        </div>


                                    </div>

                                    <div class="form-group">


                                        <label class="control-label col-md-4">Select Transfer Type<span
                                                style="color: red">*</span></label>
                                        <div class="col-md-8">
                                            <select name="transfer_type" id='transfer_type'
                                                class="form-control chosen-select">
                                                @foreach ($transfer_type as $type)
                                                    <option value="{{ $type->id }}">{{ $type->name }} </option>
                                                @endforeach



                                            </select>

                                            @if ($errors->has('transfer_type'))
                                                <span class="help-block">
                                                    <strong>{{ $errors->first('transfer_type') }}</strong>
                                                </span>
                                            @endif

                                        </div>

                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputuname" class="control-label col-md-4">Contact No
                                            <span style="color: red">*</span>
                                        </label>
                                        <div class="col-md-6">
                                            <div class="input-group" style="width: 338px;">
                                                <input type="text" class="form-control" name="contact_no" readonly
                                                    value="{{ old('contact_no') }}" id="contact_no" style="width:350px;">
                                                @if ($errors->has('contact_no'))
                                                    <span class="help-block">
                                                        <strong>{{ $errors->first('contact_no') }}</strong>
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="exampleInputuname" class="control-label col-md-4">S/O,D/O,W/O<span
                                                style="color: red">*</span>
                                        </label>
                                        <div class="col-sm-6">
                                            <div class="input-group" style="width: 338px;">
                                                <input type="text" class="form-control" name="father_name_parent"
                                                    readonly
                                                    value="@if (old('father_name_parent')) {{ old('father_name_parent') }} @endif"
                                                    id="father_name_parent" style="width:350px;">
                                                @if ($errors->has('father_name_parent'))
                                                    <span class="help-block">
                                                        <strong>{{ $errors->first('father_name_parent') }}</strong>
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="cnic" class="control-label col-md-4">CNIC
                                            <span style="color: red">*</span></label>
                                        <div class="col-md-6">
                                            <div class="input-group" style="width: 338px;">
                                                <input type="text" class="form-control" readonly
                                                    value="@if (old('cnic')) {{ old('cnic') }} @endif"
                                                    name="cnic" id="cnic" style="width:350px;">


                                                @if ($errors->has('cnic'))
                                                    <span class="help-block">
                                                        <strong>{{ $errors->first('cnic') }}</strong>
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    {{-- <br><br><br><br><br><br> --}}
                                    <div class="form-group">
                                        <label class="control-label col-md-4">Select Unit No<span
                                                style="color: red">*</span></label>
                                        <div class="col-md-8">
                                            <select name="unit_number_id" id='unit_number_id' class="form-control"
                                                onchange="updateUnit(this.value)">

                                            </select>

                                            @if ($errors->has('unit_number_id'))
                                                <span class="help-block">
                                                    <strong>{{ $errors->first('unit_number_id') }}</strong>
                                                </span>
                                            @endif

                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <label for="address" class="control-label col-md-4">Sector
                                            <span style="color: red">*</span></label>
                                        <div class="col-md-8">
                                            <div class="input-group" style="width: 338px;">
                                                <input type="text" class="form-control" name="unit_floor_id" readonly
                                                    value="{{ old('unit_floor_id') }}" id="unit_floor_id"
                                                    style="width:350px;">
                                                @if ($errors->has('unit_floor_id'))
                                                    <span class="help-block">
                                                        <strong>{{ $errors->first('unit_floor_id') }}</strong>
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>




                                    <div class="form-group">
                                        <label for="exampleInputEmail1" class="control-label col-md-4">Phase<span
                                                style="color: red">*</span></label>
                                        <div class="col-md-8">
                                            <div class="input-group" style="width: 338px;">
                                                <input type="text" class="form-control" name="phase" readonly
                                                    value="{{ old('phase') }}" id="phase" style="width:350px;">
                                                @if ($errors->has('phase'))
                                                    <span class="help-block">
                                                        <strong>{{ $errors->first('phase') }}</strong>
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputEmail1" class="control-label col-md-4">Membership No.
                                            <span style="color: red">*</span></label>
                                        <div class="col-md-8">
                                            <div class="input-group" style="width: 338px">
                                                <input type="text" class="form-control" name="membership_no" readonly
                                                    value="{{ old('membership_no') }}" id="membership_no"
                                                    style="width:350px;">
                                                @if ($errors->has('membership_no'))
                                                    <span class="help-block">
                                                        <strong>{{ $errors->first('membership_no') }}</strong>
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>





                        <div class="clearfix"></div>

                        <div class="col-md-12" id='property'> </div>



                        <div class="clearfix"></div>
                        <div class="panel panel-info" id='checklist_panel' hidden>
                            <div class="panel-heading">Check List</div>
                            <div class="panel-wrapper collapse in" aria-expanded="true">
                                <div style="overflow-y:auto;">
                                    <table class="table table-bordered table-responsive-md table-striped text-center">
                                        <thead>
                                            <tr>

                                                <th class="text-center">Remaining Due Amount
                                                    <span id='remaing_due_icon'>

                                                    </span>


                                                </th>
                                                <th class="text-center">Any Surcharge

                                                    <span id='fine_check_icon'>

                                                    </span>
                                                </th>
                                                <th class="text-center">Unit Status
                                                    <span id='unit_status_icon'>
                                                    </span>


                                                </th>





                                            </tr>

                                        </thead>
                                        <tbody id="tbody_data">

                                            <tr height="2px">

                                                <td class="pt-3-half account" style="width: 40%" contenteditable="true"
                                                    id='remaining_due_amount'>



                                                </td>

                                                <td class="pt-3-half name" contenteditable="true" id='fine_on_unit'>

                                                </td>



                                                <td class="pt-3-half name" style='width: 20%;' id='property_status'>
                                                    Blocked
                                                </td>




                                            </tr>








                                        </tbody>
                                    </table>
                                    {{-- <div class=" col-sm-4">&nbsp;</div>
                                    <div class=" col-sm-2" style="margin-bottom:20px;"> --}}
                                    <button type="submit" id='submit_button'
                                        class="btn btn-info waves-effect waves-light m-t-10"
                                        style="width: 100%">Save</button>
                                    {{-- </div> --}}
                                </div>
                            </div>

                        </div>

                    </div>


                </div>
            </div>
    </div>


    </form>

    </div>

@stop

@section('js')

    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>

    <script>
        $(":input").inputmask();

        function updateUnit(id) {


            $('.preloader').fadeIn();

            var unit_number_id = id;


            var data = {
                'unit_number_id': unit_number_id
            };

            $.get('/noc/getunitinfo', data, function(data) {




                $('#unit_floor_id').val((data.unit_detail.floor) ? data.unit_detail.floor.name : 'N/A');
                $('#phase').val((data.unit_detail.floor) ? data.unit_detail.floor.unit_block.name : 'N/A');

                $('#membership_no').val((data.unit_detail.property.membership_no) ? data.unit_detail.property
                    .membership_no : 0);

                var false_cross = ` <svg class="tick_cross" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
                                                        <circle class="path circle" fill="none" stroke="#D06079" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
                                                        <line class="path line" fill="none" stroke="#D06079" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="34.4" y1="37.9" x2="95.8" y2="92.3"/>
                                                        <line class="path line" fill="none" stroke="#D06079" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="95.8" y1="38" x2="34.4" y2="92.2"/>
                                                      </svg>`;


                var true_tick = `<svg class="tick_cross" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
                                                    <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
                                                    <polyline class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
                                                  </svg>`;
                var status;
                var decesion_val = false;
                var condition2 = false;
                var condition3 = false;

                $('#unit_status_icon').empty;

                if (data.unit_detail.property.status == {{ \App\CustomerProperty::pending }}) {
                    status = 'Pending';
                    $('#unit_status_icon').html(false_cross);
                } else if (data.unit_detail.property.status == {{ \App\CustomerProperty::approved }}) {
                    status = 'Approved';
                    decesion_val = true;
                    $('#unit_status_icon').html(true_tick);
                } else if (data.unit_detail.property.status == {{ \App\CustomerProperty::cancel }}) {
                    status = 'Cancel';
                    $('#unit_status_icon').html(false_cross);
                } else if (data.unit_detail.property.status == {{ \App\CustomerProperty::block }}) {
                    status = 'Block';
                    $('#unit_status_icon').html(false_cross);
                }



                $('#remaining_due_amount').empty();
                if (data.over_due > 0) {
                    $('#remaining_due_amount').text('PKR ' + data.over_due);

                    $('#remaing_due_icon').html(false_cross);
                } else {
                    $('#remaining_due_amount').text('PKR ' + 0);

                    $('#remaing_due_icon').html(true_tick);
                    condition2 = true;
                }

                $('#fine_on_unit').empty();
                if (data.over_due > 0) {
                    $('#fine_on_unit').text('Overdue amount exists Surcharge should be added');

                    $('#fine_check_icon').html(false_cross);
                } else {
                    $('#fine_on_unit').text('No Surcharge');


                    $('#fine_check_icon').html(true_tick);
                    condition3 = true;
                }

                if (decesion_val == false || condition2 == false || condition3 == false) {

                    $('#submit_button').prop('disabled', true);
                }

                if (decesion_val == false && condition2 == false && condition3 == false) {

                    $('#submit_button').prop('disabled', false);
                }





                $('#property_status').empty;
                $('#property_status').text(status);
                $('#checklist_panel').show();
                $('.preloader').fadeOut();
            });
        }

        function updateProperty(id) {


            $('.preloader').fadeIn();

            var customer_id = id;


            var data = {
                'customer_id': customer_id
            };

            $.get('/noc/getcustomerinfo', data, function(data) {


                $('#contact_no').val(data[0].mobile_number);
                $('#father_name_parent').val(data[0].father_name);
                $('#cnic').val(data[0].cnic);


                var model = $('#unit_number_id');
                model.empty();

                model.append("<option value='' disabled selected>" +
                    '' +
                    "</option>");



                $.each(data[0].properties, function(index, element) {



                    model.append("<option value='" + element.inventory.id + "'>" +
                        element.inventory.unit_number + "</option>");


                });


                // document.getElementById('property').innerHTML = data;

                // $('#myTable').DataTable({
                //     "paging": false,
                //     "ordering": false,
                //     "info": false
                // });
            });

            // $('#wait').hide();
            $('.preloader').fadeOut();

        }
    </script>


@stop
@if ($errors->any())
    <script>
        window.onload = function() {

            updateProperty('{{ old('customer_id') }}');

            var payment_method = $('#payment_method').val();
            changeFunc(payment_method)
        }
    </script>
@endif
