<style>
    #tableWithSearch thead tr >th{
        background-color: #4c0870;
        color: #fff;
    }
    .actionButton{
        background-color:#4c0870;
    }
    .Finished{
        background-color: green;
        color: white;
    }
    .Pending{
        background-color: red;
        color: white;
    }
    .Under{
        background-color: yellow;
        color: black;
    }
    .Taken{
        background-color: #12c5b1;
        color: white;

    }
</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>
                <div class="col-md-3" >
                    <label><?php print CommonLanguage::getMessage('serial_number'); ?></label>
                    <input id="serial_number"  name="serial_number" type="hidden"  class="full-width serial_number" >
                </div>
                <div class="col-md-3" >
                    <label><?php print CommonLanguage::getMessage('invoice_number'); ?></label>
                    <input id="invoice_number"  name="invoice_number" type="hidden"  class="full-width invoice_number" >
                </div>
                <div class="col-md-3">
                    <label><?php print CommonLanguage::getMessage('customer'); ?></label>
                    <input  id="customer_id" name="customer_id" class="full-width customer_id" type="hidden"  />
                </div>
                </div>
                <div class="row form-group">
                <div class="col-md-3 <?php echo $permissions->hasPermission('view_all_maintenance')? '':'hidden'; ?>">
                    <label><?php print CommonLanguage::getMessage('suporter'); ?></label>
                    <input  id="supporter_id" name="supporter_id" class="full-width supporter_id" type="hidden"  />
                </div>
                <div class="col-md-3">
                    <label><?php print CommonLanguage::getMessage('maintenance_status'); ?></label>
                    <input  id="ticketing_status_id" name="ticketing_status_id" class="full-width ticketing_status_id" type="hidden"  />
                </div>
                <div class="col-md-3">
                    <label><?php print CommonLanguage::getMessage('type'); ?></label>
                    <input  id="type_id" name="type_id" class="full-width type_id" type="hidden"  />
                </div>
                <?php if ($permissions->hasPermission('add_maintenance')) {?>
                <div class="col-md-3 pull-right">    
                    <div class="floatingContainer ">
                        <a href="Ticketing/add_maintenance" >
                            <div class="actionButton" >
                                <p class="floatingText"><span class="floatingTextBG"><?php echo CommonLanguage::getMessage('add_maintenance') ?></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('customer') ?></th>
                            <th><?php print CommonLanguage::getMessage('type') ?></th>
                            <th><?php print CommonLanguage::getMessage('note') ?></th>
                            <th><?php print CommonLanguage::getMessage('serial_number') ?></th>
                            <th><?php print CommonLanguage::getMessage('invoice_number') ?></th>
                            <th><?php print CommonLanguage::getMessage('supporter_name') ?></th> 
                            <th><?php print CommonLanguage::getMessage('ticketing_type_name') ?></th>
                            <th><?php print CommonLanguage::getMessage('Date') ?></th>
                            <th><?php print CommonLanguage::getMessage('Status') ?></th>
                            <th><?php print CommonLanguage::getMessage('Voice Note') ?></th>
                            <th><?php print CommonLanguage::getMessage('Action') ?></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<a id="test"></a>
<iframe id="maintenance_frame" name="ifrm" style="width:0;height:0;visibility: hidden;" ></iframe>

<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)
        }
        build_select2($("#customer_id"), 'xhr/customerSearch');// DONE
        build_select2($("#serial_number"), 'TicketingAjax/maintenanceSearch');// DONE
        build_select2($("#invoice_number"), 'TicketingAjax/maintenanceInvoiceSearch');// DONE
        build_select2($("#supporter_id"), 'xhr/searchEmployeeUsers');// DONE
        build_select2($("#ticketing_status_id"), "xhr/CommonSearch?col_name=ticketing_status_name&col_id=ticketing_status_id&table=tbl_ticketing_status");// DONE
        build_select2($("#type_id"), "xhr/CommonSearch?col_name=brand_name&col_id=brand_id&table=tbl_brand_products");// DONE

        $("#tableWithSearch").on('click', ".print_maintenance", function () {
                    var data = {maintenance_id: $(this).parents('div.Action').attr('data-id')};
                    console.log( "TicketingAjax/print_maintenance?" + $.param(data));
                    $('#maintenance_frame').attr('src', "TicketingAjax/print_maintenance?" + $.param(data));
         });
         $("#tableWithSearch").on('click', ".finish_maintenance", function () {
                    var data = {maintenance_id: $(this).parents('div.Action').attr('data-id')};
                    console.log( "TicketingAjax/finish_maintenance?" + $.param(data));
                    $('#maintenance_frame').attr('src', "TicketingAjax/finish_maintenance?" + $.param(data));
                    changeTable();
                
        });



         
        $('#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_maintenance");
        });
        $('#tableWithSearch').on('click', '.voice_download', function () {

            var entry_value = $(this).attr('data-id');

             window.open(entry_value, '_blank').focus();


        });
         $("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();
        });
        $("#customer_id,#type_id").on('change',function(){
           changeTable(); 
        });
        $("#serial_number").on('change',function(){
            changeTable(); 
        });
        $("#invoice_number").on('change',function(){
            changeTable(); 
        });
        $("#supporter_id").on('change',function(){
            changeTable(); 
        });
        $("#ticketing_status_id").on('change',function(){
            changeTable(); 
        });
        changeTable();
    });
    function changeTable(){
         var Data = {
            customer_id: $('#customer_id').val(),
            type_id: $('#type_id').val(),
            serial_number: $('#serial_number').val(),
            invoice_number: $('#invoice_number').val(),
            supporter_id: $('#supporter_id').val(),
            ticketing_status_id: $('#ticketing_status_id').val(),
            customer_name: ($("#customer_id").select2('data') == null ? '' : $("#customer_id").select2('data').text),
            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/maintenance_list',Data); 
    }
</script>