 @extends('adminlte::page') @section('content')
<?php Fun::lang()?>
<script>
    function searching(){
        $("#datatable_item").DataTable().draw(true);
    }
</script>
    <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="#">Operation</a></li>
                <li><a href="#">Manage Product</a></li>
                <li><a href="#">Item</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>Items</h3>
                        </div>
                    </div>
                    <div class="pull-right">
                        @can('Item-House-Create')
                        <a class="button_sm button_primary" href="{{route('items.create')}}"><span class="fa fa-plus"></span>  Create House</a>
                        @endcan
                        <a class="button_sm button_info" href="{{route('items.create_condo')}}"><span class="fa fa-plus"></span>  Create Condo</a>
                        {{--@can('Item-Land-Create')--}}
                        {{--<a class="button_sm button_success" href="{{route('items-land.create')}}"><span class="fa fa-plus"></span>  Create Land</a>--}}
                        {{--@endcan--}}
                    </div>
                    <div class="pull-right">
                        @can('Item-Edit')
                        <a class="button_sm button_warning" href="{{route('items.edit-multiple')}}"><span class="fa fa-edit"></span>  Edit Multiple Item</a>
                        @endcan
                    </div>
                    <div class="pull-right">
                        @can('Item-Commission-Edit')
                        <a class="button_sm button_info" href="{{route('items.edit-multiple-commission')}}"><span class="fa fa-edit"></span>  Update Commission</a>
                        @endcan
                    </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 class="pull-right">--}}
                        {{--<a href="{{route('transfer_item')}}" class="button_sm button_warning"><span class="fa fa-send"></span> Transfer Item</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>
                        {!! Form::select('project_id',$projects,null, array('class' => 'form-control select2','multiple')) !!}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <strong >Category :</strong>
                        {!! Form::select('category_id',$categories,null, array('class' => 'form-control select2','multiple')) !!}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <strong >Sub Category :</strong>
                        {!! Form::select('sub_category_id',$sub_categories,null, array('class' => 'form-control select2','multiple')) !!}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <strong >Item Group :</strong>
                        {!! Form::select('item_group_id',$item_group,null, array('class' => 'form-control select2','multiple')) !!}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <strong >Item Zone :</strong>
                        {!! Form::select('item_zone_id',$item_zone,null, array('class' => 'form-control select2','multiple')) !!}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <strong >Item Name :</strong>
                        {!! Form::text('item_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_item" class="table table-striped table-bordered table-hover nowrap">
                <thead>
                    <tr>
                        <th>NO</th>
                        <th>Category</th>
                        <th>Sub Category</th>
                        <th>Project</th>
                        <th>Item Group</th>
                        <th>Item Zone</th>
                        <th>Item Name</th>
                        <th>Real Estate Number</th>
                        <th>House Size</th>
                        <th>Land Size</th>
                        <th>Item Cost</th>
                        <th>Sale Price</th>
                        <th>Commission Amount</th>
                        <th>Commission</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    @include('administrator.items.confirm-delete')

    @endsection
    @section('js')

    <script type="text/javascript">
        $(document).ready(function() {
            $('#main-spinner').show();
            $('#datatable_item').DataTable({
                ordering: true,
                serverSide: true,
                processing: true,
                "scrollY":        "600px",
                "scrollCollapse": true,
                lengthMenu: [[20, 30, 50, 100,200,500,1000,-1], [20, 30, 50, 100,200,500,1000,"All"]],
                ajax: {
                    url:"{{ route('datatable.get_items') }}",
                    type:"GET",
                    data: function(d){
                        d.project_id = $("select[name=project_id]").val();
                        d.category_id = $("select[name=category_id]").val();
                        d.sub_category_id = $("select[name=sub_category_id]").val();
                        d.item_group_id = $("select[name=item_group_id]").val();
                        d.item_zone_id = $("select[name=item_zone_id]").val();
                        d.item_name = $('input[name=item_name]').val();
                    },
                },
                columns:
                [
                    {data: 'DT_RowIndex','searchable': false},
                    {data: 'category_name'},
                    {data: 'sub_category_name'},
                    {data: 'project_name'},
                    {data: 'item_group_name'},
                    {data: 'item_zone_name'},
                    {data: 'item_house'},
                    {data: 'item_title_number'},
                    {data: 'item_size_house'},
                    {data: 'item_size_land'},
                    {data: 'item_cost'},
                    {data: 'item_price'},
                    {data: 'commission_amount','searchable': false},
                    {data: 'commission','searchable': false},
                    {data: 'available','searchable': false},
                    {data: 'action','searchable': false},
                ],

                "initComplete": function(settings, json) {
                    $('#main-spinner').hide();
                }
            });

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

            $(document).on('click','.confirm_delete',function(){
                var id = $(this).data('id');
                $('#delete-id').val(id);
                $('#form-delete').modal('show');
            });
            $('#form-delete-item').on('submit',function (e) {
                e.preventDefault();
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                var form = $('#form-delete-item').serialize();
                $('#main-spinner').show();
                $.ajax({
                    url:"{{route('items_delete')}}",
                    type:"POST",
                    dataType:"JSON",
                    data:form,
                    success:function (data) {
                        $('#main-spinner').hide();
                        $('#form-delete').modal('hide');
                        $('#datatable_item').DataTable().ajax.reload();
                        $('#delete-success').show();
                        $('#p-text').html(data.message);
                        $('#confirm-delete').removeAttr('disabled');
                    },
                    error:function (err) {
                        console.log(err);
                    }
                });
            });
        });
    </script>
    @endsection
