@extends('admin.layouts.admin')
@section('title')
Admin | Order Transaction List
@endsection

@section('styles')
<link rel="stylesheet" href="{{ asset('plugins/datatables/dataTables.bootstrap4.css') }}">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.4.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/custom.button-switch.css') }}">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<style>
    #artists-table tbody td.details-control {
        background: url({{ asset('images/details_open.png') }}) no-repeat center center;
        cursor: pointer;
    }
    #artists-table tbody tr.shown td.details-control {
        background: url({{ asset('images/details_close.png') }}) no-repeat center center;
    }
</style>

<style type="text/css">
    #demo-modal {
        text-align: center;
        padding: 20px;
    }

    .demo-title {
        font-size: 2em;
        margin-bottom: 200px;
    }

    .btn-modal-target {
        padding: 10px 20px;
        color: #F0F0F0;
        margin: 5px;
        border-radius: 15px;
        cursor: pointer;
        display: inline-block;
    }

    #btn-jquery {
        background: #e85545;
    }

    #btn-bootstrap {
        background: #43cb83;
    }

    #btn-responsive {
        background: #ff9e8f;
    }

    .modal-text {
        margin-top: 15px;
        line-height: 25px;
        font-size: 1.0em;
        font-family: arial;
    }
    .modal-menu .modal-dialog {
        max-width: 800px;
    }

    .modal-content {
      max-height: 95vh;
      overflow: scroll;
    }
</style>

@endsection

