@extends('layouts.main', ['title' => 'Clients | LOGISTICS'])
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a><span class="divider">/</span></li>
        <li><a>Clients Managments</a><span class="divider">/</span></li>
        <li class="active">Clients</li>
    </ul>
@stop
@section('title', 'Clients')
@section('msghead_menu')
    <li class="right btn-group">
        <button class="btn" onclick="openAdvancedSearch()" style="margin-right: 2px">
            <span class="icon-search"></span> &nbsp; FILTER
        </button>
        @if(\Illuminate\Support\Facades\Auth::user()->can('CREATE CLIENTS'))
            <button class="btn" style="margin-right: 2px" onclick="create('{{route('clients.create')}}')"><span
                        class="iconsweets-create"></span> NEW CLIENT
            </button>
        @endif
    </li>
@endsection
@section('contentinner')
    {{--*/  $show_action_column =  false /*--}}
    @if(\Illuminate\Support\Facades\Auth::user()->can('CLIENT PROFILE') OR \Illuminate\Support\Facades\Auth::user()->can('EDIT CLIENT') OR \Illuminate\Support\Facades\Auth::user()->can('DESTROY CLIENT'))
        {{--*/  $show_action_column =  true /*--}}
    @endif
    <div class="row-fluid">
        <div class="span12">

            <div id="advanced_search" class="sidenav">
                <a href="javascript:void(0)" class="closebtn" onclick="closeAdvancedSearch()">&times;
                </a>

                <div style="margin-bottom: 8px">
                    <form target="_blank" class="form-inline form-filter" method="get">

                        <label class="control-label" for="Category">Client</label>
                        <select name="client_id" width="200px" id="client_id" class="searchable_select">
                            <option value="">ALL</option>
                            @foreach($clients as $client)
                                <option value="{{$client->id}}">{{$client->name}}</option>
                            @endforeach
                        </select>
                        <button class="btn" style="" id="search-form">FILTER</button>
{{--                        <input class="btn" id="print_permits" type="submit" value="PRINT">--}}
                    </form>
                </div>
            </div>

            <table class="table table-bordered table-condensed" id="clients-list">
                <thead>
                <tr>
                    <th class="nosort"><input type="checkbox" class="checkall"/></th>
                    <th>Client Name</th>
                    {{--<th class="head1">Contacts</th>--}}
                    <th>Address</th>
                    <th>Email</th>
                    @if($show_action_column)
                        <th>Action</th>
                   @endif
                </tr>
                </thead>
            </table>
        </div><!--span12-->
    </div><!--row-fluid-->
    <script>
        jQuery(".searchable_select").select2();
        var mainDataTable = jQuery('#clients-list').DataTable({
            "oLanguage": {
                "sLoadingRecords": startSpinner(),
                "sZeroRecords": "No Clients records to display.",
                "sProcessing": "Please wait - loading records...",
                "sInfoEmpty": "No entries to display."
            },
            "initComplete": function (settings, json) {
                stopSpinner();
            },
            ajax: {
                url: '{{route('clients.data-table.index')}}',
                data: function (d) {
                    d.client_id = jQuery('#client_id').val();
                }
            },
            scrollCollapse: true,
            "sPaginationType": "full_numbers",
            processing: true,
            serverSide: true,
            "order": [[ 1, "desc" ]],
            "columns": [
                {data: 'checkbox'},
                {"class": "link", data: 'name'},
                // {"class": "link", data: 'phone_number'},
                {"class": "link", data: 'address'},
                {"class": "link", data: 'email'},
                @if($show_action_column)
                    {"class": "link", data: 'action'}
                @endif
            ],
            "bStateSave": true
        });
        jQuery('#search-form').on('click', function (e) {
            searchTable(e);
        });
        function searchTable(e) {
            mainDataTable.draw();
            e.preventDefault();
        }
        function openAdvancedSearch() {
            jQuery("#advanced_search").css({
                "width": 230,
                'padding-left': 30
            });
        }
        /* Set the width of the side navigation to 0 */
        function closeAdvancedSearch() {
            jQuery("#advanced_search").css({
                "width": 0,
                'padding-left': 0
            });
        }
    </script>
@stop