@extends('backend.includes.panel')

@section('page_css')
<link href="{{ BE_URL.'plugins/bootstrap-switch/bootstrap-switch.min.css' }}" rel="stylesheet">
<link href="{{ BE_URL.'plugins/sweetalert/sweetalert.css' }}" rel="stylesheet" type="text/css">
<link href="{{ BE_URL.'plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css'}}" rel="stylesheet">
@stop

@section('page_title','Categorys Report')

@section('inner_page_link')
    <li class="breadcrumb-item active">Company Categories Report</li>
@stop

@section('main_content') 
	<div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Searching Filters</h4>
                    <form method="POST" action="{{ route('export.report.categories') }}">
                        <div class="row">
                            @csrf
                            @if($userData->role_id == 1)
                            <div class="form-group col-md-3 m-b-40" >
                                <label class="form-control-label" for="name">Company</label>
                                {{ Form::select('company_id',$companies,null,['class'=>'form-control select2','id'=>'company','placeholder' => 'Select Company']) }}
                            </div>
                            @else
                                {{ Form::hidden('company_id',($userData->role_id == 2 ? $userData->id : $userData->parent_user_id),['id'=>'company']) }}                            
                            @endif
                            <div class="form-group col-md-3" >
                                <label class="form-control-label">Actions</label>
                                <div>
                                    <button type="button" {{ ($userData->role_id != 1 ? 'style=display:none;' : '')  }} class="btn btn-success waves-effect waves-light m-r-10" onclick="reloadCategorys();">Search</button>
                                    <button type="submit" class="btn btn-warning waves-effect waves-light m-r-10">Export</button>
                                    <button type="button" class="btn btn-warning waves-effect waves-light m-r-10 clear-filter">Clear Filter</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Categories</h4>
                    <div class="table-responsive m-t-10">
                        <table id="categories-report-table" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>{{'#'}}</th>
                                    <th>Category</th>
                                    <th>Code</th>
                                    <th>Company</th>
                                    <th>Statys</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('page_script')
<script src="{{ BE_URL.'plugins/bootstrap-switch/bootstrap-switch.min.js' }}"></script>
<script src="{{ BE_URL.'plugins/datatables/jquery.dataTables.min.js' }}"></script>
<script src="{{ BE_URL.'plugins/bootstrap-datepicker/bootstrap-datepicker.min.js'}}"></script>
<script src="{{ BE_URL.'plugins/moment/moment.js'}}"></script>
<script src="{{ BE_URL.'plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js'}}"></script> 
<script src="{{ BE_URL.'plugins/sweetalert/sweetalert.min.js' }}"></script>


<script type="text/javascript">

        $('#start_date').bootstrapMaterialDatePicker({
            format: 'DD/MM/YYYY',
            maxDate: new Date(),
            time: false
        }).on('change', function (e, date) {
            $('#end_date').bootstrapMaterialDatePicker('setMinDate',$('#start_date').val());
        });

        $('#end_date').bootstrapMaterialDatePicker({
            format: 'DD/MM/YYYY',
            maxDate: new Date(),
            time: false
        });       
       
        var dataTable = null;

        function reloadCategorys(){
            dataTable.draw();
        }

        function setBuilderData(){
            return {'company':$('#company').val()}
        }

        function setDatatable(){

            dataTable = $('#categories-report-table').DataTable({
                aaSorting: [],
                processing: true,
                serverSide: true,
                ajax: {
                    "url": ' {{ route("filter.report.categories") }}',
                    "type": "POST",
                    "data": function(data){
                        data.company_id = $('#company').val();
                        data.start_date = $('#start_date').val();
                        data.end_date = $('#end_date').val();
                    },
                },
                columns: [
                    {data: 'id', name: 'id',
                        render: function (ata, type, row) {
                            return '';
                        }
                    },
                    {data: 'name', name: 'name'},
                    {data: 'code', name: 'code'},
                    {data: 'company_name', name: 'company_name'},
                    {data: 'category_status', name: 'category_status'},
                ],
                "fnCreatedRow": function (row, data, index) {
                    $('td', row).eq(0).html(index + 1);
                },
                aoColumnDefs: [
                    {
                        bSortable: false,
                        aTargets: [-1]
                    }
                ],
                "oLanguage": {
                    "sEmptyTable": "No Categories Available."
                }
            });
        }

        setDatatable();

        function reloadData(){
            dataTable.draw();
        }

        $(document).on('click','.clear-filter',function(){
            $(this).closest('form')[0].reset();
            $('.select2').change();
            reloadData();
        });

</script>
@stop