@extends('admin.layouts.admin')
@section('title')
Admin | Ordered Restaurant Campaign 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 type="text/css">
    .select2-container--default .select2-results>.select2-results__options{
    max-height: 400px !important;
}

    .select2-container--default ul.select2-results__options li[aria-label="Schools"],
    .select2-container--default ul.select2-results__options li[aria-label="Other Charities"] {
        text-align: center!important;
    }
</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">Restaurant associated Campaigns</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"><a href="{{ route('admin.reports.restaurant.list') }}">Restaurant</a></li>
              <li class="breadcrumb-item active">Campaigns</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 -->

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

        <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 events filter-button" name="event">
                            <option value="">Select event</option>
                            @if(objectToArray($events))
                                @foreach($events as $key3 => $event)
                                    <option value="{{ $event->id }}">{{ $event->event_ID."- ".$event->title }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>

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

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

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

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

                    <div class="col-md-6 pb-md-0 pb-lg-0 pb-0">
                    </div>
                </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>
        </div>

        <div class="row">
          <div class="col-12 col-md-12 col-lg-12 order-2 order-md-1">
            <div class="row">
              <div class="col-12 col-sm-4">
                <div class="info-box bg-light">
                  <div class="info-box-content">
                    <span class="info-box-text text-center text-muted">Total Campaigns Collection</span>
                    <span class="info-box-number text-center text-danger mb-0 total_campaign_collection blink_me">
                      
                    </span>
                  </div>
                </div>
              </div>
              <div class="col-12 col-sm-4">
                <div class="info-box bg-light">
                  <div class="info-box-content">
                    <span class="info-box-text text-center text-muted">Total Restaurant Collection</span>
                    <span class="info-box-number text-center text-muted mb-0 total_restaurant_collection blink_me">
                      
                    </span>
                  </div>
                </div>
              </div>
              <div class="col-12 col-sm-4">
                <div class="info-box bg-light">
                  <div class="info-box-content">
                    <span class="info-box-text text-center text-muted">Total Admin Collection</span>
                    <span class="info-box-number text-center mb-0 text-primary total_admin_collection blink_me">
                      
                    </span>
                  </div>
                </div>
              </div>

            </div>
          </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>Event Details</th>
                    <th width="20%">Organization Details</th>
                    <th width="30%">Amount distribution</th>
                    <th width="35%">Amount (total)</th>
                    <th width="7%">Action</th>
                    <th>id</th>
                    <th>Total Campaigns Collection</th>
                    <th>Total Restaurant Collection</th>
                    <th>Total Admin Collection</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>
    </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 type="text/javascript">
    var oTable = '';
    $(document).ready(function () {
        oTable = $('#artists-table').DataTable({
            "lengthMenu": [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, "All"]],
            "language": {
                "lengthMenu": "Show: _MENU_ records per page",
                "zeroRecords": "Oops No record Found",                
                "infoEmpty": "No records available",
                "infoFiltered": "(filtered from _MAX_ total records)"
            },
            paging: true,
            processing: true,
            serverSide: false,
            pagingType: 'full_numbers',
            ajax: {
                "url": baseUrl + 'admin/reports/restaurant/{{ Request::segment(4) }}',
                "type": "GET",
                "data": function(d){
                    d.order_start = $("input[name=order_datetimepicker_from]").val();
                    d.order_end = $("input[name=order_datetimepicker_to]").val();
                    d.restaurant = "{{ Request::segment(4)??'' }}"; 
                    d.event = $("select[name=event]").val();
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                }
            },
            columns: [
                {
                    data: null,
                    name: 'event_ID',
                    className: 'text-left',
                    render: function (data, type, row) {
                        var event = '';
                        if(data['event_ID'] != "undefined" && data['event_ID']){
                            event += "ID: <span class='text-primary'>"+data['event_ID']+"</span>";
                        }

                        event += "<br/><b>Name:</b> <a style='text-decoration: underline;' title='Show' href="+baseUrl+"admin/campaigns/event/show/"+data['event_org_id']+"><span class='text-primary'><span class='text-primary'>"+data['title']+"</span></a>";
                        var start = new Date(data['event_start_date']);
                        var end   = new Date(data['event_end_date']);
                        var diff  = new Date(end - start);                        
                        // get days
                        var days  = diff/1000/60/60/24;
                        if(data['target_fund'] != "undefined" && data['target_fund']){
                            event += "<br/>Target Fund: <span class='text-danger font-weight-bold'> $"+data['target_fund']+"</span>";
                        }
                        if(data['type'] != "undefined" && data['type']==1){
                            event += "<br/>Type: <span class='text-primary'> "+"One Day"+"</span>";
                        }

                        if(data['type'] != "undefined" && data['type']==2){
                            event += "<br/>Type: <span class='text-primary'> "+"Multiple Day"+"</span>";
                        }

                        if(parseInt(days) == 0){
                            event += "<br/><span class='text-danger'>"+moment(data['event_start_date']).format("DD MMM YYYY")+"</span> - One day";
                        }
                        else if (days > 0){
                            event += "<br/><span class='text-danger'>"+moment(data['event_start_date']).format("DD MMM YYYY")+" - "+moment(data.event_end_date).format("DD MMM YYYY")+"</span>";
                        }                        

                        event += '<p></p><b>Event Promotion:</b>';                    
                        var start = new Date(data['promotion_start_date']);
                        var end   = new Date(data['promotion_end_date']);
                        var diff  = new Date(end - start);                        
                        // get days
                        var days  = diff/1000/60/60/24;
                        if(parseInt(days) == 0){
                            event += "<br><span class='text-danger'>"+moment(start).format("DD MMM YYYY")+"</span> - One day";
                        }
                        else if (days > 0){
                            event += "<br/><span class='text-danger'>"+moment(start).format("DD MMM YYYY")+" - "+moment(end).format("DD MMM YYYY")+"</span>";
                        }

                        if(data['is_all_day_pickup']){
                            event += "<br/><span class='text-primary'>All day pickup</span>";
                        }
                        else{
                            var current_date = new Date();
                            // current_date = moment(current_date).format("YYYY-MM-DD");
                            // start = current_date+":"+data['promotion_start_time'];
                            // start = new Date(start);
                            // end   = current_date+":"+data['promotion_end_time'];
                            // end   = new Date(end);                            
                            // var local_date = new Date(start+' UTC');
                            // start = local_date.toString();
                            // local_date = new Date(end+' UTC');
                            // end = local_date.toString();

                            start = data['promotion_start_time'];
                            end   = data['promotion_end_time'];

                            event += "<br/><span class='text-primary'>"+moment(start).format("hh:mmA")+" - "+moment(end).format("hh:mmA")+"</span>";                            
                        }                       
                       
                        return event;
                    }
                },
                {
                    data: null,
                    name: 'target_fund',
                    className: 'text-left',
                    render: function (data, type, row) {

                        var organization = "<a style='text-decoration: underline;' title='Show' href="+baseUrl+"admin/campaigns/charitable-organization/show/"+data['organization_org_id']+"><span class='text-primary'>"+data['name']+"</a></span>";

                        if(data['organization_ID'] != "undefined" && data['organization_ID']){
                          organization += "<br/>Id:<span class='text-success'> "+data['organization_ID']+"</span>";
                        } 

                        if(data['is_school'] != "undefined" && data['is_school']==1){
                          organization += "<br/><span class='text-danger'> "+"School"+"</span>";
                        }else{
                          organization += "<br/><span class='text-danger'> "+"Other Charitable Organization"+"</span>";
                        }
                        if(data['email'] != "undefined" && data['email']){
                          organization += "<br/><span class='text-primary'> "+data['email']+"</span>";
                        }

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

                        if(data['organization_is_active'] != "undefined" && data['organization_is_active'] == 1) {
                            organization += "<br/><span class='text-success font-weight-bold'>Active</span>";
                        }
                        else {
                            organization += "<br/><span class='text-secondary font-weight-bold'>Inactive</span>";
                        }

                       return organization;
                    }
                },
                {
                    data: null,
                    name: 'events.id',                    
                    className: 'text-left',
                    render: function (data, type, row) {

                        var amount = '';
                        amount += "<table width='100%' class=' '>";

                        amount +=   "<tr>";
                        amount +=       "<td width='60%'>Badge discount rate</td>";
                        amount +=       "<td align='right'>";
                        if(data['discount_rate'] != "undefined"  && data['discount_rate'] != null){
                          amount += "<span class='text-primary'> "+data['discount_rate']+"%</span>";
                        }
                        amount +=       "</td>";
                        amount +=   "</tr>";

                        var price = Math.ceil(data['total_base_price']*data['discount_rate'])/100;                       

                        amount +=   "<tr>";
                        amount +=       "<td>Campaign collection</td>";
                        amount +=       "<td align='right'>";                        
                        amount +=           "<span class='text-danger'> $"+price.toFixed(2)+"</span>";
                        amount +=       "</td>";
                        amount +=   "</tr>";

                        amount +=   "<tr>";
                        amount +=       "<td>Restaurant collection</td>";
                        amount +=       "<td align='right'>";                        
                        amount +=           "<span class='text-danger'> $"+(data['total_base_price'] -price).toFixed(2)+"</span>";
                        amount +=       "</td>";
                        amount +=   "</tr>";

                        amount +=   "<tr>";
                        amount +=       "<td>Admin collection</td>";
                        amount +=       "<td align='right'>";                        
                        amount +=           "<span class='text-danger'> $"+data['total_admin_commission_price']+"</span>";
                        amount +=       "</td>";
                        amount +=   "</tr>";
                        amount += "</table>";

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

                        amount +=   "<tr>";
                        amount +=       "<td>Admin earn</td>";
                        amount +=       "<td align='right'>";
                        if(data['total_admin_commission_price'] != "undefined"){
                          amount += "<span class='text-danger'> $"+data['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['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['total_tax_price']+"</span>";
                        }
                        amount +=       "</td>";
                        amount +=   "</tr>";

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

                        return amount;                     
                    }
                },
                {
                    data: null,
                    className: 'text-center',
                    render: function (data, type, row) {
                        return '<a title="Show" href="' + baseUrl + 'admin/reports/restaurant/' +"{{ Request::segment(4) }}/campaign/"+data['event_org_id']+ '" class="delete-btn btn btn-warning btn-xs"><i class="fa fa-eye text-dark" aria-hidden="true"></i></a>';                       
                    }
                },
                { data: 'event_org_id', name: 'events.id' },
                {
                    name: 'events.id',                    
                    className: 'text-left',
                    data: function (data, type, row) {
                        var base_price = Math.ceil(data['total_base_price']*data['discount_rate'])/100;
                        return base_price.toFixed(2);
                    },

                },
                { 
                    name: 'events.id',                    
                    className: 'text-left',
                    data: function (data, type, row) {
                        var price = Math.ceil(data['total_base_price']*data['discount_rate'])/100; 
                        price = (data['total_base_price'] - price).toFixed(2);
                        return price;
                    }
                },
                {
                    data: 'total_admin_commission_price',
                    name: 'events.id'
                },
            ],
            'columnDefs': [
                {
                    'targets': [ 0, 1, 2, 3, 4, 6, 7, 8 ], /* column index   */
                    'orderable': false /* true or false */                   
                },
                {
                    "targets": [ 1, 5, 6, 7, 8 ], 
                    "visible": false
                },
                {
                    "targets": [ 1, 2, 3, 4, 6, 7, 8 ],
                    "searchable": false
                }                           
            ],
            'aaSorting': [ 5, 'DESC'],
            "footerCallback": function ( row, data, start, end, display ) {
                var api = this.api(), data;

                var total_campaign_collection = api.column(6).data().sum().toFixed(2);
                var total_restaurant_collection = api.column(7).data().sum().toFixed(2);
                var total_admin_collection = api.column(8).data().sum().toFixed(2);

                var footerHtml = '';
                footerHtml += "<div class='row'>";
                footerHtml += "  <div class='col-md-2'>Total campaign collection</div>";
                footerHtml += "  <div class='col-md-2 font-weight-bold text-primary total_campaign_collection2'>$"+total_campaign_collection+"</div>";
                footerHtml += "  <div class='col-md-2'>Total restaurant collection</div>";
                footerHtml += "  <div class='col-md-2 font-weight-bold text-primary total_restaurant_collection2'>$"+total_restaurant_collection+"</div>";
                footerHtml += "  <div class='col-md-2'>Total admin collection</div>";
                footerHtml += "  <div class='col-md-2 font-weight-bold text-primary total_admin_collection2'>$"+total_admin_collection+"</div>";
                footerHtml += "</div>";

                $("span.total_campaign_collection").text("$"+total_campaign_collection);
                $("span.total_restaurant_collection").text("$"+total_restaurant_collection);
                $("span.total_admin_collection").text("$"+total_admin_collection);

                $( api.column( 0 ).footer() ).html(footerHtml);
            }
        });

        $("input[name=order_datetimepicker_from], input[name=order_datetimepicker_to], select[name=event]").on("change", function(){
            filterButton();
            oTable.ajax.reload();
        });

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

                if($(this).attr('name') == "event" || $(this).attr('name') == "restaurant" || $(this).attr('name') == "eventOrganizer") {
                    $(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.ajax.reload();
        });
    });

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

<script type="text/javascript">
    $.fn.dataTable.Api.register( 'sum()', function ( ) {
        return this.flatten().reduce( function ( a, b ) {
            if ( typeof a === 'string' ) {
                a = a.replace(/[^\d.-]/g, '') * 1;
            }
            if ( typeof b === 'string' ) {
                b = b.replace(/[^\d.-]/g, '') * 1;
            }

            return a + b;
        }, 0 );
    } );

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

@endsection