@extends('adminlte::page') @section('content')
<?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="#">Other Expense</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>Other Expense</h3>
                        </div>
                    </div>
                    <div class="pull-right">
                        <a class="button_sm button_primary" href="{{ route('budget_construction.add_other_expense') }}" data-toggle="modal"><span class="fa fa-plus"></span>  Create New</a>
                    </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>Project</th>
                        <th>Zone</th>
                        <th>Total Amount</th>
                        <th>Description</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

        </div>
    </div>
    @endsection
    @section('js')
    <script type="text/javascript">
        $(document).ready(function() {
            $('#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.list_other_expense') }}",
                columns: [
                    {
                        data: 'DT_RowIndex',searchable:false,orderable:false
                    },{
                        data: 'date'
                    }
                    ,{
                        data: 'project_name',name : "nso007_project_stock.project_name"
                    }
                    ,{
                        data: 'zone_name',name : "nso007_zone_construction.name"
                    }
                    ,{
                        data: 'total_amount',searchable:false,orderable:false
                    }
                    ,{
                        data: 'description'
                    }
                    ,{
                        data: 'action',searchable:false,orderable:false
                    }
                ],
                "initComplete": function(settings, json) {
                    $('#main-spinner').hide();
                }
            });
    
            $.fn.dataTable.ext.errMode = 'throw';
        });
        
    </script>
    @endsection