@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="#">External Job Card Management</a> <span class="divider">/</span></li>
        <li><a href="#">External Jobs Cards</a> <span class="divider"></span></li>
    </ul>
@stop
@section('title')
    External 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="Category">Date From</label>--}}
{{--                        <input id="date_from" class="span12" 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="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="contractor_id">Contractor</label>
                        <select name="select" width="100%" id="contractor_id" class="searchable_select">
                            <option value="">All</option>
                            @foreach($contractors as $contractor)
                                <option value="{{$contractor->id}}">{{$contractor->name}}</option>
                            @endforeach
                        </select>


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

                    </form>

                </div>
                <br/>

                <table class="table table-bordered table-condensed logistics_table"
                       id="external_jobs_cards_list">
                    <thead>
                    <tr>
                        <th style="width: 05%">S/N:</th>
                        <th style="width: 10%">Job Card No:</th>
                        <th style="width: 15%">Date:</th>
                        <th style="width: 15%">Contractor:</th>
                        <th style="width: 15%">Created By:</th>
                        <th style="width: 30%">Remarks :</th>
                        <th style="width: 10%"></th>
                    </tr>
                    </thead>
                </table>
            </div><!--tab-pane-->
        </div>
    </div>
    
        <form method="post" id="attachment_form" enctype="multipart/form-data" style="display:none">
        <input type="file" name="file">
    </form>

    <script>

        jQuery('.searchable_select').select2();
        var attachment_form = $('#attachment_form');
        var file_field = attachment_form.find('input:file');
        function uploadExternalJobCardPrintout(url) {
            attachment_form.attr('action', url);
            file_field.trigger('click');
            file_field.change(function () {
                if (file_field.val()) {
                    $.ajax({
                        url: attachment_form.attr('action'),
                        data: new FormData($("#attachment_form")[0]),
                        dataType: 'json',
                        async: false,
                        type: 'post',
                        processData: false,
                        contentType: false,
                        beforeSend: function () {
                            startSpinner()
                        },
                        success: function (data) {
                            onAjaxSuccess(data);
                            if (data.state == 'Done') mainDataTable.draw();
                        },
                        error: function (xhr, textStatus, error) {
                            onAjaxError(xhr, textStatus, error)
                        },
                        complete: function () {
                            stopSpinner();
                            file_field.val(null)
                        }
                    });
                }
            });
        }


        var oTable = jQuery('#external_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 external job card records to display.",
                    "sProcessing": "Please wait - loading records...",
                    "sInfoEmpty": "No entries to display."
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                ajax: {
                    url: '{{route('external-jobs-cards.datatable')}}',
                    data: function (d) {
                        // d.job_card_id = $('#job_card_id').val();
                        d.contractor_id = $('#contractor_id').val();
                        d.truck_id = $('#truck_id').val();
                        // d.date_from = $('#date_from').val();
                    }
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order":[[4,'dsc']],
                "columns": [

                    {"class": "link", data: 'id'},
                    {"class": "link", data: 'card_no'},
                    {"class": "link", data: 'date'},
                    {"class": "link", data: 'contractor'},
                    {"class": "link", data: 'created_by'},
                    {"class": "link", data: 'remarks'},
                    {"class": "link", data: 'action'}
                ],
                "bStateSave": true
            });

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

            oTable.draw();
        });

    </script>
@stop