 @extends('adminlte::page') @section('content')
<?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="#">Set Up Information</a></li>
            <li><a href="#">Product List</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>Product 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>
                        @can('Construction-Product-Create')
                            <a class="button_sm button_primary" href="{{route('construction-product.create')}}"><span class="fa fa-plus"></span>  Create New</a>
                        @endcan
                    </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 >Name :</strong>
                        {!! Form::text('product_name',null, array('class' => 'form-control')) !!}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <strong >Unit :</strong>
                        {!! Form::select('product_unit',$units,null, array('class' => 'form-control select2')) !!}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <strong >Category :</strong>
                        {!! Form::select('category',$categories,null, array('class' => 'form-control select2')) !!}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <strong >Sub Category :</strong>
                        {!! Form::select('sub_category',$sub_categories,null, array('class' => 'form-control select2')) !!}
                    </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_product" width="100%" class="table table-striped table-bordered table-hover nowrap">
                <thead>
                    <tr>
                        <th>NO</th>
                        <th>Image</th>
                        <th>Code</th>
                        <th>Name</th>
                        <th>Model</th>
                        <th>Category</th>
                        <th>Sub Category</th>
                        <th>Current Price ( Per Unit )</th>
                        <th>Unit</th>
                        <th>Description</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                   
                </tbody>
            </table>

        </div>
    </div>
    @endsection
    @section('js')
    <script type="text/javascript">
            function show_image(obj){
                $("#main-spinner").show();
                var product_id = $(obj).closest('tr').attr('id');
                var route = "{{ route('show_image_product',':id') }}";
                route = route.replace(':id',product_id);
                $.ajax({
                    url:route,
                    type:"GET",
                    dataType:"JSON",
                    success:function(data){
                        var content = ``;
                        $.each(data,function(index,value){
                            content +=`<div class='col-sm-12' style='width:400px;height:300px;float:left;'>
                                                <img src='${value}'>
                                            </div>`;
                        });
                        $.confirm({
                            title:'',
                            content:content,
                            useBootstrap: false,
                            boxWidth: '50%',    
                            theme: 'modern',
                            buttons:{
                                cancel:{
                                    btnClass:'btn btn-warning',
                                    text:'Cancel'
                                }
                            },
                        });
                    },
                    complete:function(){
                        $("#main-spinner").hide();
                    }
                });
            }
            $(document).ready(function() {
                $('#main-spinner').show();
                $('#datatable_product').DataTable({
                    ordering: false,
                    "serverSide": true,
                    "scrollY":"600px",
                    "scrollCollapse": true,
                    "lengthMenu": [
                    [20, 25, 50, 100, 500],
                    [20, 25, 50, 100, 500]
                ],
                    ajax:{
                        url:"{{ route('data.product') }}",
                        type:"GET",
                        data:function(d){
                            var product_name = $("input[name=product_name]").val();
                            var product_unit = $("select[name=product_unit]").val();
                            var category = $("select[name=category]").val();
                            var sub_category = $("select[name=sub_category]").val();
                            d.product_name = product_name;
                            d.product_unit = product_unit;
                            d.category = category;
                            d.sub_category = sub_category;
                        }
                    },
                    columns: [{
                        data: 'DT_RowIndex'
                    },
                    {
                        data: 'image'
                    }, 
                     
                    {
                        data: 'code'
                    },
                    {
                        data: 'name'
                    }, 
                     
                    {
                        data: 'model'
                    },
                    {
                        data: 'category'
                    }, {
                        data: 'brand'
                    }
                    ,{
                        data:'unit_price'
                    }
                    , {
                        data: 'unit'
                    }
                    ,{
                        data: 'description'
                    }
                    , {
                        data: 'action'
                    }, ],
                    "initComplete": function(settings, json) {
                        $('#main-spinner').hide();
                    }
                });

                $.fn.dataTable.ext.errMode = 'throw';
            });
            function searching(){
                $('#datatable_product').DataTable().draw(true);
            }
    </script>
    @endsection