@extends('layouts.main_without_top_button')
@section('title')
    Permits List
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">Permits List</li>
    </ul>
@stop
@section('contentinner')
    <style>
        .form-filter {
            border-top: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;
            color: #0e4722;
            font-size: 2.4em;
            line-height: 1.4em;
            font-weight: normal;
            text-align: center;
            padding-bottom: 4px;
        }
    </style>
    <div class="row-fluid">
        <div class="span12">
            <div style="margin-bottom: 8px">
                <form target="_blank" class="form-inline form-filter" method="get"
                      action="{{route('permits.print')}}">
                    <label class="control-label filter_row" for="Category">Permit Status</label>
                    <select name="select" width="200px" id="select" class="filter_row searchable_select">
                        <option value="permit_all">All</option>
                        <option value="active_all">All Active</option>
                        <option value="expired_all">All Expired</option>
                        <option value="startDateBetween">Issue Date Between</option>
                        @foreach($permits as $permit)
                            <option value="permit_{{$permit->id}}">{{$permit->name}} Only</option>
                        @endforeach
                        @foreach($permits as $permit)
                            <option value="expired_{{$permit->id}}">{{$permit->name}} Expired Only</option>
                        @endforeach
                        @foreach($permits as $permit)
                            <option value="active_{{$permit->id}}">{{$permit->name}} Active Only</option>
                        @endforeach
                    </select>

                    <label class="control-label filter_row" for="Category">Vehicle</label>
                    <select name="select_vehicle" width="100px" id="select_vehicle" class="filter_row searchable_select">
                        <option value="all_all">All</option>
                        @foreach($vehicles as $vehicle)
                            <option value="truck_{{$vehicle->id}}">{{$vehicle->registration_number}}</option>
                        @endforeach
                        @foreach($trailers as $trailer)
                            <option value="trailer_{{$trailer->id}}">{{$trailer->registration_number}}</option>
                        @endforeach
                    </select>

                            <span class="hide" id="date_picker">
                            <label class="control-label" for="Category">Date From</label>
                            <input type="text" name="date_from" id="starting_date" class="span2 permit_date_picker"
                                   value="">
                            <label class="control-label" for="Category">Date to</label>
                            <input type="text" name="date_to" id="expire_date" class="span2 permit_date_picker">
                                                        <select name="select_issued_between" width="150px">
                                                            <option value="permit_all">All</option>
                                                            @foreach($permits as $permit)
                                                                <option value="{{$permit->id}}">{{$permit->name}}
                                                                    Only
                                                                </option>
                                                            @endforeach
                                                        </select>
                            </span>
                    <button class="btn filter_row" style="" id="search-form">
                        FILTER
                    </button>
                    <input class="btn filter_row" id="print_permits" type="submit" value="PRINT">

                    <div style="display:none" id="renew_permit">
                        <label for="permit_id">Permit Name</label>

                        <select data-placeholder="Choose a On-Route Cost..." style="width:280px"
                                name="permit_id" id="renew_permit_id"
                                tabindex="2"  autocomplete="off">
                            <option value="" selected></option>
                            @foreach($permits as $permit)
                                <option style="color:black" value="{{$permit->id}}">{{$permit->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </form>
            </div>
            <div class="clearfix"></div>
            <table class="table table-bordered table-condensed" id="permit-list">
                <thead>
                <tr>
                    <th class="nosort" style="width: 10px"><input type="checkbox" class="checkall"/></th>
                    <th>Registration N0.</th>
                    <th>Permit No</th>
                    <th>Permit Name</th>
                    <th>Start Date</th>
                    <th>Expire Date</th>
                    <th>Currency</th>
                    <th>Cost</th>
                    <th>Status</th>
                    <th>Description</th>
                    {{--<th>Action</th>--}}
                </tr>
                </thead>
            </table>
        </div><!--span12-->
    </div>
    <script>
        jQuery(function () {
            jQuery('.searchable_select').select2();
            var oTable = jQuery('#permit-list').dataTable({
                "oLanguage": {
                    "sLoadingRecords": "Please wait - loading records...",
                    "sZeroRecords": "No records to display.",
                    "sProcessing": "Please wait - loading records...",
                    "sInfoEmpty": "No entries to display."
                },
                {{--"ajax": '{{route('datatables.permits.list')}}',--}}
                ajax: {
                    url: '{{route('datatables.permits.current')}}',
                    data: function (d) {
                        d.starting_date = jQuery('#starting_date').val();
                        d.expire_date = jQuery('#expire_date').val();
                        d.permit_type = jQuery('#select').val();
                        d.vehicle = jQuery('#select_vehicle').val();
                        d.search = jQuery('div.dataTables_filter input').val();
                    }
                },
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "columns": [
                    {data: 'vehicle_permit_id'},
                    {data: 'reg_number'},
                    {data: 'issue_no'},
                    {data: 'permitName'},
                    {data: 'start_date'},
                    {data: 'expire_date'},
                    {data: 'currency'},
                    {data: 'cost'},
                    {data: 'status'},
                    {data: 'description'}
                ],
                "fnDrawCallback": function () {

                },
                "bStateSave": true

            });
            jQuery('#search-form').on('click', function (e) {
                searchTable(e);
            });
            jQuery('#select').on('change', function (e) {
                if (jQuery(this).val() != 'startDateBetween') {
                    searchTable(e);
                }
            });

            function searchTable(e) {
                oTable.fnFilter(this.value);
                e.preventDefault();
            }

        });
    </script>
@stop