@extends('member') @section('page-title') @section('content') @if (isset($status))
<div class="pad margin no-print">
    <div class="alert alert-{{$status['code']}} alert-dismissible fade in" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4><i class="icon fa fa-ban"></i> {{ $status['header'] }}</h4>
        <ul>
            @foreach ($status['messages'] as $m)
            <li>{{$m}}</li>
            @endforeach
        </ul>
    </div>
</div>
@endif
@push('head-script')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-select/bootstrap-select.min.css">
<link href="/assets/css/rounded.css" rel="stylesheet">
 
 @endpush

<div class="row">
    <div class="col-xs-12">

        <div class="panel panel-inverse">
            <div class="panel-heading">{{trans('bill/bill.bill_submission')}}</div>
            <div class="panel-wrapper collapse in" aria-expanded="true">
                <div class="panel-body">
                    {!! Form::model($bill, ['method' => isset($bill) && $bill->id ? 'put' : 'post', 'files' => 'true']) !!}

                    <div class="form-body">

                        @if(isset($bill) && ($bill->id))
                        <h3 class="box-title ">{{trans('bill/bill.edit_bill')}}</h5>
                            @else
                            <h3 class="box-title ">{{trans('bill/bill.add_new_bill')}}</h3>
                            @endif
                            <hr>
                            <div class="row">
                                <div class="col-md-2 form-group">
                                    <label>{{trans('bill/bill.month')}}</label>
                                    <select class="form-control select2" name="month_id" id="month_id" onchange="showListing.call(this)">
                                        @foreach ($month as $mkey=>$monthitem)
                                            <option value="{{$mkey}}" @if(($mkey == $month_id) || (old('month_id') == $mkey)) selected @endif>{{$monthitem}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>{{trans('bill/bill.year')}}</label>
                                    <select class="form-control select2" id="year_id" name="year_id" onchange="showListing.call(this)">
                                        @foreach ($year as $ykey=>$yearitem)
                                            <option value="{{$yearitem}}" @if(($yearitem == $year_id) || (old('year_id') == $yearitem)) selected @endif>{{$yearitem}}</option> 
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                @if(Auth::user()->is_contractor!=1)
                                <div class="col-md-4">
                                    <div class="form-group {{{ $errors->has('contractor_id') ? 'has-error' : '' }}}">
                                        
                                        <label class="required">{{trans('bill/bill.contractor')}}</label> 
                                        <select class="form-control select2" name="contractor_id" id="contractor_id" onchange="getType.call(this)">
                                            <option value="">{{trans('bill/bill.select_contractor')}}</option>
                                            @foreach($contractors as $contractor)
                                                <option value="{{$contractor->id}}" @if(isset($bill) && ($bill->contractor_id == $contractor->id) || (old('contractor_id') == $contractor->id)) selected @endif>{{$contractor->name}}</option>
                                            @endforeach
                                        </select>
                                        {!! $errors->first('contractor_id','
                                        <label class="control-label" for="contractor_id">:message</label>')!!}
                                    </div>
                                </div>
                                @else
                                <input type="hidden" name="contractor_id" id="contractor_id" value="{{Auth::user()->id}}">
                                @endif

                                <div class="col-md-4">
                                    <div class="form-group {{{ $errors->has('type') ? 'has-error' : '' }}}">

                                        <label class="required">{{trans('bill/bill.types')}}</label> 
                                        <select class="form-control select2" name="type" id="type" onchange="showListing.call(this)" required>
                                            <option value="">{{trans('bill/bill.select_type')}}</option>
                                            @foreach($contractorTypes as $types)
                                                <option value="{{$types->type}}" @if(isset($bill) && ($bill->type == $types->type) || (old('type') == $types->type)) selected @endif>{{ucwords($types->type)}}</option>
                                            @endforeach
                                        </select>
                                        {!! $errors->first('type','
                                        <label class="control-label" for="type">:message</label>')!!}
                                    </div>
                                </div>

                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group {{{ $errors->has('bill_no') ? 'has-error' : '' }}}">

                                        <label class="required">{{trans('bill/bill.bill_number')}}</label> {!! Form::text('bill_no', $bill->bill_no ? $bill->bill_no: old('bill_no'), ['class' => 'form-control', 'id' => 'bill_no']) !!} {!! $errors->first('bill_no','
                                        <label class="control-label" for="bill_no">:message</label>')!!}
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group {{{ $errors->has('bill_date') ? 'has-error' : '' }}}">

                                        <label class="required">{{trans('bill/bill.bill_date')}}</label> {!! Form::date('bill_date', $bill->bill_date ? $bill->bill_date: old('bill_date'), ['class' => 'form-control', 'id' => 'bill_date']) !!} {!! $errors->first('bill_date',

                                        '
                                        <label class="control-label" for="bill_date">:message</label>')!!}
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group {{{ $errors->has('po_no') ? 'has-error' : '' }}}">

                                        <label class="required">{{trans('bill/bill.po_number')}}</label> {!! Form::text('po_no', $bill->po_no ? $bill->po_no: old('po_no'), ['class' => 'form-control', 'id' => 'po_no']) !!} {!! $errors->first('po_no','
                                        <label class="control-label" for="po_no">:message</label>')!!}
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group {{{ $errors->has('po_date') ? 'has-error' : '' }}}">

                                        <label class="required">{{trans('bill/bill.po_date')}}</label> {!! Form::date('po_date', $bill->po_date ? $bill->po_date: old('po_date'), ['class' => 'form-control', 'id' => 'po_date']) !!} {!! $errors->first('po_date','
                                        <label class="control-label" for="po_date">:message</label>')!!}
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group {{{ $errors->has('bill_amount') ? 'has-error' : '' }}}">
                                        <label class="required">{{trans('bill/bill.bill_amount')}}</label> {!! Form::text('bill_amount', $bill->bill_amount ? $bill->bill_amount: old('bill_amount'), ['class' => 'form-control', 'id' => 'bill_amount', 'onblur'=>'calculateVariance.call(this)']) !!} {!! $errors->first('bill_amount',

                                        '
                                        <label class="control-label" for="bill_amount">:message</label>')!!}
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group {{{ $errors->has('po_date') ? 'has-error' : '' }}}">

                                        <label class="required">{{trans('bill/bill.gst_amount')}}</label> {!! Form::text('gst_amount', $bill->gst_amount ? $bill->gst_amount: old('gst_amount'), ['class' => 'form-control', 'id' => 'gst_amount']) !!} {!! $errors->first('gst_amount','
                                        <label class="control-label" for="gst_amount">:message</label>')!!}
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <label>{{trans('bill/bill.attachment')}} <span style="color:grey">({{trans('bill/bill.can_attach_more_than_one')}})</span></label> 
                                    <div class="form-group {{{ $errors->has('attachments.*') || $errors->has('attachments') ? 'has-error' : '' }}}">
                                        {!! $errors->first('attachments', '<label class="control-label" for="attachments">:message</label>')!!}
                                        {!! $errors->first('attachments.*', '<label class="control-label" for="attachments[]">:message</label>')!!}
                                        <div class="row">
                                            <div class="col-md-2">
                                                <button type="button" id="add_more" class="btn btn-primary" style="line-height:15px;"><i class="fa fa-plus" aria-hidden="true"></i> Add Attachment</button>
                                            </div>
                                        </div>
                                        @if($bill->attachments)
                                            @foreach($bill->getMedia('attachments') as $attachment)
                                            <div style="display:inline-block; position:relative; margin: 7px 7px 0 0;">
                                                    @if($attachment->mime_type=="application/msword" || $attachment->mime_type=="appplication/docx" || $attachment->mime_type=="appplication/doc")
                                                        <a href="{{$attachment->getUrl()}}" target="_blank"><img src="/assets/img/docx-icon.jpg" alt="attachment" style="height: 200px; width:200px; object-fit: contain;"></a> 
                                                    @elseif($attachment->mime_type=="application/pdf")
                                                        <a href="{{$attachment->getUrl()}}" target="_blank"><img src="/assets/img/pdf-icon.jpg" alt="attachment" style="height: 200px; width:200px; object-fit: contain;"></a> 
                                                    @else
                                                        <a href="{{$attachment->getUrl()}}" target="_blank"><img src="{{$attachment->getUrl()}}" alt="attachment" style="height: 200px; width:200px; object-fit: contain;"></a> 
                                                    @endif
                                                    <p class="text-center">{{$attachment->file_name}}</p>
                                                    <a onclick="delAttached.call(this,{{$attachment->id}})" style='cursor:pointer; color:red; position: absolute; right: 5px; top: 5px' title="Delete Image"> <i class="fa fa-times-circle" style="font-size:18px;"></i></a>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="row table-responsive" id="listingDiv">
                                <div class="col-md-12 mt-18">
                                    <table class="table table-bordered" id="listing">
                                        <thead>
                                            <th>{{trans('common/common.id')}}</th>
                                            <th>{{trans('bill/bill.employee_type')}}</th>
                                            <th>{{trans('bill/bill.employee_code')}}</th>
                                            <th>{{trans('bill/bill.name')}}</th>
                                            <th>{{trans('bill/bill.gross_amount')}}</th>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                    </div>
                </div>
                <div class="row" id="varianceDiv">
                    <div class="col-md-11 text-right">
                        <p style="font-size: 18px;">{{trans('bill/bill.variance')}}: <span id="variance" style="font-weight:500;">0</span></p>
                    </div>
                </div>
                <input type="hidden" name="total_gross" id="total_gross" value=0 />
                <input type="hidden" name="deleted_attachemnts" id="deleted_attachemnts" value=[] />
                <div class="form-actions">
                    <button type="submit" id="save-form" class="btn btn-success"> <i class="fa fa-check"></i> {{trans('common/common.save')}}</button>

                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>

<!-- .row -->

@endsection @push('footer-script')

<script src="/assets/plugins/bower_components/datatables/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-select/bootstrap-select.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
  
<script>
$(document).ready(function() {
    showListing();
    getType();
    callDt();
    calculateVariance();
});
var imagesPreview = function(input, placeToInsertImagePreview) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(event) {
            var extension = input.files[0].name.split('.').pop().toLowerCase();
            if(extension == "pdf"){
                $($.parseHTML('<img src="/assets/img/pdf-icon.jpg" style="height:200px; width:200px; object-fit: contain;"> <a onclick="deleteAttachment.call(this)" style="cursor:pointer; color:red; position: absolute; right: 5px; top: 5px" title="Delete Image"> <i class="fa fa-times-circle" style="font-size:18px;"></i></a><p class="text-center">'+input.files[0].name+'</p>')).appendTo(placeToInsertImagePreview);
            }
            else if(extension == "docx" || extension=="doc"){
                $($.parseHTML('<img src="/assets/img/docx-icon.jpg" style="height:200px; width:200px; object-fit: contain;"> <a onclick="deleteAttachment.call(this)" style="cursor:pointer; color:red; position: absolute; right: 5px; top: 5px" title="Delete Image"> <i class="fa fa-times-circle" style="font-size:18px;"></i></a><p class="text-center">'+input.files[0].name+'</p>')).appendTo(placeToInsertImagePreview);
            }
            else{
                $($.parseHTML('<img style="height:200px; width:200px; object-fit: contain;"> <a onclick="deleteAttachment.call(this)" style="cursor:pointer; color:red; position: absolute; right: 5px; top: 5px" title="Delete Image"> <i class="fa fa-times-circle" style="font-size:18px;"></i></a><p class="text-center">'+input.files[0].name+'</p>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
            }
        }
        reader.readAsDataURL(input.files[0]);
    }
};

function delAttached(attachment){
    $(this).parent().remove();
    var val = JSON.parse($('#deleted_attachemnts').val());
    val.push(attachment);
    $('#deleted_attachemnts').val(JSON.stringify(val));
}

function deleteAttachment(){
    $(this).parent().remove();
}

function preview() {
    imagesPreview(this, $(this).closest('div'));
}

$('#add_more').click(function(e){
    var temp = $(this).parent().parent().parent().append("<div style='display:inline-block; position:relative; margin: 7px 7px 0 0;'><input type='file' style='display:none;' class='fileinput form-control attachments' name='attachments[]' data-filename-placement='inside' title='Browse' onchange='preview.call(this)' /></div>");
    var result = temp.find('div:last input').trigger('click');
});

function showListing(){
    $('#listingDiv').hide();
    if($('#type').val()=='manpower' && $('#contractor_id').val()!=''){
        $('#listingDiv').show();
        var id = $('#contractor_id').val();
        var month_id = $('#month_id').val();
        var year_id = $('#year_id').val();
        $.ajax({
            url: "/{{$alias}}/contractors/bill/list",
            type: "GET",
            method: "GET",
            data: {
                'contractor_id': id,
                'month_id': month_id,
                'year_id': year_id,
            },
            success: function(dataResult){
                if(dataResult!=null){
                    var sum=0;
                    var temp ='';
                    dataResult.forEach(function(val, index){
                        temp+='<tr><td>'+(index+1)+'</td><td>'+val.employee_type+'</td><td>'+val.employee_code+'</td><td>'+val.name+'</td><td>';
                        var gross = 0;
                        if(val.salary_slip!=null){
                            gross = val.salary_slip.total_gross;
                        }else{
                            gross = 0;
                        }
                        temp+= gross+'</td></tr>';
                        sum+=gross;
                    });
                    $('#total_gross').val(sum);
                    $("#listing").DataTable().destroy();
                    $('#listingDiv tbody').html(temp);
                    callDt();
                    calculateVariance();
                }
            }
        });
    }
    calculateVariance();

}
function getType(){
    var contractor_id = $('#contractor_id').val();
    if(contractor_id!=''){
        $.ajax({
            url: "/{{$alias}}/contractors/getBillType",
            type: "GET",
            method: "GET",
            data: {
                'contractor_id': contractor_id,
            },
            success: function(dataResult){
                if(dataResult!=null){
                    var temp ='<option value="">Select Type</option>';
                    dataResult.forEach(function(val, index){
                        temp += ('<option value="'+val.type+'" @if(isset($bill) && ($bill->type == "'+val.type+'") || (old("type") == "'+val.type+'")) selected @endif>'+ val.type.charAt(0).toUpperCase() + val.type.slice(1) + '</option>');
                    });
                    $('#type').html(temp);
                    showListing();
                }
            }
        });
    }
}


function calculateVariance(){
    $('#varianceDiv').hide();
    var billAmount = $('#bill_amount').val();
    var sum = $('#total_gross').val();
    var type = $('#type').val();
    if(billAmount!='' && billAmount!=0 && type=='manpower'){
        $('#variance').html(billAmount-sum);
        $('#varianceDiv').show();
    }
}

function callDt(){
    $('#listing').DataTable({ 
        language: { search: "" },
        dom: 'Bfrtip',
        buttons: [
            {
            extend: 'copy',
        },
        {
            extend: 'csv',orientation:"landscape",
        },
        {
            extend: 'excel',orientation:"landscape",
        },
        {
            extend: 'pdf',orientation:"landscape",
        }],
        "ordering": true,
        "info":     true, 
    }); 
}



</script>
@endpush