@extends('admin.layouts.admin')
@section('title')
Admin | 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: 300px !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">
            <h1 class="m-0 text-dark">All Campaign</h1>
          </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="#">Campaigns</a></li>
              <li class="breadcrumb-item active">Campaign</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-3 pb-md-0 pb-lg-2 pb-3">
                        <select class="form-control filter-button" name="active_status" >
                            <option value="">Select Approve status</option>                      
                            <option value="1" {!! old('active_status')?'selected="selected"':'' !!}>Active</option>
                            <option value="0" {!! old('active_status')?'selected="selected"':'' !!}>Inactive</option>
                        </select>
                    </div>

                    <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>

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

                    <div class="col-md-6 pb-md-0 pb-lg-2 pb-3">
                        <select class="form-control select2 event-organizer filter-button" name="eventOrganizer">
                            <option value="">Select Event Organizer</option>
                            @if($eventOrganizers)
                                @foreach($eventOrganizers as $key3 => $eventOrganizer)
                                    <option value="{{ $eventOrganizer['id'] }}">{{ $eventOrganizer['name'] }} <i>{{ "(".$eventOrganizer['email'].")" }}</i></option>
                                @endforeach
                            @endif
                        </select>                    
                    </div>

                    <div class="col-md-12 pb-md-0 pb-lg-2 pb-3">
                        <select class="form-control select2 filter-button school" name="school"></select>
                    </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>

            @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>Event Organizer</th>                    
                    <th>Event</th>
                    <th>Event Promotion</th>  
                    <th>Organization</th>                 
                    <th>Restaurant(s)</th>                             
                    <th>Status</th>
                    <th>Action</th>
                    <th>id</th>
                    <th>user email</th>
                    <th>user phone</th>
                    <th>event name</th>
                    <th>event unique id</th> 
                    <th>organization name</th>
                    <th>organization email</th> 
                    <th>organization phone</th>
                    <th>organization unique id</th>                
                </tr>
                </thead>
                <tbody>                
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="16" 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 -->
    </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({
            "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: true,
            pagingType: 'full_numbers',
            ajax: {
                "url": baseUrl + 'admin/campaigns/campaign/list',
                "type": "GET",
                "data": function(d){
                    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: [
                {
                    data: null,
                    name: 'users.name',
                    className: 'text-left',
                    render: function (data, type, row) {

                        var user = "<a style='text-decoration: underline;' title='Show event organizer' href="+baseUrl+"admin/users/event-organizer/show/"+data['user_org_id']+"><span class='text-primary'>"+data['user_name']+"</a></span>"; 

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

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

                        if(data['is_user_active'] != "undefined" && data['is_user_active'] == 1) {
                            user += "<br/><span class='text-success font-weight-bold'>Active</span>";
                        }
                        else {
                            user += "<br/><span class='text-secondary font-weight-bold'>Inactive</span>";
                        }
                       return user;
                    }
                },
                {
                    data: null,
                    name: 'events.id',                    
                    className: 'text-left',
                    render: function (data, type, row) {
                        var event = "<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-primary'> $"+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>";
                        }

                        if(data['event_ID'] != "undefined" && data['event_ID']){
                            event += "<br/>ID: <span class='text-primary'>"+data['event_ID']+"</span>";
                        }
                       
                       
                        return event;
                    }
                },
                {
                    data: null,
                    name: 'events.id',                    
                    className: 'text-left',
                    render: function (data, type, row) {
                        var promotion = '';                    
                        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){
                            promotion += "<span class='text-danger'>"+moment(start).format("DD MMM YYYY")+"</span> - One day";
                        }
                        else if (days > 0){
                            promotion += "<span class='text-danger'>"+moment(start).format("DD MMM YYYY")+" - "+moment(end).format("DD MMM YYYY")+"</span>";
                        }

                        if(data['is_all_day_pickup']){
                            promotion += "<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();
                            
                            promotion += "<br/><span class='text-primary'>"+moment(start).format("hh:mmA")+" - "+moment(end).format("hh:mmA")+"</span>";                            
                        }                        

                        return promotion;
                    }
                },
                {
                    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,
                    className: 'text-left',
                    render: function (data, type, row) {
                        var restaurant = data['new_request_count']?("<a href='" +baseUrl+ "admin/campaigns/campaign/show/" + data['event_org_id']+ "'><div class='blink_me'><b><span class='text-danger'>"+data['new_request_count']+' new request(s)</span></b><br /></div></a>'):"<span class='text-default'>No new request</span><br />";

                        restaurant += "<span class='text-primary'>Total restaurant("+data['restaurant_count']+")</span><br />";

                        restaurant += "<span class='text-default'>Interest sent("+data['admin_sent_request_count']+")</span><br />";

                        if(data['admin_sent_request_count'] && data['pending_restautant_response_count']) {
                            var total_pending_restaurant_response = data['admin_sent_request_count'] - data['confirmed_restautant_response_count'] - data['reject_restautant_response_count'];

                            if(total_pending_restaurant_response > 0) {
                                restaurant += "<span class='text-default'>Pending("+total_pending_restaurant_response+")</span><br />";
                            }
                        }

                        restaurant += "<span class='text-success'>Confirmed("+data['confirmed_restautant_response_count']+")</span><br />";
                        restaurant += "<span class='text-default'>Rejected("+data['reject_restautant_response_count']+")</span>";

                        return restaurant;                        
                    }
                },                
                {
                    data: null,
                    className: 'text-center',
                    render: function (data, type, row) {
                        return '<label class="switch"><input type="checkbox" '+(data['is_active_event']==1?'checked':'')+' data-id="'+data['event_org_id']+'" class="success active-status"><span class="slider round"></span></label>';
                    }
                },
                {
                    data: null,
                    className: 'text-center',
                    render: function (data, type, row) {
                        
                        return '<!--<a title="Edit" href="' + baseUrl + 'admin/campaigns/event/edit/' + data.id + '" class="edit-btn btn btn-info btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></a>\xa0\xa0\xa0-->'+''+
                            '<a title="Show" href="' + baseUrl + 'admin/campaigns/campaign/show/' +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: 'event_org_id' },

                { data: 'user_email', name: 'users.email' },
                { data: 'user_phone', name: 'users.phone' },
                { data: 'title', name: 'events.title' },
                { data: 'event_ID', name: 'events.event_ID' },
                { data: 'name', name: 'co.name' },
                { data: 'email', name: 'co.email' },
                { data: 'phone', name: 'co.phone' },
                { data: 'organization_ID', name: 'co.organization_ID' },
            ],
            'columnDefs': [ 
                {
                    'targets': [ 4, 5, 6 ], /* column index  */
                    'orderable': false, /* true or false */
                    "searchable": false
                },
                {
                    'targets': [ 2, 3, 4, 5, 6, 8, 9, 10, 11, 12, 13, 14, 15 ], /* column index   */
                    'orderable': false, /* true or false */                   
                },
                {
                    "targets": [  ], 
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": [ 1, 7 ],
                    "searchable": false
                },
                {
                    "targets": [ 7, 8, 9, 10, 11, 12, 13, 14, 15 ],
                    "visible": false,                    
                }           
            ],
            'aaSorting': [ 7, 'DESC']
        });

        $("select[name=active_status], select[name=event_type], input[name=event_datepicker_from], input[name=event_datepicker_to], input[name=event_promotion_datepicker_from], input[name=event_promotion_datepicker_to], input[name=is_all_day_pickup], select[name=school], select[name=admin_request], select[name=restaurant_request], select[name=event_time_type], select[name=restaurant], select[name=eventOrganizer]").on("change", 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') == "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.draw();
        });
    });

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

    $(document).on('change', '.active-status', function (event) {
        
        var status = "inactive";
        if ($(this).is(':checked')) {
            status = "active";
        }        
        //console.log(status);        
            
        var serviceRow = $(this).attr('data-id');
       // alert(serviceRow);
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            }
        });
        $.ajax({
            url: baseUrl + 'admin/campaigns/event/change_status',
            method: 'post',
            dataType: 'json',
            data: {
                is_active: status,
                id: serviceRow,
                _token: $('meta[name="csrf_token"]').attr('content')                   
            },
            success: function (result) {
                if (parseInt(result.res) == parseInt(1)) {
                    showSuccessMsg(result.msg);
                    oTable.draw();
                } else {
                    //Do nothing
                }
            }
        });
        
    });

    $(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').select2({
    //     placeholder: "Select school/organization",
    //     multiple: false,
    //     dropdownCssClass: "bigdrop",
    //     allowClear: true,
    //     escapeMarkup: function (m) { return m; }
    // }); 

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

    $('.select2.event-organizer').select2({
        placeholder: "Select Event Organizer",
        multiple: false,
        dropdownCssClass: "bigdrop",
        allowClear: true,
        escapeMarkup: function (m) { return m; }
    });

    $("select[name=admin_request]").on("change", function(){
        var admin_request = $(this).val();
        $("select[name=restaurant_request]").val('');
        $("select[name=restaurant_request]").prop("disabled", "disabled");

        if(admin_request == 1) {
            $("select[name=restaurant_request]").prop("disabled", false);
        }
    });

    var CSRF_TOKEN = $('meta[name="csrf_token"]').attr('content');

    $( window ).on("load", function() {
        
        $('.select2.school').select2({
            placeholder: "Search School/Charity...",
            allowClear: true,
            ajax: {
                url: baseUrl + 'admin/campaigns/charitable-organization/getByScroll',
                dataType: 'json',
                delay: 250,
                cache: false,
                data: function (params) {
                    return {
                        _token: CSRF_TOKEN,
                        search: params.term || '',
                        page: params.page || 1,
                    };
                },
                processResults: function(data, params) {
                    return data;
                },              
            }
        });
    });
    
</script>
@endsection