 <?php $__env->startSection('content'); ?>
<style>
  td.details-control {
      background: url(' <?php echo e(asset('images/details_open.png')); ?> ') no-repeat center center !important;
      cursor: pointer;
  }
  tr.shown td.details-control {
      background: url(' <?php echo e(asset('images/details_close.png')); ?> ') no-repeat center center !important;
  }
  .jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content div {
    color: rgb(0, 49, 79);
    font-weight: 500;
    padding-left: 5px;
    text-align: left;
}
.text-left{
    text-align: left !important;
}
.form-control:disabled, .form-control[readonly] {
    background-color: transparent !important;
    opacity: 1 !important;
}
.table-inv-head td {
    border: none;
}

.table th {
    vertical-align: middle !important;
}

table tr:nth-child(even), table tr:hover {
    background: none;
}

.table > thead > tr > th {
    border: 1px solid white;
    text-align: center;
}
</style>
<?php Fun::lang()?>
<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="#">Financial Approvals</a></li>
            <li><a href="#">Cash Advance</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>Cash Advance Approval List</h3>
                        </div>
                    </div>
                    <div class="pull-right">
                        <a class="button_sm button_info" href="javascript:void(0)" id="filter-toggle-search"><span class="fa fa-plus"></span>  Filter Toggle</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="box-body table-responsive">
            <div class="row" id="toggle-seaching">
                <div class="col-md-6">
                    <div class="form-group">
                        <strong >Project :</strong>
                        <?php echo Form::select('project',$projects,null, array('class' => 'form-control select2')); ?>

                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <strong >Contractor Name :</strong>
                        <?php echo Form::text('contractor_name',null, array('class' => 'form-control')); ?>

                    </div>
                </div>
                <div class="col-md-12" style="text-align:right;margin-bottom:40px !important;">
                    <a class="button_sm button_success" href="javascript:void(0)" id="search-submit" onclick="searching()"><span class="fa fa-search"></span> Search</a>
                </div>
            </div>  
            <table id="datatable_constructor_payment" width="100%" class="table">
                <thead>
                    <tr>
                        <th></th>
                        <th>NO</th>
                        <th>Date</th>
                        <th>Date Start Work</th>
                        <th>Duration(Day)</th>
                        <th>Deadline</th>
                        <th>Project</th>
                        <th>Work Group Type</th>
                        <th>Zone</th>
                        <th>Building Type</th>
                        <th>Contractor</th>
                        <th>Amount($)</th>
                        <th>Deposit Amount($)</th>
                        <th>Paid Amount($)</th>
                        <th>Status</th>
                        <th style="width: 65px !important">Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

        </div>
    </div>
    <?php $__env->stopSection(); ?>
    <?php $__env->startSection('js'); ?>
        <script>
             function searching(){
                $("#datatable_constructor_payment").DataTable().draw(true);
            }
            function display_form_reject(obj)
            {
                var construction_id = $(obj).data('id');
                var created_at = $(obj).data('created_at');
                $.confirm({
                    title:'Are you sure ?',
                    content:''+ '<form action="" class="formName">' +
                                    '<div class="form-group" style="text-align:left;">' +
                                        '<label>Description</label>' +
                                        '<textarea type="text" placeholder="Description" class="description form-control"></textarea>' +
                                    '</div>' +
                                '</form>',
                    theme:'modern',
                    buttons:{
                        cancel:{
                            btnClass:'btn btn-warning',
                            text:'Close',
                            action:function () {

                            }
                        },
                        submit:{
                            btnClass:'btn btn-danger',
                            text:'reject',
                            action:function () {
                                var description = this.$content.find('.description').val();
                                window.location.replace('<?php echo e(route("financial.store_reject_cash_advance")); ?>?construction_id='+construction_id+"&&created_at="+created_at+'&description='+description);
                            }
                        },
                    },
                });
            }
            function display_form_approval(obj)
            {
                var construction_id = $(obj).data('id');
                var created_at = $(obj).data('created_at');
                $.confirm({
                    title:'Are you sure ?',
                    content:'',
                    theme:'modern',
                    buttons:{
                        cancel:{
                            btnClass:'btn btn-warning',
                            text:'Close',
                            action:function () {

                            }
                        },
                        submit:{
                            btnClass:'btn btn-success',
                            text:'Approve',
                            action:function () {
                                    window.location.replace('<?php echo e(route("financial.store_approve_cash_advance")); ?>?construction_id='+construction_id+"&&created_at="+created_at);
                            }
                        },
                    },
                });
            }
            function format (construction_id,created_at) {
                var table_detail="";
                var total_amount = 0;
                var total_amount_paid = 0;
                var total_amount_available = 0;
                var total_cash_advance = 0;
                var route="<?php echo e(route('financial-payment.get_index_detail')); ?>";
                $.ajax({
                url:route,
                type:"POST",
                async: false,
                dataType:"JSON",
                data:{
                    "_token":"<?php echo e(csrf_token()); ?>",
                    "construction_id":construction_id,
                    "created_at":created_at
                },
                success:function(data){
                    var tr =`
                                <tr><th colspan="9" style = 'text-align:center;'><u><h5 style='font-size:120%'>Task Detail</h5></u></th></tr>
                                <tr>
                                    <th>No</th>
                                    <th>Task</th>
                                    <th>Group Task</th>
                                    <th>Percentage Completed</th>
                                    <th>Amount($)</th>
                                    <th>Paid Amount</th>
                                    <th>Available Amount</th>
                                    <th>Request Cash Advance Amount</th>
                                    <th>Description</th>
                                </tr>
                            <tbody>`;
                    $.each(data,function(index,val){
                        total_amount += Number(val.fee_amount);
                        total_amount_paid += Number(val.fee_paid_amount);
                        total_amount_available += Number(Number(val.fee_amount)*Number(val.percentage_completed)/100 - Number(val.fee_paid_amount));
                        total_cash_advance += Number(val.cash_advance_amount);
                        var cash_advance_request_amount = 0;
                        tr += `
                            <tr id="${val.id}" class="work-tr-${val.id} work-tr">
                                <td>${index+1}</td>
                                <td>${val.name}</td>
                                <td>${val.title}</td>
                                <td>${val.percentage_completed	} %</td>
                                <td>${val.fee_amount} $</td>
                                <td>${val.fee_paid_amount} $</td>
                                <td>${(Number(val.fee_amount)*Number(val.percentage_completed)/100 - Number(val.fee_paid_amount))} $
                                    <input type="hidden"​ style="display:none;" value="${(Number(val.fee_amount)*Number(val.percentage_completed)/100 - Number(val.fee_paid_amount))}">
                                </td>
                                <td>${val.cash_advance_amount} $</td>
                                <td>${val.description==null?"":val.description}</td>
                            </tr>
                            `;
                    });
                    tr+=`</tbody>
                        <tfoot>
                            <tr>
                                <td colspan='4' style='text-align:right;'>Total</td>
                                <td>${total_amount} $</td>
                                <td>${total_amount_paid} $</td>
                                <td>${total_amount_available} $</td>
                                <td>${total_cash_advance} $</td>
                                <td></td>
                            </tr>
                        </tfoot>`;
                    table_detail= `<table id="${construction_id}" width="100%" class="table tb-list-payment-${construction_id}">${tr}</table>`;
                }
                });
                return table_detail;
            }
            $(document).ready(function() {
            
                var table = $('#datatable_constructor_payment').DataTable({
                    ordering: false,
                    "serverSide": true,
                    "scrollY":"600px",
                    "scrollCollapse": true,
                    "scrollX": true,
                    "lengthMenu": [
                    [20, 25, 50, 100, 500],
                    [20, 25, 50, 100, 500]
                ],
                    ajax: {
                        url:"<?php echo e(route('construction.approval_cash_advance_index')); ?>",
                        type:"GET",
                        data:function(d){
                            d.project_id = $("select[name=project]").val();
                            d.contractor_name = $("input[name=contractor_name]").val();
                        },
                    },
                    columns: [
                        {
                            "className": 'details-control',
                            "orderable": false,
                            "searchable": false,
                            "data": null,
                            "defaultContent": ' ',
                     },
                    {
                        data: 'DT_RowIndex'
                    },{
                        data: 'date'
                    }
                    ,{
                        data: 'start_work_date'
                    }
                    ,{
                        data: 'duration'
                    }
                    ,{
                        data: 'deadline'
                    }
                    ,{
                        data: 'project_name'
                    }
                    ,{
                        data: 'group_work_name'
                    }
                    ,{
                        data: 'block_name'
                    }
                    ,{
                        data: 'type_of_house'
                    }
                    , {
                        data: 'contractor_name'
                    },
                    {
                        data:'deposit_amount'
                    },
                    {
                        data: 'total_amount'
                    },
                    {
                        data: 'total_paid_amount'
                    },
                    {
                        data: 'status'
                    },
                    {
                        data: 'action'
                    } ],
                    "initComplete": function(settings, json) {
                        $('#main-spinner').hide();
                    }
                });
                $('#datatable_constructor_payment tbody').on('click', 'td.details-control', function () {
                    var tr = $(this).closest('tr');
                    var created_at = $(tr).data('created_at');
                    var construction_id = tr.attr("id");
                    var row = table.row( tr );
                    if( row.child.isShown() ) {
                        row.child.hide();
                            tr.removeClass('shown');
                        }
                    else {
                        row.child( format(construction_id,created_at) ).show();
                        tr.addClass('shown');
                    }
                });
                $.fn.dataTable.ext.errMode = 'throw';
                
            });
            $(document).on("focus",".date_picker",function(){
                $(this).datepicker({
                    dateFormat: 'dd-mm-yy',
                    changeMonth: true
                });
            });
            
        </script>
    <?php $__env->stopSection(); ?>
<?php echo $__env->make('adminlte::page', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>