@extends('adminlte::page') @section('content')
@include('administrator.construction.warehouse.create')
@include('administrator.construction.warehouse.edit')
<?php Fun::lang()?>
    <style>
        .jconfirm-content-pane{
            overflow: hidden !important;
        }
        /* .jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {
            overflow: hidden;
        } */
        .jconfirm-buttons { 
            text-align: center;
        }
        .jconfirm-content-pane{
            overflow: scroll !important;
        }
        
    </style>

<div class="title-page">
    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
            <li><a href="#">Construction</a></li>
            <li><a href="#">Budget</a></li>
            <li><a href="#">Budget Construction</a></li>
        </ul>
    </div>
</div>
    <div class="page">
        <div class="top-content">
            <div class="row">
                <div class="col-sm-12 col-xs-12">
                    <div class="title-page">
                        <div class="pull-left">
                            <h3>Budget Construction</h3>
                        </div>
                    </div>
                    <div class="pull-right">
                        @can('Construction-Request-BOQ-Create')
                            <a class="button_sm button_primary" href="{{ route('budget-construction.create') }}" data-toggle="modal"><span class="fa fa-plus"></span>  Create New</a>
                        @endcan
                    </div>
                </div>
            </div>
        </div>
        <div class="box-body table-responsive">
                        
            <table id="datatable_boq_index" width="100%" class="table table-striped table-bordered table-hover nowrap">
                <thead>
                    <tr>
                        <th>NO</th>
                        <th>Date</th>
                        <th>Type of Building</th>
                        <th>Project</th>
                        <th>Zone</th>
                        <th>Prepared By</th>
                        <th>Title</th>
                        <th>Status</th>
                        <th>Status Finish</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

        </div>
    </div>
    @endsection
    @section('js')
    <script type="text/javascript">
        $(document).on("keyup","#amount_all_house_used",function(){
            $(".amount-house-used").html($("#amount_all_house_used").val()+" houses");
        });
        var product = '{!! json_encode($products) !!}';
        $(document).ready(function() {
            table();
        });

        function table(){
        $('#datatable_boq_index').DataTable().destroy();

        if(product==""){
                        $('#main-spinner').show();
                    }
                        
                    var table = $('#datatable_boq_index').DataTable({
                        ordering: false,
                        "serverSide": true,
                        "scrollY":"600px",
                        "scrollCollapse": true,
                        "scrollX": true,
                        "lengthMenu": [
                        [20, 25, 50, 100, 500],
                        [20, 25, 50, 100, 500]
                    ],
                        ajax: "{{ route('budget-construction.index') }}",
                        columns: [
                        {
                            data: 'DT_RowIndex'
                        },{
                            data: 'date'
                        }
                        ,{
                            data: 'building_type'
                        }
                        ,{
                            data: 'project_name'
                        }
                        ,{
                            data: 'zone_name'
                        }
                        ,{
                            data: 'prepared_by'
                        } ,{
                            data: 'title'
                        }
                        ,{
                            data: 'status'
                        }
                        ,{
                            data: 'status_finish'
                        }
                        ,{
                            data: 'action'
                        }
                        ],
                        "initComplete": function(settings, json) {
                            $('#main-spinner').hide();
                        }
                    });
            
                    $.fn.dataTable.ext.errMode = 'throw';
        }
 

        $(document).on('click',".show_detail",function(){
            var url = $(this).data('href'); 
            var url_update_status = $(this).data('update_status'); 
            var building_type = $(this).data('building_type');  
            var prepared_by = $(this).data('prepared_by');  
            var amount_of_house_used = $(this).data('amount_of_house_used');  
            var date = $(this).data('date');  
            var title = $(this).data('title');  
            var project_name = $(this).data('project_name');  
            var status_close = $(this).data('status_close');  
            var budget_id = $(this).data('budget_id');
            
            status_close  == 'N/A' ? status_close = false : status_close = true;
            $.confirm({
                closeIcon: true,
                boxWidth: '1500px',
                boxHeight: '1500px',
                useBootstrap: false,
                type: 'green    ',
                title: '  {{__('administrator.show')}}  ',
                content: 'url:text.txt',
                buttons: {
                    cancel: {
                        text: 'cancel',
                        btnClass: 'btn-red',
                        action: function () {
                          
                        }
                    }, 
                    print: {
                        text: 'print',
                        btnClass: 'btn-blue',
                        action: function () {
                          window.open("{{ route('budget_construction.show_print') }}"+"?budget_id="+budget_id);
                        }
                    }, 
                },
                onContentReady: function () {
                    var self = this;
                    $.ajax({
                        type: 'GET',
                        url :url,
                        async: false,
                        success: function(data){
                            self.setContentAppend(`
                                <div class="fontChange">
                                  
                                    <div class="row" style="padding:15px;"> 
                                        <div class="form-group col-sm-6 col-xs-6">
                                             <h5><label>Prepared By </label> : ${prepared_by} </h5> 
                                            <h5><label>Project Name </label> : ${project_name} </h5>  
                                            <h5><label>Amount used (units)  </label> :  ${amount_of_house_used} </h5>   
                                        </div>
                                         <div class="form-group col-sm-6 col-xs-6"> 
                                            <h5><label>Date  </label> :   ${date}</h5>  
                                            <h5><label>Other Type  </label> :   ${building_type}</h5>  
                                            <h5><label>Title  </label> :  ${title} </h5>  
                                        </div>
                                    </div>

                                    <div class="row" style="padding:15px;"> 
                                        <div class="form-group col-sm-8 col-xs-12">
                                            <label class="required">BOQ</label>
                                            <table class="table table-striped table-bordered" id="table_boq" width="100%">
                                                <thead>
                                                    <tr>
                                                        <th width="5%">No</th>
                                                        <th width="25%">
                                                            <label class="">
                                                                work type 
                                                            </label>
                                                        </th>
                                                        <th width="25%">
                                                            <label class="">
                                                                labour
                                                            </label>
                                                        </th>
                                                        <th width="25%">
                                                            <label class="">
                                                                material
                                                            </label>
                                                        </th>
                                                        <th width="20%">
                                                            <label class="">
                                                                total
                                                            </label>
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody class="resultbody1">
                                                     
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="form-group col-sm-4 col-xs-12">
                                            <label class="">Actual Used</label>
                                            <table class="table table-striped table-bordered"  id="table_actual_used" width="100%">
                                                <thead>
                                                    <tr>
                                                        <th>
                                                            <label class="">
                                                                labour
                                                            </label>
                                                        </th>
                                                        <th>
                                                            <label class="">
                                                                material
                                                            </label>
                                                        </th>
                                                        <th>
                                                            <label class="">
                                                                total
                                                            </label>
                                                        </th>

                                                        <th>
                                                            <label class="">
                                                                balance
                                                            </label>
                                                        </th>
                                                        
                                                    </tr>
                                                </thead>
                                                <tbody class="resultbody2">
                                                    
                                                </tbody>
                                            </table>
                                        </div>
            
                                    </div>
                                    <div class="row" style="padding:15px;"> 
                                    <div class="form-group col-sm-8 col-xs-12">
                                        <table class="table table-striped table-bordered"  width="100%">
                                            <tbody class="">
                                                <tr> 
                                                    <td  colspan="2">
                                                        <label class=" ">
                                                            GRAND TOTAL
                                                        </label>
                                                    </td>
                                                    <td  >
                                                        <input type="text" class="form-control number-only boq" name="greand_boq_labour" placeholder="GRAND Total Labour" style="background-color: #e8ece9 !important;"  required readonly  >
                                                    </td>
                                                    <td   >
                                                        <input type="text" class="form-control number-only boq" name="greand_boq_material" placeholder="GRAND Total Material" required readonly style="background-color: #e8ece9 !important;" >
                                                    </td>
                                                    <td  >
                                                        <input type="text" class="form-control number-only  " name="greand_boq_total" placeholder="GRAND Total Total" required readonly style="background-color: #e8ece9 !important;" >
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="form-group col-sm-4 col-xs-12">
                                        <table class="table table-striped table-bordered"  width="100%"> 
                                            <tbody class="">
                                                <tr> 
                                                    <td>
                                                        <input type="text" class="form-control number-only actual" placeholder="GRAND Total Labour" name="greand_actual_labour" readonly style="background-color: #e8ece9 !important;" >
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control number-only actual" placeholder="GRAND Total Material" name="greand_actual_material"     readonly  style="background-color: #e8ece9 !important;">
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control number-only" placeholder="GRAND Total  " name="greand_actual_total" readonly style="background-color: #e8ece9 !important;"  >
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control number-only" placeholder="GRAND Total  " name="balance_total" readonly style="background-color: #e8ece9 !important;"  >
                                                    </td>
                                                    
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                        
                                </div>
                            `,);
                            self.$content.find('.resultbody1').append(data.boq);
                            self.$content.find('.resultbody2').append(data.actual);
                        }
                    });
                    GRAND_total();
                },
                columnClass: 'medium',
            });
        });
      
 function GRAND_total(){
        let greand_boq_labour = 0 ;
        $("input[name='boq_labour[]']").each(function() {
            greand_boq_labour += Number($(this).data("value"));
        });
        $("input[name='greand_boq_labour']").val("$"+parseFloat(greand_boq_labour).toFixed(2));

        let boq_material = 0 ;
        $("input[name='boq_material[]']").each(function() {
            boq_material += Number($(this).data("value"));
        });
        $("input[name='greand_boq_material']").val("$"+parseFloat(boq_material).toFixed(2));
        $("input[name='greand_boq_total']").val("$"+parseFloat(greand_boq_labour + boq_material).toFixed(2));

        let actual_labour = 0 ;
        $("input[name='actual_labour[]']").each(function() {
            actual_labour += Number($(this).data("value"));
        });
        $("input[name='greand_actual_labour']").val("$"+parseFloat(actual_labour).toFixed(2));

        let actual_material = 0 ;
        $("input[name='actual_material[]']").each(function() {
            actual_material += Number($(this).data("value"));
        });
        $("input[name='greand_actual_material']").val("$"+parseFloat(actual_material).toFixed(2));

        $("input[name='greand_actual_total']").val("$"+parseFloat(actual_labour + actual_material).toFixed(2));
        $("input[name=balance_total]").val("$"+parseFloat(parseFloat(greand_boq_labour + boq_material)-parseFloat(actual_labour + actual_material)).toFixed(2));
    }
        
    </script>
    @endsection