FloatBackOfffice/application/views/admin/report/view_report_quote.php

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/assets/css/query-builder.default.min.css">
<div id="overlay" style="display:none;">
    <div class="spinner"></div>
    <br />
    Importing...
</div>
<div class="row">
    <div class="col-lg-11">
        <div class="panel panel-flat">
            <div class="panel-heading">
                <h6 class="panel-title">Get Quote</h6>
                <div class="heading-elements">
                    <a href="/bkoreport/quote">Recent</a>
                    | <a href="/bkoreport/quotes">Aggregate</a>
                    | <a href="/bkoreport/totalquotes">Total</a>
                </div>
            </div>
            <div id="getquote" class="table-responsive" style="background-color:#CEE0D7;">
                <div style="margin-left:20px;width:800px;">
                    <span style="color:red"><b><?=isset($message) ? $message : '' ?></b></span>
                    <form method="get" action="/bkoreport/quote" id="search-form">
                        <input type="hidden" name="from" id="from" value="<?= isset($from) ? $from : '' ?>">
                        <input type="hidden" name="to" id="to" value="<?= isset($to) ? $to : '' ?>">
                        <fieldset>
                            <table width="100%">
                                <tr>
                                    <th style="text-align:right;">Origin:</th>
                                    <td><input type="text" class="form-control" name="address_from" id="autofrom" value="<?= isset($address_from) ? $address_from : '' ?>" size="20"></td>
                                    <th style="text-align:right;">Country:</th>
                                    <td><?= $card_country ?></td>
                                </tr>
                                <tr>
                                    <th style="text-align:right;">Destination:</th>
                                    <td><input type="text" class="form-control" name="address_to" id="autoto" value="<?= isset($address_to) ? $address_to : '' ?>" size="20"></td>
                                    <th style="text-align:right;">Provider:</th>
                                    <td><?= $card_transport_provider ?></td>
                                </tr>
                                <tr>
                                    <th style="text-align:right;">Quote Source: </th>
                                    <td><?= $card_prefill ?></td>
                                    <td colspan="2" style="text-align:right;">
                                        <input type="button" name="quote" data-action="quote" value="Quote" />
                                        <input type="button" name="filter" data-action="quote" value="Filter" />
                                        <input type="button" name="export" data-action="exportCSV" value="Export" /></td>
                                </tr>
                                <tr></tr>
                            </table>
                        </fieldset>
                        <input type="hidden" id="sql_raw" name="sql_raw" value="<?= isset($sql_raw) ? $sql_raw : '' ?>">
                    </form>
                </div>
            </div>
        </div>
        <!-- /Recent Members -->
    </div>
</div>

<div id="query-builder">
    <div id="builder"></div>
    
    <div class="btn-group">
        <button class="btn btn-primary parse-sql" data-target="import_export" data-stmt="false" id="btn-parse-sql">
            Apply
        </button>
        <button class="btn btn-warning reset" id="btn-reset" data-target="basic">Reset</button>
    </div>
</div>

<div id="container">
    <div class="import-group">
        <form id="form-upload">
            <div class="member">
                <label>Member ID</label>
                <input type="text" class="form-control" name="member_id" maxlength=10>
            </div>
            <div class="file-upload">
                <span id="pickfiles">[Choose files]</span>
                <input type="button" id="btn-upload" class="btn btn-warning btn-sm" value="Upload">
            </div>
        </form>
    </div>
    <div id="filelist"></div>
    <div id="import-message"></div>
</div>

<div class="row">
    <div class="col-lg-12">
        <!-- Recent Members -->
        <div class="panel panel-flat" style="background-color:#CEE0D7;">
            <div class="panel-heading">
                <h6 class="panel-title">Recent Quotes</h6>
                <div class="heading-elements">

                </div>
            </div>
            <?= $link ?>
            <div id="quotes" class="table-responsive">
                <?= $quotes_table ?>
            </div>
        </div>
        <!-- /Recent Members -->
    </div>

</div>

<script type="text/javascript">
    function checkQuote(id, btn) {
        if (id > 0) {
            //document.location = '/bkoreport/checkQuote?id='+id;
            btn.disabled = true;
            $.ajax({
                url: "/bkoreport/checkQuote?id=" + id
            }).done(function(data) {
                btn.disabled = false;
                $('#check' + id).html(data);
            });
        }
        return false;
    }