@section('content')
<!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h3 class="m-0 text-dark">Ordered Transactions</h3>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
              <li class="breadcrumb-item"><a href="#">Reports</a></li>
              <li class="breadcrumb-item active">Food Order</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->        
        <!-- /.row -->

        <div class="row">
          <div class="col-md-12">
            <div class="card card-primary">

            @if ($errors->any())            
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
                
            </div>
          </div>
        </div>

        <div class="form-group">
          <div class="row">
            <div class="col-md-11">
                <div class="row">

                    <div class="col-md-5 pb-md-0 pb-lg-2 pb-3">
                        <select class="form-control select2 restaurants filter-button" name="restaurant">
                            <option value="">Select restaurant</option>
                            @if(objectToArray($restaurantlist))
                                @foreach($restaurantlist as $key3 => $restaurant)
                                    <option value="{{ $restaurant->id }}">{{ $restaurant->restaurant_name??'' }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>

                    <div class="col-md-5 pb-md-0 pb-lg-2 pb-3">
                        <select class="form-control select2 events filter-button" name="event">
                            <option value="">Select event</option>
                            @if(objectToArray($eventlist))
                                @foreach($eventlist as $key3 => $event)
                                    <option value="{{ $event->id }}">{{ $event->event_ID.'- '.$event->title??'' }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>


                    <div class="col-md-2 pb-md-0 pb-lg-2 pb-3">
                        <select class="form-control filter-button" name="payment_status" >
                            <option value="">Payment status</option>                      
                            <option value="1" class="text-success font-weight-bold">Success</option>
                            <option value="2" class="text-danger font-weight-bold">Failed</option>
                        </select>
                    </div>

                    <div class="col-md-4 pb-md-0 pb-lg-2 pb-3">
                        <input type="text" class="form-control filter-button" name="order_id" value="" placeholder="Enter Order ID">
                    </div>

                    @if(false)
                    <div class="col-md-3 pb-md-0 pb-lg-2 pb-3" >
                        <select class="form-control filter-button" name="event_type" >
                            <option value="">Select Event type</option>                      
                            <option value="1" {!! old('type')?'selected="selected"':'' !!}>One Day</option>
                            <option value="2" {!! old('type')?'selected="selected"':'' !!}>Multiple day</option>
                        </select>
                    </div>
                    
                    <div class="col-md-3 pb-md-0 pb-lg-2 pb-3" >
                        <input type="text" class="form-control filter-button date" name="event_datepicker_from" id="event_datepicker_from" placeholder="Event Date - from" value="" autocomplete="off">
                    </div>

                    <div class="col-md-3 pb-md-0 pb-lg-2 pb-3" >
                        <input type="text" class="form-control filter-button date" name="event_datepicker_to" id="event_datepicker_to" placeholder="Event Date - to" value="" autocomplete="off">
                    </div>

                    <br>
                    <div class="col-md-3 pb-md-0 pb-lg-2 pb-3" >
                        <input type="text" class="form-control filter-button date" name="event_promotion_datepicker_from" id="event_promotion_datepicker_from" placeholder="Promotion Date - from" value="" autocomplete="off">
                    </div>

                    <div class="col-md-3 pb-md-0 pb-lg-2 pb-3" >
                        <input type="text" class="form-control filter-button date" name="event_promotion_datepicker_to" id="event_promotion_datepicker_to" placeholder="Promotion Date - to" value="" autocomplete="off">
                    </div>

                    <div class="col-md-3 pb-md-0 pb-lg-2 pb-3" >
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" name="is_all_day_pickup" class="custom-control-input filter-button" id="defaultUnchecked" value="1" >
                            <label class="custom-control-label font-weight-normal text-uppercase pointer" for="defaultUnchecked" style="cursor:pointer">All day pickup</label>
                        </div>                        
                    </div>

                    <div class="col-md-1 pb-md-0 pb-lg-2 pb-3">
                        <!-- <a href="javascript:void(0)" class="btn btn-primary col-sm-12 filter-clear-button" style="display: none;">Clear</a> -->
                    </div>

                    <div class="col-md-4 pb-md-0 pb-lg-2 pb-3" >
                        <select class="form-control filter-button" name="admin_request" >
                            <option value="">Select Admin request</option>                      
                            <option value="1" {!! old('admin_request')?'selected="selected"':'' !!}>Sent</option>
                            <option value="0" {!! old('admin_request')?'selected="selected"':'' !!}>Not send</option>
                        </select>
                    </div>

                    <div class="col-md-4 pb-md-0 pb-lg-2 pb-3" >
                        <select class="form-control filter-button" name="restaurant_request" disabled="">
                            <option value="">Select Restaurant request</option>
                            <option value="0" {!! old('restaurant_request')?'selected="selected"':'' !!}>Pending</option>
                            <option value="1" {!! old('restaurant_request')?'selected="selected"':'' !!}>Accepted</option>
                            <option value="2" {!! old('restaurant_request')?'selected="selected"':'' !!}>Rejected</option>
                        </select>
                        <small><b>Note:</b> select admin request "sent" first</small>
                    </div>

                    <div class="col-md-4 pb-md-0 pb-lg-2 pb-3" >
                        <select class="form-control filter-button" name="event_time_type" >
                            <option value="">Select Event time type</option>                      
                            <option value="1" {!! old('event_time_type')?'selected="selected"':'' !!}>Upcoming</option>
                            <option value="2" {!! old('event_time_type')?'selected="selected"':'' !!}>Past</option>
                        </select>
                    </div>
                    @endif




                </div>         
            </div>
            
            <div class="col-md-1 pb-md-0 pb-lg-2 pb-3">
                <a href="javascript:void(0)" class="btn btn-primary col-sm-12 filter-clear-button" style="display: none;">Clear</a>
            </div>

            @if(false)
            <div class="col-md-2" >            
                <a href="{{ url('admin/campaigns/'.(Request::segment(3)).'/add') }}" class="btn btn-primary float-right">Add New</a>            
            </div>
            @endif
            
          </div>
        </div>

        <!-- Main row -->
        <div class="row">
        <div class="col-md-12">
          <div class="card">            
            <!-- /.card-header -->
            <div class="card-body table-responsive">
              <table id="artists-table" class="table table-bordered table-hover" style="width: 100%;">
                <thead>
                <tr>
                    <th></th>
                    <th width="33%">Event & Restaurant Details</th>
                    <th width="30%">Order & Payment Details</th>
                    <th>Customer Details</th>
                    <th width="25%">Payment Status</th>
                    <th width="8%">Action</th>
                    <th>id</th>
                    <th>Order ID</th>
                    <th>Transaction id</th>               
                </tr>
                </thead>
                <tbody>                
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="9" class="tfoot"><b>Note::</b>  
                            <label class="switch"><input type="checkbox" checked="" disabled="disabled" class="success"><span class="slider round checkbox-disable"></span></label> : Active and Already Associated,
                            <label class="switch"><input type="checkbox" disabled="disabled" checked="checked" class="success active-status"><span class="slider round" ></span></label> : Active,
                            <label class="switch"><input type="checkbox" disabled="disabled" class="success"><span class="slider round checkbox-disable"></span></label> : Inactive 
                        </td>
                    </tr>
                </tfoot>                
              </table>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>        
        <!-- /.row (main row) -->
      </div><!-- /.container-fluid -->
      <button id="scrollTopBtn" class="scrollTopBtn" title="Go to top">Top</button>

      <!-- modal-menu -->
      <div class="modal fade modal-menu" id="bootstrap-modal" role="dialog">    
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header center">                    
                    <button type="button" class="close" data-dismiss="modal">&times;</button>                    
                </div>
                <div id="demo-modal"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
      </div>
      <!-- end modal-menu -->

    </section>
    <!-- /.content -->
@endsection

@section('scripts')
<script type='text/javascript' src="{{asset('plugins/datatables/jquery.dataTables.js') }}"></script> 
<script type='text/javascript' src="{{asset('plugins/datatables/dataTables.bootstrap4.js') }}"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.4.0/js/bootstrap4-toggle.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
    function loadDynamicContentModal(modal){
        var options = {
                modal: true,
                height:300,
                width:500
            };

        $('#demo-modal').load(baseUrl+'admin/orders/campaign/order/'+modal, function(){
            $('#bootstrap-modal').modal({show:true});
        });    
    }
</script>

<script type="text/javascript">
    function format(data) {

        return '<table class="table table-sm table-borderless">'+
            '<tr>'+
                '<td width="20%">Family Member Name:</td>'+
                '<td>'+
                    ((data['get_family_member']['name'] != "undefined" && data['get_family_member']['name'])?"<span class='text-primary'> "+data['get_family_member']['name']+"</span>":"No record")
                +'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Family Member Contacts:</td>'+
                '<td>'+
                    ((data['get_family_member']['email'] != "undefined" && data['get_family_member']['email'])?"<span class='text-danger'><i class='nav-icon fa fa-envelope'></i> "+data['get_family_member']['email']+"</span>":"")+
                    ((data['get_family_member']['phone'] != "undefined" && data['get_family_member']['phone'])?", <span class='text-danger'><i class='nav-icon fa fa-phone'></i> "+data['get_family_member']['phone']+"</span>":"")
                +'</td>'+
            '</tr>'+
            '<!--tr>'+
                '<td>Order Date Time:</td>'+
                '<td>'+data.order_date_time+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Pickup Date Time:</td>'+
                '<td>'+data.pickup_date_time+'</td>'+
            '</tr-->'+
            '<tr>'+
                '<td>Family Member\'s Order Note:</td>'+
                '<td>'+((data.user_note != "undefined" && data.user_note)?data.user_note:"No note found.")+'</td>'+
            '</tr>'+
        '</table>';
    }

    var oTable = '';
    $(document).ready(function () {
        oTable = $('#artists-table').DataTable({
            "language": {
                "lengthMenu": "Show: _MENU_ records per page",
                "zeroRecords": "Oops No record Found",
                "infoFiltered": "(filtered from _MAX_ total records)"
            },
            paging: true,
            processing: true,
            serverSide: true,
            pagingType: 'full_numbers',
            ajax: {
                "url": baseUrl + 'admin/reports/order/list',
                "type": "GET",
                "data": function(d){
                    d.event_id = $("select[name=event]").val();
                    d.restaurant_id = $("select[name=restaurant]").val();
                    d.payment_status = $("select[name=payment_status]").val();
                    d.order_id = $("input[name=order_id]").val();
                    
                    // d.is_active = $("select[name=active_status]").val();
                    // d.event_type = $("select[name=event_type]").val();
                    // d.event_start = $("input[name=event_datepicker_from]").val();
                    // d.event_end = $("input[name=event_datepicker_to]").val();  
                    // d.event_promotion_start = $("input[name=event_promotion_datepicker_from]").val();
                    // d.event_promotion_end = $("input[name=event_promotion_datepicker_to]").val();
                    // d.is_all_day_pickup = $("input[name=is_all_day_pickup]:checked").val();
                    // d.organization = $("select[name=school]").val();
                    // d.admin_request = $("select[name=admin_request]").val();
                    // d.restaurant_request = $("select[name=restaurant_request]").val();
                    // d.event_time_type = $("select[name=event_time_type]").val();
                    // //d.restaurant = $("select[name=restaurant]").val();
                    // d.eventOrganizer = $("select[name=eventOrganizer]").val();
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                }
            },
            columns: [
                {
                    className:      'details-control',
                    orderable:      false,
                    data:           null,
                    name: 'users.name',
                    defaultContent: ''
                },
                {
                    data: null,
                    name: 'orders.order_ID',
                    className: 'text-left',
                    render: function (data, type, row) {
                        var event = '<div>Event details:</div>';
                        if(data['get_event']['event_ID'] != "undefined" && data['get_event']['event_ID']){
                            event += "ID: <span class='text-danger'>"+data['get_event']['event_ID']+"</span>";
                        }

                        event += "<br><b>Name:</b> <a style='text-decoration: underline;' title='Show' href="+baseUrl+"admin/campaigns/event/show/"+data['get_event']['id']+"><span class='text-primary'><span class='text-primary'>"+data['get_event']['title']+"</span></a>";
                        
                        if(data['get_event']['target_fund'] != "undefined" && data['get_event']['target_fund']){
                            event += "<br/>Target Fund: <span class='text-danger'> $"+data['get_event']['target_fund']+"</span>";
                        }
                        if(data['get_event']['is_active'] != "undefined" && data['get_event']['is_active'] == 1) {
                            event += "<br/><span class='text-success font-weight-bold'>Active</span>";
                        }
                        else {
                            event += "<br/><span class='text-secondary font-weight-bold'>Inactive</span>";
                        }

                        var result = '<div>&nbsp;</div><div>Restaurant Details:</div>';
                        
                        if(data['get_restaurant']['restaurant_name'] != "undefined" && data['get_restaurant']['restaurant_name']){
                          result += "<span class='text-primary'> "+data['get_restaurant']['restaurant_name']+"</span>";
                        }

                        if(data['get_restaurant']['phone'] != "undefined" && data['get_restaurant']['phone']){
                          result += "<br/><span class='text-danger'><i class='nav-icon fa fa-phone'></i>"+data['get_restaurant']['phone']+"</span>";
                        }
                        if(data['get_restaurant']['is_active'] != "undefined" && data['get_restaurant']['is_active'] == 1) {
                            result += "<br/><span class='text-success font-weight-bold'>Active</span>";
                        }
                        else {
                            result += "<br/><span class='text-secondary font-weight-bold'>Inactive</span>";
                        }
                                         
                       
                        return event+result;
                    }
                },
                {
                    data: null,
                    name: 'order_payments.transaction_id',
                    className: 'text-left',
                    render: function (data, type, row) {

                        var order = "<span class='font-weight-normal'>ID: </span><span class='text-primary'>"+data['order_ID']+"</span>";

                        if(data['order_status_by_restaurant'] != "undefined") {
                            var order_status = '';

                            if(data['order_status_by_restaurant'] == 0) {
                                order_status = "Started preparation";
                            }
                            else if(data['order_status_by_restaurant'] == 1) {
                                order_status = "Ready for pickup";
                            }
                            else if(data['order_status_by_restaurant'] == 2) {
                                order_status = "Delivered";
                            }
                            else if(data['order_status_by_restaurant'] == 3) {
                                order_status = "Waiting";
                            }

                          order += "<br>Status: <span class='text-danger'> "+order_status+"</span>";
                        }

                        var local_date = '';
                        //var local_date = new Date(data.order_date_time+' UTC');
                            //local_date = local_date.toString();
                        local_date = data.order_date_time;

                        order += "<br>Order date: <span class='text-primary'> "+moment(local_date).format("DD MMM YYYY hh:mmA")+"</span>";
                        // local_date = new Date(data.pickup_date_time+' UTC');
                        // local_date = local_date.toString();
                        local_date = data.pickup_date_time;
                        order += "<br>Schedule pickup date: <span class='text-danger'> "+moment(local_date).format("DD MMM YYYY hh:mmA")+"</span>";

                        if(data.actual_pickup_date_time != "undefined" && data.actual_pickup_date_time){
                          // local_date = new Date(data.actual_pickup_date_time+' UTC');
                          // local_date = local_date.toString();
                          local_date = data.actual_pickup_date_time;
                          order += "<br>Actual pickup date: <span class='text-success'> "+moment(local_date).format("DD MMM YYYY hh:mmA")+"</span>";
                        }

                        var confirm_status = "Not yet";
                        if(data.is_confirm == 1) {
                            confirm_status = "Yes";
                        }

                        order += "<br>Order Confirmation: <span class='text-primary'> "+confirm_status+"</span>";
                        order += "<div>&nbsp;</div>";

                        var payment = '';
                        if(data['get_payment']['transaction_id'] != "undefined" && data['get_payment']['transaction_id']) {
                          payment += "Trans. ID: <span class='text-primary'> "+data['get_payment']['transaction_id']+"</span>";
                        }
                        else {
                            payment += "Trans. ID: <span class='text-primary'>No record.</span>";
                        }

                        var payment_status = '';

                        if(data['get_payment']['payment_status'] != "undefined") {                            
                            if(data['get_payment']['payment_status'] == 1) {
                                payment_status = "Approved";
                                payment_status = "<br>Payment Status: <span class='text-success font-weight-bold'>Approved</span>";
                            }
                            else {
                                payment_status = "Failed";
                                payment_status = "<br>Payment Status: <span class='text-danger font-weight-bold'>Failed</span>";
                            }
                            
                            payment += payment_status;
                        }

                       return order+payment;
                    }
                },                
                {
                    data: null,
                    className: 'text-left',
                    name: 'users.email',
                    render: function (data, type, row) {
                        var user = ""; 

                        if(data['get_family_member']['name'] != "undefined" && data['get_family_member']['name']){
                          user += "<span class='text-danger'> "+data['get_family_member']['name']+"</span>";
                        }

                        if(data['get_family_member']['email'] != "undefined" && data['get_family_member']['email']){
                          user += "<br/><span class='text-primary'><i class='nav-icon fa fa-envelope'></i>"+data['get_family_member']['email']+"</span>";
                        }                        

                        if(data['get_family_member']['phone'] != "undefined" && data['get_family_member']['phone']){
                          user += "<br/><span class='text-danger'><i class='nav-icon fa fa-phone'></i>"+data['get_family_member']['phone']+"</span>";
                        }

                       return user;
                    }
                },
                {
                    data: null,
                    className: 'text-left',
                    render: function (data, type, row) {
                        var amount = '';
                        amount += "<table width='100%'>";
                        amount +=   "<tr>";
                        amount +=       "<td width='60%'>Sold(base price)</td>";
                        amount +=       "<td align='right'>";
                        if(data['total_base_price'] != "undefined"){
                          amount += "<span class='text-danger'> $"+data['get_payment']['total_base_price']+"</span>";
                        }
                        amount +=       "</td>";
                        amount +=   "</tr>";

                        amount +=   "<tr>";
                        amount +=       "<td>Admin earn("+data['get_payment']['admin_commission']+"%)</td>";
                        amount +=       "<td align='right'>";
                        if(data['total_admin_commission_price'] != "undefined"){
                          amount += "<span class='text-danger'> $"+data['get_payment']['total_admin_commission_price']+"</span>";
                        }
                        amount +=       "</td>";
                        amount +=   "</tr>";

                        amount +=   "<tr>";
                        amount +=       "<td>Sold(without tax)</td>";
                        amount +=       "<td align='right'>";
                        if(data['total_price'] != "undefined"){
                          amount += "<span class='text-danger'> $"+data['get_payment']['total_price']+"</span>";
                        }
                        amount +=       "</td>";
                        amount +=   "</tr>";

                        amount +=   "<tr>";
                        amount +=       "<td>Tax.</td>";
                        amount +=       "<td align='right'>";
                        if(data['total_tax_price'] != "undefined"){
                          amount += "<span class='text-danger'> $"+data['get_payment']['total_tax_price']+"</span>";
                        }
                        amount +=       "</td>";
                        amount +=   "</tr>";

                        amount +=   "<tr>";
                        amount +=       "<td>Final sold</td>";
                        amount +=       "<td align='right'>";
                        if(data['final_price'] != "undefined"){
                          amount += "<span class='text-danger font-weight-bold blink_me'> $"+data['get_payment']['final_price']+"</span>";
                        }
                        amount +=       "</td>";
                        amount +=   "</tr>";
                        amount += "</table>";                                              

                        return amount;  
                    }
                },
                {
                    data: null,
                    className: 'text-center',
                    render: function (data, type, row) {
                        return '<a href="javascript:void(0)" title="Show Ordered Items" onclick="loadDynamicContentModal('+data['id']+')" class="btn btn-success btn-xs"><i class="fa fa-cutlery" aria-hidden="true"></i></a>\xa0\xa0\xa0'+
                            '<a title="Download Invoice" href="' + baseUrl + 'admin/orders/campaign/restaurant/'+data['get_restaurant']['id']+'/order/' +data['id']+'/'+"{{ encript_decript_data($userTimezone, 'encript', 2) }}"+ '" class="btn btn btn-primary btn-xs"><i class="fa fa-file" aria-hidden="true"></i></a>';;
                    }
                },
                { data: 'id', name: 'id' },
                { data: 'order_ID', name: 'orders.order_ID' },
                {
                    data: null,
                    className: 'text-left',
                    name: 'getPayment.transaction_id',
                    render: function (data, type, row) {
                        return data['get_payment']['transaction_id'];
                    }
                }
                
            ],
            'columnDefs': [ 
                {
                    'targets': [ 0, 1, 2, 3, 4, 5 ], /* column index  */
                    'orderable': false, /* true or false */
                    "searchable": false
                },
                {
                    'targets': [  ], /* column index   */
                    'orderable': false, /* true or false */                   
                },
                {
                    "targets": [  ], 
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": [ ],
                    "searchable": false
                },
                {
                    "targets": [ 3, 6, 7, 8 ],
                    "visible": false,                    
                }           
            ],
            'aaSorting': [ 6, 'DESC']
        });

        // Add event listener for opening and closing details
        $('#artists-table tbody').on('click', 'td.details-control', function() {
            var tr = $(this).closest('tr');
            var row = oTable.row(tr);

            if(row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');
            }
        });

        $("select[name=event], select[name=payment_status], select[name=restaurant]").on("change", function(){
            filterButton();
            oTable.draw();
        });

        $("input[name=order_id]").on("keyup", function(){
            filterButton();
            oTable.draw();
        });

        $(".filter-clear-button").on("click", function(){
            $(".filter-button").each(function(){  
                $(this).val('');

                if($(this).attr('name') == "school" || $(this).attr('name') == "restaurant" || $(this).attr('name') == "event") {
                    $(this).val(null).trigger('change');
                }

                if($(this).attr("type") == "checkbox"){
                    $(this).val(1);                    
                    $(this).prop("checked", false);
                }

                if($(this).attr('name') == "restaurant_request") {
                    $(this).prop("disabled", "disabled");
                }
            });
            $(".filter-clear-button").hide();
            oTable.draw();
        });
    });

    function filterButton()
    {  
        $(".filter-clear-button").hide();
        $(".filter-button").each(function(){            
            if(($(this).val()).length && $(this).attr('type') != "checkbox")
            {
                $(".filter-clear-button").show();
            }
        });
    }

    $(document).ready(function(){ 
        $("#event_datepicker_from, #event_datepicker_to, #event_promotion_datepicker_to, #event_promotion_datepicker_from").datepicker({
            dateFormat: 'yy-mm-dd',
            changeMonth: true,
            changeYear: true,
            todayHighlight: true,
            autoclose: true,            
            orientation: "auto",
        });

    });

    $('.select2.restaurants').select2({
        placeholder: "Select restaurant",
        multiple: false,
        dropdownCssClass: "bigdrop",
        allowClear: true,
        escapeMarkup: function (m) { return m; }
    });  

    $('.select2.events').select2({
        placeholder: "Select event",
        multiple: false,
        dropdownCssClass: "bigdrop",
        allowClear: true,
        escapeMarkup: function (m) { return m; }
    });
    
</script>
@endsection