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

<style>
    #vendor_cost{
        padding: 4px;
    }
    #vendor_cost h3{
        font-size: 16px;
        margin-left: 8px;
    }
    #vendor_cost h4{
        font-size: 14px;
        margin-left: 8px;
    }
    #vendor_cost .pad{
        padding: 10px;
    }
    #vendor_cost .panel{
        border: none;
    }
    a.selected{
        background-color: yellow;
        font-weight: bold;
    }
</style>
<div class="row">
    <div class="col-lg-10">
        <div>
            <form method="GET" action="/bkoreport/surgereport">
                <div class="row">
                    <div class="col-xs-4 col-md-3">
                        <label for="">Travel date</label>
                        <input type="text"
                            class="form-control"
                            name="travel_date"
                            value="<?= set_value('travel_date', date('Y-m-d', strtotime('-30 days')).' - '.date('Y-m-d')) ?>"
                            readonly>
                    </div>
                    <div class="col-xs-4 col-md-3">
                        <label for="">Duration from</label>
                        <input type="text"
                            class="form-control"
                            name="duration_from"
                            value="<?= set_value('duration_from') ?>" >
                        <div class="invalid-feedback text-danger">
                            <?php echo form_error('duration_from') ? form_error('duration_from') : '' ?>
                        </div>
                    </div>
                    <div class="col-xs-4 col-md-3">
                        <label for="">Duration to</label>
                        <input type="text" 
                            class="form-control" 
                            name="duration_to" 
                            value="<?= set_value('duration_to') ?>">
                        <div class="invalid-feedback text-danger">
                            <?php echo form_error('duration_to') ? form_error('duration_to') : '' ?>
                        </div>
                    </div>
                    <div class="col-xs-4 col-md-3">
                        <label for="">Distance from</label>
                        <input type="text" 
                            class="form-control" 
                            name="distance_from" 
                            value="<?= set_value('distance_from') ?>">
                        <div class="invalid-feedback text-danger">
                            <?php echo form_error('distance_from') ? form_error('distance_from') : '' ?>
                        </div>
                    </div>
                    <div class="col-xs-4 col-md-3">
                        <label for="">Distance to</label>
                        <input type="text" 
                            class="form-control" 
                            name="distance_to" 
                            value="<?= set_value('distance_to') ?>">
                        <div class="invalid-feedback text-danger">
                            <?php echo form_error('distance_to') ? form_error('distance_to') : '' ?>
                        </div>
                    </div>
                    <div class="col-xs-4 col-md-3">
                        <label for="">Cost from</label>
                        <input type="text" 
                            class="form-control" 
                            name="cost_from" 
                            value="<?= set_value('cost_from') ?>">
                        <div class="invalid-feedback text-danger">
                            <?php echo form_error('cost_from') ? form_error('cost_from') : '' ?>
                        </div>
                    </div>
                    <div class="col-xs-4 col-md-3">
                        <label for="">Cost to</label>
                        <input type="text" 
                            class="form-control" 
                            name="cost_to" 
                            value="<?= set_value('cost_to') ?>">
                        <div class="invalid-feedback text-danger">
                            <?php echo form_error('cost_to') ? form_error('cost_to') : '' ?>
                        </div>
                    </div>
                    <div class="col-xs-4 col-md-3">
                        <label for="">Email (comma separated)</label>
                        <textarea
                            class="form-control"
                            placeholder="Multiple values field (comma separated)"
                            rows="4"
                            name="email"><?= set_value('email') ?></textarea>
                        <div class="invalid-feedback text-danger">
                            <?php echo form_error('email') ? form_error('email') : '' ?>
                        </div>
                    </div>
                </div>
                <div class=" m-y-sm">
                    <button type="submit" class="btn btn-primary btn-sm">Search</button>
                </div>
            </form>
         </div>
    </div>   
</div>
<div class="m-y-sm"><?= $pagination_link ?: '' ?></div>
<div class="row">
    <div class="col-lg-10">
        <div class="panel panel-flat" style="background-color:#CEE0D7;">
                <div id="vendor_count" class="table-responsive"> 
				   <?=$report_parsedemail?>
				</div>
        </div>
        <div class="m-y-sm"><?= $pagination_link ?: '' ?></div>
    </div>   

    <div class="col-lg-2">
        <div class="panel panel-flat">
                <div id="vendor_cost" class="table-responsive">
                    <div class="pad">...</div>
				</div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $( document ).ready(function() {
        /** date range picker */
        let datepickerOptions = {
            autoUpdateInput: false,
            locale: {
                format: 'YYYY-MM-DD',
                cancelLabel: 'Clear'
            }
        };

        let travelDateEl = $('input[name="travel_date"]');
        const travelDateVal = travelDateEl.val();
        if (travelDateVal == '') {
            datepickerOptions.startDate = moment().subtract(30, 'days').format('YYYY-MM-DD');
            datepickerOptions.endDate = moment().format('YYYY-MM-DD');
        }
        travelDateEl.daterangepicker(datepickerOptions);

        travelDateEl.on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
        });

        travelDateEl.on('cancel.daterangepicker', function(ev, picker) {
            travelDateEl.val('');
        });
    });
    const $vendor_cost = $('#vendor_cost');
    function showTripInsights(member_id, trackedemail_item_id, that){
        $('.showTripInsights').removeClass('selected');
        $(that).addClass('selected');
        $vendor_cost.html('<div class="pad">Insights Loading...</div>');
        $.get(`/bkoreport/tripinsights?member_id=${member_id}&id=${trackedemail_item_id}`, function(data){
            //console.log(member_id, trackedemail_item_id, data);
            $vendor_cost.html(data);
        });
    }
</script>