</script>

<!-- jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type='text/javascript'>
    $(document).ready(function() {
        console.log('aaaa');
        // Initialize 
        $("#autofrom").autocomplete({
            source: function(request, response) {
                console.log('bbbb');
                // Fetch data
                $.ajax({
                    url: "/bkoreport/addresssearch",
                    type: 'post',
                    dataType: "json",
                    data: {
                        search: request.term
                    },
                    success: function(data) {
                        response(data);
                    },
                    error: function(data) {
                        console.log(data);
                    }
                });
            },
            select: function(event, ui) {
                // Set selection
                $('#autofrom').val(ui.item.label); // display the selected text
                $('#from').val(ui.item.value); // save selected id to input
                return false;
            }
        });
        $("#autoto").autocomplete({
            source: function(request, response) {
                // Fetch data
                $.ajax({
                    url: "/bkoreport/addresssearch",
                    type: 'post',
                    dataType: "json",
                    data: {
                        search: request.term
                    },
                    success: function(data) {
                        response(data);
                    }
                });
            },
            select: function(event, ui) {
                // Set selection
                $('#autoto').val(ui.item.label); // display the selected text
                $('#to').val(ui.item.value); // save selected id to input
                return false;
            }
        });

    });
</script>
<script src="/assets/js/query-builder.standalone.min.js"></script>
<script src="/assets/js/plugins/pickers/datepicker.js"></script>
<script src="/assets/js/app.js"></script>
<script>
    $(document).ready(function() {

        let DOMCACHESTORE = {};
        DOMCACHE = {
            get: function(selector, force) {
                if (DOMCACHESTORE[selector] !== undefined && !force) {
                    return DOMCACHESTORE[selector];
                }

                DOMCACHESTORE[selector] = $(selector);
                return DOMCACHESTORE[selector];
            }
        };

        const _filters  = [
            {
                id: 'a.id',
                label: 'ID',
                type: 'integer'
            },
            {
                id: 'transport_provider_id',
                type: 'integer'
            },
            {
                id: 'automation_id',
                type: 'integer'
            },
            {
                id: 'cost_raw',
                type: 'string'
            },
            {
                id: 'cost',
                type: 'double'
            },
            {
                id: 'DATE(created)',
                label: 'created',
                type: 'date',
                placeholder: '____-__-__',
                validation: {
                    format: 'YYYY/MM/DD'
                }
            },
            {
                id: 'DATE(completed)',
                label: 'completed',
                type: 'date',
                placeholder: '____-__-__',
                validation: {
                    format: 'YYYY/MM/DD'
                }
            },
            {
                id: 'member_id',
                type: 'integer'
            },
            {
                id: 'location_start_id',
                type: 'integer'
            },
            {
                id: 'location_end_id',
                type: 'integer'
            },
            {
                id: 'quote_group_id',
                type: 'integer'
            },
            {
                id: 'a.prefill',
                label: 'Data Source',
                type: 'string',
                input: 'select',
                values: {
                    'f' : 'Application',
                    't': 'Automatic'
                }
            },
            {
                id: 'pool',
                type: 'integer'
            },
            {
                id: 'DATE(travel_date)',
                label: 'travel_date',
                type: 'date',
                placeholder: '____-__-__',
                validation: {
                    format: 'YYYY/MM/DD'
                }
            }
        ]

        let init_builder_query = {
            filters: _filters,
        }

        // If sql_raw is empty then clear localstorage
        if (window.getURLParameter(window.location.href, 'sql_raw') === null) {
            window.localStorage.clear();
        }

        const rule_basics = 
            JSON.parse(window.localStorage.getItem('rules'));

        if (rule_basics) {
            init_builder_query.rules = rule_basics;
        }

        DOMCACHE.get('#builder').queryBuilder(init_builder_query)

        $('#btn-parse-sql').on('click', function() {
            const result = DOMCACHE.get('#builder').queryBuilder('getSQL');

            window.localStorage.setItem(
                'rules',
                JSON.stringify(DOMCACHE.get('#builder').queryBuilder('getRules'))
            );

            if (result.sql.length) {
                DOMCACHE
                    .get('#search-form')
                    .children('#sql_raw')
                    .val(result.sql);
                DOMCACHE
                    .get('#search-form')
                    .attr('action', 'quote')
                    .submit();
            }
        });

        $('#btn-reset').on('click', function() {
            DOMCACHE.get('#builder').queryBuilder('reset');
            $('#sql_raw').val('');
        });

        // Fix for Bootstrap Datepicker
        DOMCACHE.get('#builder').on('afterUpdateRuleValue.queryBuilder', function(e, rule) {
            const date_picker = [
                'created',
                'completed',
                'travel_date'
            ]

            if (date_picker.indexOf(rule.filter.label) !== -1) {
                addDatePicker(rule.$el.find('.rule-value-container input'));
            }
        })

        DOMCACHE.get('#search-form').on('click', 'input[type="button"]', function() {
            const action = $(this).data('action');
            DOMCACHE.get('#search-form').attr('action', `/bkoreport/${action}`).submit();
        })
    })
