@inject('request', 'Illuminate\Http\Request')
@extends('layouts.iconbar')

@section('title')
Colours
@endsection

@section('breadcrumbs')
{{ Breadcrumbs::render(\Request::route()->getName()) }}
@endsection

@section('create-button')
@can('customer_groups_create')
<a href="{{ route('admin.colours.create') }} " id="createGroup" onclick="getAddEditShow(event)" class="btn btn-info waves-effect waves-classic">
    <i class="icon md-plus" aria-hidden="true"></i> New Colour
</a>
@endcan
@endsection

@section('content')
<div class="page-content">
    <!-- Panel -->
    <div class="panel">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-6">
                    <table class="table table-hover dataTable table-striped w-full" id="colours-table">
                        <thead>
                            <tr>
                                <th>@lang('global.colours.fields.colour')</th>
                                <th>@lang('global.colours.fields.colour_range')</th>
                                <th>&nbsp;</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="col-md-6 add-edit-view">
                    @include('admin.colours.create')
                </div>
            </div>
        </div>
    </div> <!-- End Panel -->
</div>

@stop


@section('javascript')
<script>
    jQuery(function(){
        window.suppliers_table = jQuery('#colours-table').DataTable({
            "dom": 'frtip',
            "searching": false,
            "info": true,
            "ordering": true,
            "destroy":true,
            processing: true,
            serverSide: true,
            oLanguage: {
                sProcessing: "<i class='fa fa-fw fa-spin fa-spinner' style='font-size:25px;'></i>"
            },
            ajax: {
                url : '{{url("/admin/colours/data")}}',
                type:'get',
                "dataSrc": function (json) {
                    return json.data;
                },
            },
            columns: [
            { data: 'colour', name: 'colour'},
            { data: 'inventory.name', name: 'inventory.name'},
            { data: 'actions', name: 'actions', searchable: false, orderable: false, class: 'ce'},
            ]
        });
    });

    function getAddEditShow(event){
        event.preventDefault();
        $.ajax({
            url: event.target.href,
            type: 'get',
            beforeSend: function() {
                // initiateBlockUi();
            },
            complete: function() {
                // stopBlockUi();
            },
            success: function(data) {
                if (data.success) {
                    $(".add-edit-view").html(data.html);
                }
            }
        });
    }
       
   
</script>
@endsection