@extends('app-new')

@push('head-script')
<!-- BEGIN: Vendor CSS-->
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
<!-- END: Vendor CSS-->
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
<!-- BEGIN: Page CSS-->
<link rel="stylesheet" type="text/css" href="/app-assets/css/style.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/pages/page-profile.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
<!-- END: Page CSS-->
@endpush
@section('content')
<section id="dashboard-ecommerce">
    <div class="row match-height">
        <div class="col-lg-12 col-md-12 col-12">
            <div class="card">
                <div class="card invoice-preview-card mb-0">
                    <div class="card-body invoice-padding pb-0">
                        <!-- Header starts -->
                        <div class=" flex-md-row flex-column invoice-spacing mt-1 mb-1">
                            <div>
                                <div class="logo-wrapper d-flex">
                                    <h3 class="text-primary invoice-logo">{{trans('bill/bill.bill_submission')}}</h3>
                                </div>
                                <hr class="invoice-spacing" />
                            </div>

                        </div>
                    </div>
                    <!--view bill -->
                    <div class="card-body invoice-padding pt-0">
                        <h4 class="mb-3 text-center bill-heading card-title ">{{trans('bill/bill.view_bill')}}</h4>
                        <div class="row invoice-spacing mb-3">
                            <div class="col-xl-6 col-lg-6 col-md-6 col-12">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td class="pe-1">{{trans('bill/bill.contractor')}} :</td>
                                            <td><span
                                                    class="fw-bold badge rounded-pill badge-light-primary">{{ $bill->contractor->name }}</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">{{trans('bill/bill.bill_type')}} :</td>
                                            <td>{{ ucfirst($bill->type) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">{{trans('bill/bill.bill_number')}} :</td>
                                            <td>{{ $bill->bill_no }}</td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">{{trans('bill/bill.bill_date')}} :</td>
                                            <td>{{ $bill->bill_date }}</td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">{{trans('bill/bill.po_number')}}:</td>
                                            <td>{{ $bill->po_no }}</td>
                                        </tr>
                                        @if($bill->remark)
                                        <tr>
                                            <td class="pe-1">{{trans('bill/bill.remark')}}</td>
                                            <td>{{ $bill->remark }}</td>
                                        </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6 col-12">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td class="pe-1">{{trans('bill/bill.po_date')}} :</td>
                                            <td><span class="fw-bold">{{ $bill->po_date }}</span></td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">{{trans('bill/bill.bill_amount')}} ({{trans('bill/bill.including_gst')}}) :</td>
                                            <td>{{ $bill->bill_amount }}</td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">{{trans('bill/bill.gst_amount')}} :</td>
                                            <td>{{ $bill->gst_amount }}</td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">{{trans('bill/bill.final_status')}} :</td>
                                                                                        <td class="badge rounded-pill badge-light-{{$color}}">{{ ucfirst($bill->status) }} </td>
                                        </tr>
                                        @if($bill->transaction_id)
                                        <tr>
                                            <td class="pe-1">{{trans('bill/bill.transaction_id')}}</td>
                                            <td>{{trans('bill/bill.br')}}{{ $bill->transaction_id }}</td>
                                        </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- // view bill  -->

                    <!-- bill status -->
                    <div class="row invoice-spacing ">
                        <div class="content-body">
                            <section class="basic-timeline">
                                <div class="row">
                                    <div class="col-lg-12 col-md-12 col-12">
                                        <div class="card">
                                            <h4 class="card-title bill-heading text-center ms-2 me-2">{{trans('bill/bill.bill_status')}}</h4>

                                            <div class="card-header">

                                            </div>
                                            <div class="card-body">
                                                <ul class="timeline">
                                                @foreach($bill->billStatus as $status)
                                                    <li class="timeline-item">
                                                        <span class="timeline-point timeline-point-indicator"></span>
                                                        <div class="timeline-event">
                                                            <div
                                                                class="d-flex justify-content-between flex-sm-row flex-column mb-sm-0 mb-1">
                                                                @if($status->created_by_type == 'admin')
                                                                <h6>{{ucwords($status->createdByAdmin->name)}}</h6>
                                                                @else
                                                                <h6>{{ucwords($status->createdByEmployee->name)}}</h6>
                                                                @endif
                                                                <span class="timeline-event-time">{{$status->created_at}}</span>
                                                            </div>
                                                            <p>{{ucfirst($status->status)}}</p>

                                                        </div>
                                                    </li>
                                                @endforeach
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- // bill status -->
                                <!-- attachment -->
                                @if($bill->attachments)
                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <div class="card">
                                            <div class="card-body">
                                                <h4 class="mb-3 bill-heading text-center">{{trans('bill/bill.attachment')}}</h4>
                                                <div class="row">
                                                @if($bill->attachments)
                                                    @foreach($bill->getMedia('attachments') as $attachment)
                                                    <div class="col-md-3 col-lg-3 col-6 profile-latest-img mb-1">
                                                    @if($attachment->mime_type=="application/msword" || $attachment->mime_type=="appplication/docx" || $attachment->mime_type=="appplication/doc")
                                                        <a href="{{$attachment->getUrl()}}" data-bs-toggle="modal" data-bs-target="#addNewCard">
                                                            <img src="/assets/img/docx-icon.jpg" class="img-fluid rounded modalAttachment" alt="avatar img" />
                                                        </a>
                                                    @elseif($attachment->mime_type=="application/pdf")
                                                        <a href="{{$attachment->getUrl()}}" data-bs-toggle="modal" data-bs-target="#addNewCard">
                                                            <img src="/assets/img/pdf-icon.jpg" class="img-fluid rounded modalAttachment" alt="avatar img" />
                                                        </a>
                                                    @else
                                                        <a href="{{$attachment->getUrl()}}" data-bs-toggle="modal" data-bs-target="#addNewCard">
                                                            <img src="{{$attachment->getUrl()}}" class="img-fluid rounded modalAttachment" alt="avatar img" />
                                                        </a>
                                                    @endif
                                                    <p class="text-center">{{$attachment->file_name}}</p>
                                                    </div>
                                                    @endforeach
                                                    
                                                @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </section>

                            <!-- attachment -->
                        </div>
                    </div>
                </div>

                <!-- table -->
                <section id="basic-datatable">
                    <div class="row m-1" id="listingDiv">
                        <div class="col-12 col-lg-12 col-md-12">
                            <div class="card-datatable">
                                <!-- <h4 class="mb-3 text-center bill-heading card-title">Data Table</h4> -->

                                <table class="dt-column-search table dataTable  table-responsive d-table " id="listing">
                                    <thead>
                                        <tr>
                                            <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>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- //table -->
                <div class="row card-body">
                    <div class="col-lg-12">
                        @if(Auth::user()->isOrganizationalAdmin() && $bill->status=='approved' && !$bill->transanction_id)
                        {!! Form::model($bill, ['method' => 'post', 'files' => 'true']) !!}
                            <div class="row mb-2">
                                <div class="col-md-4 form-group {{{ $errors->has('transaction_id') ? 'has-error' : '' }}}">
                                    <label class="required">{{trans('bill/bill.transaction_id')}}</label>  {!! Form::text('transaction_id', $bill->transaction_id ? $bill->transaction_id: old('transaction_id'), ['class' => 'form-control', 'id' => 'transaction_id']) !!} {!! $errors->first('transaction_id','
                                    <label class="control-label" for="transaction_id">:message</label>')!!}
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-md-4 form-group {{{ $errors->has('remark') ? 'has-error' : '' }}}">
                                    <label class="required">{{trans('bill/bill.remark')}}</label>  {!! Form::textArea('remark', $bill->remark ? $bill->remark: old('remark'), ['class' => 'form-control', 'id' => 'remark', 'rows' => 4]) !!} {!! $errors->first('remark','
                                    <label class="control-label" for="remark">:message</label>')!!}
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-actions">
                                    <button type="submit" id="save-form" class="btn btn-success" style="margin-bottom:18px;"> <i class="fa fa-check"></i> {{trans('common/common.save')}}</button>
                                </div>
                            </div>

                        {!! Form::close() !!}
                        @endif
                    </div>
                    <div class="col-lg-8 d-flex justify-content-end" id="varianceDiv">
                        <h4>{{trans('bill/bill.variance')}} : </h4>
                            <p class="card-text " id="variance"> 4000</p>
                    </div>
                    <input type="hidden" name="total_gross" id="total_gross" value=0 />
                </div>

            </div>

        </div>

    </div>

    <!-- image modal -->
    <div class="modal fade" id="addNewCard" tabindex="-1" aria-labelledby="addNewCardTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-transparent">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <img id="modalimg2" src="" class="img-fluid rounded"
                    alt="avatar img" />
            </div>
        </div>
    </div>
    <!--/ image modal -->
</section>
@endsection

@push('footer-script')
<script src="/app-assets/js/scripts/pages/modal-add-new-cc.js"></script>
<script src="/app-assets/vendors/js/vendors.min.js"></script>
<script src="/app-assets/js/core/app-menu.js"></script>
<script src="/app-assets/js/core/app.js"></script>
<script src="/app-assets/js/scripts/pages/page-profile.js"></script>
<script src="/app-assets/js/scripts/ui/ui-feather.js"></script>
<script src="/app-assets/js/scripts/tables/table-datatables-basic.js"></script>
<!-- <script src="/app-assets/js/scripts/tables/table-datatables-advanced.js"></script> -->
<script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/jszip.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/pdfmake.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/vfs_fonts.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/buttons.html5.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/buttons.print.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>
<!-- <script src="../../../app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script> -->
<script>
$(window).on('load', function() {
    if (feather) {
        feather.replace({
            width: 14,
            height: 14
        });
    }
    // barChartExample();
})
</script>


<script>
    $(document).ready(function() {
        showListing();
        // callDt();
        calculateVariance();
    });

     // Set the src of the img embedded in the dialog
    $(".modalAttachment").click(function() {
        $('#modalimg2').attr('src', $(this).attr('src'));
        modal.modal("show");
    });
    

    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 preview() {
            imagesPreview(this, $(this).closest('div'));
        }

    function showListing(){
        $('#listingDiv').hide();
        if("{{$bill->type}}"=='manpower' && {{$bill->contractor->id}}!=''){
            $('#listingDiv').show();
            var id = {{$bill->contractor->id}};
            var month_id = $('#month_id').val();
            var year_id = $('#year_id').val();
            $.ajax({
                url: "/{{$alias}}/contractual/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 calculateVariance(){
        $('#varianceDiv').hide();
        var billAmount = {{$bill->bill_amount}};
        var sum = $('#total_gross').val();
        var type = '{{$bill->type}}';
        if(billAmount!='' && billAmount!=0 && type=='manpower'){
            $('#variance').html(billAmount-sum);
            $('#varianceDiv').show();
        }
    }

    function callDt() {
        var dt_filter_table = $('.dt-column-search'); 

            if ($('body').attr('data-framework') === 'laravel') {
                assetPath = $('body').attr('data-asset-path');
            }
            if (dt_filter_table.length) {
        
                // Setup - add a text input to each footer cell
                $('.dt-column-search thead tr').clone(true).appendTo('.dt-column-search thead');
                $('.dt-column-search thead tr:eq(1) th').each(function (i) {
                var title = $(this).text();
                $(this).html('<input type="text" class="form-control form-control-sm" placeholder="Search ' + title + '" />');

                $('input', this).on('keyup change', function () {
                    if (dt_filter.column(i).search() !== this.value) {
                    dt_filter.column(i).search(this.value).draw();
                    }
                });
                });

                var dt_filter = dt_filter_table.DataTable({
                
                dom: '<"card-header border-bottom p-1"<"head-label"><"dt-action-buttons text-end"B>><"d-flex justify-content-between align-items-center mx-0 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"d-flex justify-content-between mx-0 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
                orderCellsTop: true,
                language: {
                    paginate: {
                    // remove previous & next text from pagination
                    previous: '&nbsp;',
                    next: '&nbsp;'
                    }
                },
                buttons: [{
                    extend: 'collection',
                    className: 'btn btn-outline-secondary dropdown-toggle me-2',
                    text: feather.icons['share'].toSvg({ class: 'font-small-4 me-50' }) + "{{trans('manager/manager.export')}}",
                    buttons: [
                        {
                            extend: 'print',
                            {{--filename: '{{$organization->name}} {{$title}}, {{Auth::user()->name}} - {{ date("d-m-Y H-i-s") }}',
                            title: '{{$organization->name}} {{$title}} - {{ date("d-m-Y H-i-s") }}',--}}
                            text: feather.icons['printer'].toSvg({ class: 'font-small-4 me-50' }) + '{{trans('common/common.print')}}',
                            className: 'dropdown-item',
                            exportOptions: { columns: Array.from(Array($("#listing th").length/2 -1).keys()) },
                        },
                        {
                            extend: 'csv',
                            {{--filename: '{{$organization->name}} {{$title}}, {{Auth::user()->name}} - {{ date("d-m-Y H-i-s") }}',
                            title: '{{$organization->name}} {{$title}} - {{ date("d-m-Y H-i-s") }}',--}}
                            text: feather.icons['file-text'].toSvg({ class: 'font-small-4 me-50' }) + '{{trans('common/common.csv')}}',
                            className: 'dropdown-item',
                            exportOptions: { columns: Array.from(Array($("#listing th").length/2 -1).keys()) },
                        },
                        {
                            extend: 'excel',
                           {{-- filename: '{{$organization->name}} {{$title}}, {{Auth::user()->name}} - {{ date("d-m-Y H-i-s") }}',
                            title: '{{$organization->name}} {{$title}} - {{ date("d-m-Y H-i-s") }}',--}}
                            text: feather.icons['file'].toSvg({ class: 'font-small-4 me-50' }) + '{{trans('common/common.excel')}}',
                            className: 'dropdown-item',
                            exportOptions: { columns: Array.from(Array($("#listing th").length/2 -1).keys()) },
                        },
                        {
                            extend: 'pdf',
                            {{--filename: '{{$organization->name}} {{$title}} - {{ date("d-m-Y H-i-s") }}',
                            title: '{{$organization->name}} {{$title}} - {{ date("d-m-Y H-i-s") }}',--}}
                            text: feather.icons['clipboard'].toSvg({ class: 'font-small-4 me-50' }) + '{{trans('common/common.pdf')}}',
                            className: 'dropdown-item',
                            exportOptions: { columns: Array.from(Array($("#listing th").length/2 -1).keys()) },
                                customize: function(doc) {
                                    doc['footer']=(function() {
                                        return {
                                            columns: [
                                                {
                                                    alignment: 'center',
                                                    text: ['Downloaded by: ', { text: '{{Auth::user()->name}}' }, ' on {{ date("d-m-Y") }} at {{ date("g:i A") }}']
                                                }
                                            ],
                                            margin: 10
                                        }
                                    }); 
                                },
                            },
                        {
                        extend: 'copy',
                        {{-- filename: '{{$organization->name}} {{$title}}, {{Auth::user()->name}} - {{ date("d-m-Y H-i-s") }}',
                        title: '{{$organization->name}} {{$title}} - {{ date("d-m-Y H-i-s") }}',--}}
                        text: feather.icons['copy'].toSvg({ class: 'font-small-4 me-50' }) + '{{trans('common/common.copy')}}',
                        className: 'dropdown-item',
                        exportOptions: { columns: Array.from(Array($("#listing th").length/2 -1).keys()) }
                    }
                    ],
                    init: function (api, node, config) {
                        $(node).removeClass('btn-secondary');
                        $(node).parent().removeClass('btn-group');
                        setTimeout(function () {
                        $(node).closest('.dt-buttons').removeClass('btn-group').addClass('d-inline-flex');
                        }, 50);
                    }
                    },
                    
                ],
            });
            }
    }
</script>

<!-- END: Page JS-->


@endpush