</script>
<!-- upload and import file -->
<script src="/assets/js/plupload.full.min.js"></script>
<script>
    window.addEventListener("load", function() {
        let uploader = new plupload.Uploader({
            runtimes: 'html5',
            browse_button: 'pickfiles',
            container: document.getElementById('container'),
            url: '/bkoreport/upload',
            chunk_size: '200kb',
            max_retries: 2,
            filters: {
                max_file_size: '50mb',
                mime_types: [{
                    title: "CSV files",
                    extensions: "csv"
                }]
            },
            init: {
                PostInit: function() {
                    document.getElementById('filelist').innerHTML = '';
                },
                FilesAdded: function(up, files) {   
                    $("#import-message").text('');
                    plupload.each(files, function(file) {
                        document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
                    });
                },
                UploadProgress: function(up, file) {
                    document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
                },
                Error: function(up, err) {
                    // DO YOUR ERROR HANDLING!
                    console.log(err);
                }
            }
        })

        uploader.bind('FileUploaded', function() {
            // After file uploaded , send signal to insert all records
            removeFile();
            $('#overlay').fadeIn();
            $.ajax({
                url: '/bkoreport/importCSV',
                method: 'POST',
                dataType: 'JSON',
                data: {
                    'member_id' : $('input[name="member_id"]').val()
                },
                success: function(data) {
                    $("#import-message").text(data.message);
                },
                error: function(err) {
                    $("#import-message").text('Something went wrong !!!');
                },
                complete: function() {
                    $('#overlay').fadeOut();
                }
            })
        })

        uploader.init()

        function removeFile() {
            $.each(uploader.files, function (i, file) {
                if (file) {
                    uploader.removeFile(file);
                }
            });
        }

        // validate upload form
        $("#form-upload").validate({
            rules: {
                member_id: {
                    required: true,
                    number: true
                }
            },
            messages: {
                member_id: {
                    required: 'Please input Member ID',
                    number: 'Please input number'
                }
            }
        });

        $('#btn-upload').on('click', function(e) {
            $('#import-message').text('');

            if (uploader.files.length === 0) {
                $('#import-message').text('Please choose a file !!!');
                return;
            }

            if ( ! uploader.files[0].size) {
                $('#import-message').text('File is empty');
                removeFile();
                return;
            }

            if ( ! $("#form-upload").valid()) {
                return;
            }

            uploader.start();
        })
        
    });
</script>
<!-- upload and import file -->
<style>
    #query-builder {
        margin-bottom: 15px;
    }
    .btn-group {
        top: 5px;
    }

    #overlay {
        background: #ffffff;
        color: #666666;
        position: fixed;
        height: 100%;
        width: 100%;
        z-index: 5000;
        top: 0;
        left: 0;
        float: left;
        text-align: center;
        padding-top: 25%;
        opacity: .80;
    }

    .spinner {
        margin: 0 auto;
        height: 64px;
        width: 64px;
        animation: rotate 0.8s infinite linear;
        border: 5px solid firebrick;
        border-right-color: transparent;
        border-radius: 50%;
    }

    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    #form-upload {
        justify-content: space-between;
        display: flex;
        align-items: flex-end;
        margin-bottom: 1rem;
        width: 33rem;
        position: relative;
    }

    input[name='member_id'] {
        width: 16rem;
    }

    .file-upload {
        position: absolute;
        left: 17rem;
        top: 3.2rem;
    }

    .import-group {
        padding: 10px;
        padding-bottom: 6px;
        border: 1px solid #dcc896;
        background: rgba(250,240,210,.5);
    }
</style>