@extends('layouts.main_without_top_button')
@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">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="create('{{ route('vehicle_permits.create') }}')">
                        <span class="icon-plus"></span> ADD NEW
                    </a>
                    <a class="btn" style="margin-right: 20px" id="permit_renew_btn">
                        <span class="icon-refresh"></span> RENEW
                    </a>
                </form>
                <form class="form-inline form-filter" id="vehicle_import_excel"
                      action="{{route('permits.import-excel')}}" method="post"
                      enctype="multipart/form-data">

                    <select name="permit_id" width="200px" id="permit_id" required>
                        @foreach($permits as $permit)
                            <option value="{{$permit->id}}">{{$permit->name}}</option>
                        @endforeach
                    </select>

                    <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>
                </form>
            </div>
            <div class="clearfix"></div>
            <table class="table table-bordered table-condensed" id="permit-list">
                <thead>
                <tr>
                    <th 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>Status</th>
                    <th>Action</th>
                </tr>
                </thead>
            </table>
        </div><!--span12-->
    </div><!--row-fluid-->
    @include('permits.includes.permit_modals')
    <script>
        master_checkbox = jQuery('.checkall');
        master_checkbox.change(function () {
            child_checkboxes = master_checkbox.parents('table').find('input:checkbox');
            child_checkboxes.prop('checked', master_checkbox.prop('checked'));
            // if(master_checkbox.prop('checked')) child_checkboxes.prop('checked', true);

            // if(master_checkbox.prop('checked')) child_checkboxes.prop('checked', true);
            // else child_checkboxes.prop('checked', false);
        });

        var permit_renew_btn = jQuery('#permit_renew_btn');
        permit_renew_btn.click(function () {
            var checked_permits = checkRows('permit_checkboxes');

            if (checked_permits.length > 0) create('{{ route("permits.renew.create") }}', checked_permits);
            else logistics_alert('Please select at least one permit to renew');
        });

        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 () {
            let 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', sortable: false, class: 'permit_checkboxes'},
                    {data: 'reg_number'},
                    {data: 'issue_no'},
                    {data: 'permitName'},
                    {data: 'start_date'},
                    {data: 'expire_date'},
                    {data: 'status'},
                    {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;
                    });
                },
                "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('#vehicle_import_excel').submit(function (e) {
            e.preventDefault();
            let formData = new FormData(jQuery('#vehicle_import_excel')[0]);
            startSpinner();
            jQuery.ajax({
                url: '{{route('permits.import-excel')}}',
                type: 'post',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                // beforeSend: function () {
                //     startSpinner();
                // },
                success: function (data) {
                    // stopSpinner();
                    if (data.state == 'Fail') {
                        jQuery.jGrowl(data.msg);
                    } else {

                        let modal = jQuery('#logistics_modal');
                        modal.empty().append(data);
                        modelShow('logistics_modal');
                        onModalShown();

                        let form = modal.find('form');
                        form.on('submit', function (e) {
                            e.preventDefault();
                            storeOrUpdateOld(form, 'POST');
                        });

                        jQuery('.searchable_select').select2();
                    }
                },
                complete: function () {
                    stopSpinner()
                },
            });
        });

        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