@extends('layouts.main_without_top_button')
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="#">Job Card Management</a> <span class="divider">/</span></li>
        <li><a href="#">Closed Jobs Cards</a> <span class="divider"></span></li>
    </ul>
@stop
@section('title')
    Closed Jobs Cards
@stop
@section('contentinner')

    <div class="tabbable">
        @include('workshops.jobcards.includes.tabs')
        <div class="tab-content">
            <div id="glyphs" class="tab-pane active">
                <div class="mediamgr_category">
                    <ul>

                        <li class="pull-right">
                            <button class="btn  btn-small" onclick="openAdvancedSearch('jobs_cards_filters')" style="margin-left: 2px">
                                <span class="icon-search"></span> &nbsp; FILTER
                            </button>
                        </li>
                    </ul>
                </div>
                <br/><br/>
                <div id="jobs_cards_filters" class="sidenav">
                    <a href="javascript:void(0)" class="closebtn"
                       onclick="closeAdvancedSearch('jobs_cards_filters')">&times;</a>


                    <form target="_blank" class="form-inline form-filter" method="get"
                          action="#">

                        <label class="control-label" for="jobs_cards">Job Card No #</label>
                        <input id="job_card_id" width="100%" class="span3" value="">
                        <label class="control-label" for="truck_id">Truck</label>
                        <select name="select" width="100%" id="truck_id" class="searchable_select">
                            <option value="">All</option>
                            @foreach($trucks as $truck)
                                <option value="{{$truck->id}}">{{$truck->registration_number}}</option>
                            @endforeach
                        </select>
                        <label class="control-label" for="truck_id">Opened By</label>
                        <select name="select" width="100%" id="user_id" class="searchable_select">
                            <option value="">All</option>
                            @foreach($creators as $creator)
                                <option value="{{$creator->user_id}}">{{$creator->created_by}}</option>
                            @endforeach
                        </select>
                        <label class="control-label" for="priority">Priority</label>
                        <select name="select" width="100%" id="priority" class="searchable_select">
                            <option value="">All</option>
                            <option value="HIGH">HIGH</option>
                            <option value=MEDIUM">MEDIUM</option>
                            <option value="LOW">LOW</option>
                        </select>


                        <button class="btn" style="" id="filter_jobs_cards">FILTER</button>

                    </form>

                </div>
                <br/>

                <table class="table table-bordered table-condensed logistics_table"
                       id="closed_jobs_cards_list">
                    <thead>
                    <tr>
                        <th style="width: 05%">Card No:</th>
                        <th style="width: 10%">Open Date:</th>
                        <th style="width: 10%">Closed Date:</th>
                        <th style="width: 10%">Vehicle No:</th>
                        <th style="width: 10%">Priority:</th>
                        <th style="width: 08%">Odometer:</th>
                        <th style="width: 10%">Trips:</th>
                        <th style="width: 12%">Assignee:</th>
                        <th style="width: 25%">Description</th>
                        <th style="width: 12%">Closed By :</th>
                        <th style="width: 03%"></th>
                    </tr>
                    </thead>
                </table>
            </div><!--tab-pane-->
        </div>
    </div>

    <script>

        jQuery('.searchable_select').select2();
        var oTable = jQuery('#closed_jobs_cards_list').on('error.dt', function (e, settings, techNote, message) {
            console.log('An error has been reported by DataTables: ', message);
            $.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
            stopSpinner();
        })
            .DataTable({
                "oLanguage": {
                    "sLoadingRecords": startSpinner(),
                    "sZeroRecords": "No any job card records to display.",
                    "sProcessing": "Please wait - loading records...",
                    "sInfoEmpty": "No entries to display."
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                ajax: {
                    url: '{{route('jobs-cards.closeddatatable')}}',
                    data: function (d) {
                        d.job_card_id = $('#job_card_id').val();
                        d.priority = $('#priority').val();
                        d.truck_id = $('#truck_id').val();
                        d.user_id = $('#user_id').val();
                    }
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order":[[0,'asc']],
                "columns": [

                    {"class": "link", data: 'job_card_number'},
                    {"class": "link", data: 'opened_at'},
                    {"class": "link", data: 'closed_at'},
                    {"class": "link", data: 'truck'},
                    {"class": "link", data: 'priority'},
                    {"class": "link", data: 'odometer'},
                    {"class": "link", data: 'trips'},
                    {"class": "link", data: 'assignee'},
                    {"class": "link", data: 'remark'},
                    {"class": "link", data: 'created_by'},
                    {"class": "link", data: 'action'}
                ],
                "bStateSave": true
            });

        $('#filter_jobs_cards').on('click', function (e) {
            e.preventDefault();

            oTable.draw();
        });


    </script>
@stop