@extends('admin.layouts.admin')
@section('title')
Admin | Event Logo 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">
@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">Event asso. Logos</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="#">Campaigns</a></li>
              <li class="breadcrumb-item"><a href="{{ route('admin.campaigns.logo.list') }}">Sponsor Logo</a></li>
              <li class="breadcrumb-item active">Logo</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 class="card-body">
                <!-- <div class="card-header"><h3 class="card-title">Events details</h3></div><br> -->
                <div class="row">
                  <div class="col-md-2"><label for="exampleInputEmail1">Event Name</label></div>
                  <div class="col-md-4"><p class="text-success">{{ $eventDetails->title?$eventDetails->title:'Not found.' }}</p></div>
                  <div class="col-md-2"><label for="exampleInputEmail1">Event Organizer Name</label></div>
                  <div class="col-md-4">
                    <p class="text-success">{{ $eventDetails->getAssociateEventOrganizer->getUser->name??'Not found.' }}</p>
                  </div>                  
                </div>

                <div class="row">
                  <div class="col-md-2"><label for="exampleInputEmail1">Event ID</label></div>
                  <div class="col-md-4"><p class="text-primary">{{ $eventDetails->event_ID?$eventDetails->event_ID:'Not found.' }}</p></div>
                  <div class="col-md-2"><label for="exampleInputEmail1">Event Organizer contact</label></div>
                  <div class="col-md-4">
                    <p class="text-primary">{{ $eventDetails->getAssociateEventOrganizer->getUser->phone??'Not found.' }}</p>
                  </div>                  
                </div>

              </div>
            </div>
          </div>
        </div> 

        <div class="form-group d-none">
          <div class="row">
            <div class="col-md-10">
                <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>         
            </div>
            
            
            <div class="col-md-2" >
            @if(false)
                <a href="{{ url('admin/campaigns/'.(Request::segment(3)).'/add') }}" class="btn btn-primary float-right">Add New</a>
            @endif
            </div>
            
          </div>
        </div>


        <!-- Main row -->
        <div class="row">
        <div class="col-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 style="width:20%">Sponsor & Package Details</th>
                  <th style="width:15%">Logo</th>
                  <th>Logo Link</th>
                  <th style="width:22%">Order & Payment Details</th>
                  <th style="width:10%">Action</th>
                  <th>id</th>
                </tr>
                </thead>
                <tbody>                
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="6" 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 -->
      @if(Request::segment(8))
        <div class="card-footer">
          <a href="{{ route('admin.reports.logo.list') }}" class="btn btn-danger">Back</a>                  
        </div>
      @endif
    </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/logo/campaign/show/{{ Request::segment(6) }}/order',
                "type": "GET",
                "data": function(d){
                    d.order_ID = "{{ Request::segment(8)??'' }}";
                    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();
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                }
            },
            columns: [
                {
                    data: null,
                    name: 'slo.order_ID',                    
                    className: 'text-left',
                    render: function (data, type, row) {
                      var package = '';

                      if(data['user_name']) {
                        package += "<span class='text-primary'>"+data['user_name']+"</span><br>";
                      }

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

                      if(data['user_phone']) {
                        package += '<span class="text-default"><i class="nav-icon fa fa-phone"></i>'+data['user_phone']+"</span>";
                      }

                      package += '<div style="margin-top: 10px;"></div><span class="font-weight-bold" style="margin-top:5px;">Selected package:</span><br>';
                      
                      package += "Name: <span class='text-primary'>"+data['package_name']+"</span><br>";
                      package += "Price: <span class='text-danger'>$"+data['package_price']+"</span>";

                      return package;
                    }
                },
                {
                    data: null,
                    className: 'text-left',
                    name: 'slop.transaction_id',
                    render: function (data, type, row) {
                        return '<img  title="" src="' + baseUrl + 'storage/images/sponsor_logo/web/'+data['logo_name']+'" style="max-height:145px; max-width:145px;" alt="No image found">';
                    }
                },                
                {
                    data: null,
                    className: 'text-left',
                    name: 'users.email',
                    render: function (data, type, row) {
                        var link = '';

                        if(data['logo_link']) {
                          if(data['logo_link'].length > 50) {
                              link = "<a href='"+data['logo_link']+"' target='_blank'>"+"<u>"+data['logo_link'].substring(1, 45)+"...</u></a>";
                          }
                          else {
                            link = "<a href='"+data['logo_link']+"' target='_blank'>"+"<u>"+data['logo_link']+"</u></a>";
                          }
                        }
                        else {
                          link = "No link.";
                        }

                        return link;
                    }
                },                
                {
                    data: null,
                    className: 'text-left',
                    name: 'users.phone',
                    render: function (data, type, row) {
                        var payment = '';
                        
                        payment += "Order ID: <span class='text-danger'> "+data['order_ID']+"</span><br>";

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

                        var payment_status = '';

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

                       return payment;
                    }
                },
                {
                    data: null,
                    className: 'text-center',
                    render: function (data, type, row) {
                      var approve = '';

                      if(data['is_approve_by_admin'] == 1) {
                        approve = "<span class='text-success font-weight-bold'>Approved</span>";
                      }
                      else if(data['is_approve_by_admin'] == 0) {
                        approve = '<a title="Show" href="' + baseUrl + 'admin/campaigns/logo/campaign/show/' + data['event_org_id'] +'/'+data['sloi_id']+'" class="btn btn-primary" onclick="return confirm(\'Are you sure?\')">Approve</a>';
                      }
                        
                        return approve;                       
                    }
                },                                               
                
                { data: 'sloi_id', name: 'sloi.id' },
            ],
            'columnDefs': [ 
                {
                    'targets': [ 4 ], /* column index  */
                    'orderable': false, /* true or false */
                    "searchable": false
                },
                {
                    'targets': [ 1, 2, 3 ], /* column index   */
                    'orderable': false, /* true or false */                   
                },
                {
                    "targets": [  ], 
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": [ 5 ],
                    "visible": false,                    
                }           
            ],
            'aaSorting': [ 5, '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]").on("change", function(){
            filterButton();
            oTable.draw();
        });

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

                if($(this).attr("type") == "checkbox"){
                    $(this).val(1);                    
                    $(this).prop("checked", false);
                }
            });
            $(".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).on('change', '.active-status', function (event) {
        
        var status = "inactive";
        if ($(this).is(':checked')) {
            status = "active";
        }        
        //console.log(status);        
            
        var serviceRow = $(this).attr('data-id');
        $.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",
        });

    })
    
    
</script>
@endsection