@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" 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">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>
                            <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>
                    {{--</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')">
                        <span class="iconsweets-create"></span> ADD NEW
                    </a>
                </form>
                <form class="form-inline form-filter" id="vehicle_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"
                            id="vehicle_import_excel_button">Import File</button>
                    <button class="btn btn-mini" id="download_sample_file">Download template</button>
                </form>
            </div>
            <div class="clearfix"></div>
            <table class="table table-bordered table-condensed" id="permit-list">
                <thead>
                <tr>
                    <th class="head0 nosort" style="width: 10px"><input type="checkbox" class="checkall"/></th>
                    <th class="head1">Registration N0.</th>
                    <th class="head0">Permit No</th>
                    <th class="head1">Permit Name</th>
                    <th class="head0">Start Date</th>
                    <th class="head1">Expire Date</th>
                    <th class="head0">Currency</th>
                    <th class="head0">Cost</th>
                    <th class="head0">Status</th>
                    <th class="head0">Description</th>
                    <th class="head0">Action</th>
                </tr>
                </thead>
            </table>
        </div><!--span12-->
    </div><!--row-fluid-->
    @include('permits.includes.permit_modals')
    <script>
        selectVehicleType();
        jQuery('.permit_date_picker').datepicker();
        jQuery('.vehicle_permit_searchable_select').select2();
        jQuery('#download_sample_file').on('click', function (e) {
            e.preventDefault();
            window.open('{{route('permits.import-excel.template')}}', '_blank');
        });
        jQuery("input[name='vehicle_type']").change(function () {
            var option_ = document.querySelector('input[name = "vehicle_type"]:checked');
            var option = option_ ? option_.value : "";
            selectVehicleType();
        });
        jQuery('#select').change(function () {
            if (jQuery(this).val() == 'startDateBetween') {
                jQuery('#date_picker').slideToggle();
            } else {
                jQuery('#date_picker').hide();
            }
        });


        jQuery(function () {
            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: {
                    url: '{{route('datatables.permits.list')}}',
                    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: 'currency'},
                    {data: 'cost'},
                    {data: 'status'},
                    {data: 'description'},
                    {data: 'action'}
                ],
                "fnDrawCallback": function () {
                    jQuery('.delete_vehicle_permit').click(function () {
                        var conf = confirm('Are you sure?');
                        if (conf)
                            var tr_p = jQuery(this).parents('tr');
                        var vehicle_permit_id = tr_p.find('.vehicle_permit_id').val();
                        jQuery.ajax({
                            type: "POST",
                            cache: false,
                            url: "{{route('vehicle-permits.destroy')}}",
                            data: {
                                permit_id: vehicle_permit_id
                            },
                            success: function (data) {
//                                if (data == 'DONE') {
                                    jQuery.jGrowl('{!! HTML::image('img/truck1.png') !!} VEHICLE PERMIT/LICENCES DELETED SUCCESSFUL!', {
                                        theme: 'contrastBorder',
                                        sticky: true
                                    });
                                    jQuery('#permit-list').dataTable().fnFilter(this.value);
//                                } else if (data == 'FAIL') {
//                                    alert("FAIL TO DELETE VEHICLE PERMIT.");
//                                }
                            },
                            error: function (data) {

                            }
                        });
                        return false;
                    });
                    jQuery('.update_vehicle_permit').click(function () {
                        var tr_p = jQuery(this).parents('tr');
                        var vehicle_permit_id = tr_p.find('.vehicle_permit_id').val();
                        var vehicle_permit_type = tr_p.find('.vehicle_permit_type').val();
                        jQuery.ajax({
                            type: "get",
                            url: "{{route('all-permit.edit')}}",
                            data: {
                                type: vehicle_permit_type,
                                permit_id: vehicle_permit_id
                            },
                            success: function (data) {
                                jQuery('#editNewPermit').appendTo("body").modal('toggle');
                                jQuery('#permit_edit').empty().append(data);
                                jQuery('.vehicle_permit_searchable_select_edit').select2();
                                jQuery(".edit_vehicle_permit_date").datepicker({
                                            format: 'mm/dd/yyyy',
                                            startDate: '-3d',
                                            autoclose: true
                                        }
                                ).on('changeDate', function (ev) {
                                    jQuery(this).datepicker('hide');
                                });

                            }
                        })
                    })
                },
                "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);
                }
            });
            function searchTable(e) {
                jQuery('#permit-list').dataTable().fnFilter(this.value);
//                oTable.fnFilter(this.value);
            }


            jQuery('#add-new-permit-form').on('submit', function (e) {
                e.preventDefault();
                jQuery.ajax({
                    type: "POST",
                    cache: false,
                    url: "{{route('permits.add.allpermit')}}",
                    data: jQuery('#add-new-permit-form').serialize(),
                    success: function (data) {
                        jQuery('#addNewPermit').appendTo("body").modal('toggle');
                        if (data == 'DONE') {
                            jQuery.jGrowl('{!! HTML::image('img/truck.png') !!} VEHICLE PERMIT/LICENCE CREATED SUCCESSFUL!', {
                                theme: 'contrastBorder',
                                sticky: true
                            });
                            jQuery('#add-new-permit-form').each(function () {
                                this.reset();
                            });
                            jQuery('.vehicle_permit_searchable_select').val('').trigger('change');
                            jQuery('#permit-list').dataTable().fnFilter(this.value);
                        } else {

                        }
                    },
                    error: function (data) {

                    }
                });
            });

            jQuery('#edit-permit-form').on('submit', function (e) {
                e.preventDefault();
                jQuery.ajax({
                    type: "POST",
                    cache: false,
                    url: "{{route('vehicle-permits.update')}}",
                    data: jQuery('#edit-permit-form').serialize(),
                    success: function (data) {
                        if (data == 'DONE') {
                            jQuery('#editNewPermit').appendTo("body").modal('toggle');
                            jQuery.jGrowl('{!! HTML::image('img/truck.png') !!} VEHICLE PERMIT/LICENCE UPDATED SUCCESSFUL!', {
                                theme: 'contrastBorder',
                                sticky: true
                            });
                            jQuery('#permit-list').dataTable().fnFilter(this.value);
                        } else {
                            alert('FAIL TO UPDATE PERMIT/LICENCE');
                        }
                    },
                    error: function (data) {

                    }
                });
            });

        });

        jQuery('#vehicle_import_excel_button').on('click',function (e) {
            e.preventDefault();
            let formData = new FormData(jQuery('#vehicle_import_excel')[0]);
            jQuery.ajax({
                url: '{{route('permits.import-excel')}}',
                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();
                }
            });
        });

        function selectVehicleType() {
            var option_ = document.querySelector('input[name = "vehicle_type"]:checked');
            var option = option_ ? option_.value : "";
            if (option == 'trailer') {
                jQuery('#trailer').show();
                jQuery('#truck').hide();
            } else if (option == 'truck') {
                jQuery('#trailer').hide();
                jQuery('#truck').show();
            } else {
                jQuery('#trailer').show();
                jQuery('#truck').show();
            }
        }
    </script>
@stop