@extends('adminlte::page') @section('content')
    @include('administrator.construction.warehouse.create')
    @include('administrator.construction.warehouse.edit')
    <?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="#">Request BOQ</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>Financial Request BOQ</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>
                        <a class="button_sm button_primary" href="{{ route('construction-boq.create') }}"
                           data-toggle="modal"><span class="fa fa-plus"></span> Create New</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 >Prepare by :</strong>
                        {!! Form::text('prepare_by',null, array('class' => 'form-control')) !!}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <strong >Title :</strong>
                        {!! Form::text('title',null, array('class' => 'form-control')) !!}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <strong >Project :</strong>
                        {!! Form::select('project',$projects,null, array('class' => 'form-control select2')) !!}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <strong >Building Type :</strong>
                        {!! Form::text('building_type',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_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>Prepared By</th>
                    <th>Title</th>
                    <th>Status</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");
        });
        let product = '{!! json_encode($products) !!}';
        $(document).ready(function () {
            if (product == "") {
                $('#main-spinner').show();
            }

            let 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: {
                    url:"{{ route('construction-financial-approval-boq.index') }}",
                    type:"GET",
                    data:function(d){
                        d.prepare_by = $("input[name=prepare_by]").val();
                        d.title = $("input[name=title]").val();
                        d.project = $("select[name=project]").val();
                        d.building_type = $("input[name=building_type]").val();
                    }
                },
                columns: [
                    {
                        data: 'DT_RowIndex'
                    }, {
                        data: 'date'
                    }
                    , {
                        data: 'building_type'
                    }
                    , {
                        data: 'project_name'
                    }
                    , {
                        data: 'prepared_by'
                    }
                    , {
                        data: 'title'
                    }
                    , {
                        data: 'status'
                    }, {
                        data: 'action'
                    },],
                "initComplete": function (settings, json) {
                    $('#main-spinner').hide();
                }
            });

            $.fn.dataTable.ext.errMode = 'throw';
        });

        $(document).ready(function () {
            $(document).on('click','.boq_approval',function () {
                let status = $(this).data('status');
                let id = $(this).data('id');
                let text = '';
                let btn = '';
                let 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>';
                if(status === 1){
                    content = '';
                }
                if(status===1){
                    text = 'Approve';
                    btn = 'success';
                }else{
                    text = 'Reject';
                    btn = 'danger';
                }
                $.confirm({
                    title:'Are you sure ?',
                    content:''+content,
                    theme:'modern',
                    buttons:{
                        cancel:{
                            btnClass:'btn btn-warning',
                            text:'Cancel',
                            action:function () {

                            }
                        },
                        submit:{
                            btnClass:'btn btn-'+btn,
                            text:text,
                            action:function () {
                                var description = this.$content.find('.description').val();
                                if(status === 1)
                                {
                                    window.location.replace('{{route('construction-financial-approval-update')}}?status='+status+'&r_id='+id);
                                }else{
                                    window.location.replace('{{route('construction-financial-approval-update')}}?status='+status+'&r_id='+id+'&description='+description);
                                }
                            }
                        },
                    },
                });
            });
        });
        function searching(){
            $("#datatable_boq_index").DataTable().draw(true);
        }
    </script>
@endsection