<style>
    #tableWithSearch thead tr >th{
        background-color: #4c0870;
        color: #fff;
    }
    .actionButton{
        background-color:#4c0870;
    }
</style>
<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"><?php print $title; ?></div>
            <div class="row form-group">
                <div class="col-md-3" >
                    <label><?php print CommonLanguage::getMessage('Date'); ?></label>
                    <input id="From_To_Date" type="text" class="form-control" name="From_To_Date" >
                </div>
               
                <?php if ($permissions->hasPermission('add_event')) {?>
                <div class="col-md-3 pull-right">    
                    <div class="floatingContainer ">
                        <a href="Ticketing/add_event" >
                            <div class="actionButton" >
                                <p class="floatingText"><span class="floatingTextBG"><?php echo CommonLanguage::getMessage('add_event') ?></span></p>
                            </div>
                        </a>
                    </div>
                </div>
                <?php } ?>
            </div>
        </div>
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover" id="tableWithSearch">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th><?php print CommonLanguage::getMessage('event_name') ?></th>
                            <th><?php print CommonLanguage::getMessage('from_date') ?></th>
                            <th><?php print CommonLanguage::getMessage('to_date') ?></th>
                            <th><?php print CommonLanguage::getMessage('from_time') ?></th>
                            <th><?php print CommonLanguage::getMessage('to_time') ?></th>
                            <th><?php print CommonLanguage::getMessage('crate_date') ?></th>
                              <th><?php print CommonLanguage::getMessage('Action') ?></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        var data_session = get_storage_element(page_link);
       //alert(JSON.stringify(data_session));
        if (data_session.person_name != '') {
            $("#customer_id").val(data_session.customer_id).attr("data-select-name", data_session.customer_name)
        }
        
        if (data_session.Date != '') {
            window.startDate = data_session.from_date;
            window.endDate = data_session.to_date;
            $("input[name=From_To_Date]").val(data_session.Date)
        }
         $('#tableWithSearch').on('click', '.delete', function () {
            var entry_value = $(this).parents('div.Action').attr('data-id');
            IncludeDeleteModal(common_delete_modal, {ticketing_id: entry_value}, function () {
                changeTable();
            }, "TicketingAjax/delete_event");
        });
         $("input[name=From_To_Date]").daterangepicker({
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }, locale: {
                cancelLabel: 'Clear'
            }, allowEmpty: false,
            autoUpdateInput: false
        });

        $("input[name=From_To_Date]").on('apply.daterangepicker', function (ev, picker) {
            window.startDate = picker.startDate.format('YYYY-MM-DD'),
                    window.endDate = picker.endDate.format('YYYY-MM-DD');
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
            changeTable();
        });
        $("input[name=From_To_Date]").on('cancel.daterangepicker', function (ev, picker) {
            window.startDate = ''
            window.endDate = ''
            $(this).val('');
            changeTable();
        });
         changeTable();
    });
    function changeTable(){
         var Data = {
            Date: $("input[name=From_To_Date]").val(),
            from_date: window.startDate,
            to_date: window.endDate,
        }
        set_storage_element(page_link, Data)
        RebuildDataTable($('.panel-heading .panel-title').html(), [0], 'TicketingAjax/event_list',Data);
    }
</script>