@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="{{route('workshops.dashboard')}}">Workshops</a> <span class="divider">/</span></li>
        <li class="active">Jobs Cards</li>
    </ul>
@stop
@section('title')
    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>
                        @if(auth()->user()->can('CREATE EXTERNAL JOB CARD'))
                        <button style="margin: 4px;" type="button" id="new_external_job_card_button" class=" btn btn-lg">
                    <span class="icon-plus"></span> External Job Card </button>
                    @endif
                    </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="Category">Date From</label>
                    <input id="date_from" class="span12 date_picker" value="">
                    <label class="control-label" for="Category">Date To</label>
                    <input id="date_to" class="span12 date_picker" value="">
                    <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="reference_number">Reference #</label>
                    <input id="reference_number" 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="jobs_cards_list">
                    <thead>
                    <tr>
                        <th style="width: 02%" class="nosort"></th>
                        <th style="width: 6%"> No:</th>
                        <th style="width: 8%">Date:</th>
                        <th style="width: 8%">Vehicle No:</th>
                        <th style="width: 07%">Odometer:</th>
                        <th style="width: 17%">Reference:</th>
                        <th style="width: 5%">Priority:</th>
                        {{--<th style="width: 05%">Trips:</th>--}}
                        <th style="width: 15%">Opened By</th>
                        <th style="width: 15%">Assignee:</th>
                        <th style="width: 7%">Time Elapsed:</th>
                        <th style="width: 10%"></th>
                    </tr>
                    </thead>
                </table>
            </div><!--tab-pane-->
        </div>
    </div>

    <script>
    jQuery('.searchable_select').select2();
    jQuery('.date_picker').datepicker({ dateFormat: 'yy-mm-dd' }).val();

        var oTable = jQuery('#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('workshops.jobs_cards.datatable')}}',
                    data: function (d) {
                            d.job_card_id = $('#job_card_id').val();
                            d.priority = $('#priority').val();
                            d.reference_number = $('#reference_number').val();
                            d.truck_id = $('#truck_id').val();
                            d.user_id = $('#user_id').val();
                            d.date_from = $('#date_from').val();
                            d.date_to = $('#date_to').val();
                        }
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order":[[2,'asc']],
                "columns": [
                    {data: 'checkbox'},
                    {"class": "link", data: 'job_card_id'},
                    {"class": "link", data: 'date'},
                    {"class": "link", data: 'truck'},
                    {"class": "link", data: 'odometer'},
                    {"class": "link", data: 'reference_number'},
                    {"class": "link", data: 'priority'},
                    // {"class": "link", data: 'trips'},
                    {"class": "link", data: 'created_by'},
                    {"class": "link", data: 'assignee'},
                    {"class": "link", data: 'time_elapsed'},
                    {"class": "link", data: 'action'}
                ],
                "bStateSave": true
            });

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

            oTable.draw();
        });

                jQuery('#new_external_job_card_button').each(function () {
            if (jQuery(this).attr('initialized') != 'true') {
                jQuery(this).click(function () {
                    generateExternalJobCard();
                });
                jQuery(this).attr('initialized', 'true');
            }
        });

        function generateExternalJobCard() {

            var job_card_ids = new Array();
            jQuery('.job_card_id').each(function () {
                if (jQuery(this).is(':checked')) {
                    job_card_ids.push(jQuery(this).val());

                }
            });
            if(job_card_ids.length == 1) {

                jQuery.ajax({
                    type: "GET",
                    cache: false,
                    url: "{{route('external-jobs-cards.create')}}",
                    data: {
                        job_card_ids: job_card_ids,
                    },

                    beforeSend: function () {
                        startSpinner();
                    },
                    success: function (data) {
                        onAjaxSuccess(data, 'POST');
                    },
                    error: function (xhr, textStatus, error) {
                        onAjaxError(xhr, textStatus, error);
                    },
                    complete: function () {
                        stopSpinner();
                    }
                });

            } else {
                logistics_alert('PLEASE CHECK ONLY ONE JOB CARD TO CONTINUE', 'SELECTION DIALOG');
                return;
            }



            return false;
        }

    </script>
@stop