@extends('layouts.main_without_top_button',['title'=>'Vehicle Permits | LOGISTICS'])
@section('title', 'Permits List')
@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" for="Category">Permit Status</label>
                    {{--<span class="field">--}}
                    <select name="select" width="200px" id="select">
                        <option value="permit_all">All</option>
                        <option value="active_all">All Active</option>
                        <option value="expired_all">All Expired</option>
                        <option value="startDateBetween">Days Remaining</option>
                    </select>
                    <span class="hide" id="date_picker">
                            <input type="text" name="date_from" id="starting_date" class="span4" value="">
                            </span>
                    {{--</span>--}}
                    {{--<label class="control-label" for="Category">Days Remaining</label>--}}
                    {{--<input type="text" name="days" id="starting_date" class="input-small" style="text-align: right">--}}
                    <button class="btn" style="" id="search-form">
                        FILTER
                    </button>
                    <input class="btn" id="print_permits" type="submit" value="PRINT">
                    <a class="btn" style="margin-right: 20px"
                       {{--onclick="modelShow('addNewPermit')"--}}
                       onclick="create('{{ route('vehicle_permits.create') }}')">
                        <span class="iconsweets-create"></span> ADD NEW
                    </a>
                </form>
                <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 class="form-inline form-filter" id="vehicle_import_excel"--}}
                {{--action="{{route('permits.import-excel')}}" method="post"--}}
                {{--enctype="multipart/form-data">--}}
                {{--<input type="text" name="test" class="test"/>--}}
                {{--<input type="file" name="import_file" class="import_file"/>--}}
                {{--<button class="btn btn-mini btn-primary">Import File</button>--}}
                {{--<button class="btn btn-mini" id="download_sample_file">Download template</button>--}}
                {{--<a class="btn" style="margin-right: 20px"--}}
                {{--onclick="modelShow('addNewPermit')"--}}
                {{--onclick="create('{{ route('vehicle_permits.create') }}')">--}}
                {{--<span class="iconsweets-create"></span> ADD NEW--}}
                {{--</a>--}}
                {{--</form>--}}
            </div>
            <div class="clearfix"></div>
            <table class="table table-bordered table-condensed" id="permit-list">
                <thead>
                <tr>
                    <th class="nosort" style="width: 2%"><input type="checkbox" class="checkall"/></th>
                    <th style="width: 30%">Registration N0.</th>
                    {{--<th class="head0">Permit No</th>--}}
                    <th style="width: 30%">Permit Name</th>
                    <th style="width: 20%">Start Date</th>
                    <th style="width: 20%">Expire Date</th>
                    <th style="width: 20%">Status</th>
                    {{--<th>Description</th>--}}
                    <th style="width: 3%">Action</th>
                </tr>
                </thead>
            </table>
        </div><!--span12-->
    </div><!--row-fluid-->
    <script>
        $('#select').select2();
        var mainDataTable = 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: {
                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.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: 'status'},
//                {data: 'description'},
                {data: 'action'}
            ],
            "bStateSave": true
        });
        jQuery('#search-form').on('click', function (e) {
            e.preventDefault();
            searchTable(e);
        });
        jQuery('#select').on('change', function (e) {
            if (jQuery(this).val() != 'startDateBetween') {
                searchTable(e);
            }
        });
        startDateBetween();
        jQuery('#select').change(function () {
            startDateBetween();
        });
        function startDateBetween() {
            if (jQuery('#select').val() == 'startDateBetween') {
                jQuery('#date_picker').slideToggle();
            } else {
                jQuery('#date_picker').hide();
            }
        }

        function searchTable(e) {
            jQuery('#permit-list').dataTable().fnFilter(this.value);
//                mainDataTable.fnFilter(this.value);
        }

        jQuery('.import_file').on('change', function (e) {
            e.preventDefault();
            var formData = new FormData(jQuery('#vehicle_import_excel')[0]);
            jQuery.ajax({
                url: '{{route('vehicles_permits.excel.create')}}',
                type: 'post',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    jQuery('#excle_loaded_vehicle_permit_body').empty().append(data);
                    jQuery('#excle_loaded_vehicle_permit').appendTo("body").modal('toggle');
                    jQuery('.searchable_select').select2();
                }
            });
        });
    </script>
@stop