@extends('admin.layouts.admin')
@section('title')
Admin | Logo Order 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">All Sponsor logo orders</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">Sponsor Logo 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 -->

        @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">
                        <input type="text" class="form-control filter-button" name="user_email" id="user_email" placeholder="Enter Sponsor Email" 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" name="order_id" id="order_id" placeholder="Enter Order id" value="" autocomplete="off">
                    </div>
                    <div class="col-md-3 pb-md-0 pb-lg-2 pb-3" >
                        <select class="form-control filter-button" name="payment_status" id="payment_status">
                            <option value="">Payment status</option>
                            <option value="1" >Success</option>
                            <option value="4" >Failed</option>
                        </select>
                    </div>
                    <div class="col-md-3 pb-md-0 pb-lg-2 pb-3" >
                        <select class="form-control filter-button" name="logo_package" id="logo_package">
                            <option value="">Select logo package</option>
                            @if(objectToArray($logoPackageList))
                                @foreach($logoPackageList as $key3 => $package)
                                    <option value="{{ $package->id }}">{{ $package->package_name }}</option>
                                @endforeach
                            @endif
                        </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>Sponsor & package</th>
                    <th>Selected Events</th>
                    <th style="width:15%">Uploaded Logo</th>
                    <th>Order & payment</th>
                    <th>Payment Price</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 -->
    </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/reports/logo/list',
                "type": "GET",
                "data": function(d){
                    d.user_email = $("input[name=user_email]").val();
                    d.order_id = $("input[name=order_id]").val();
                    d.payment_status = $("select[name=payment_status]").val();
                    d.logo_package = $("select[name=logo_package]").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: 'order_ID',
                    className: 'text-left',
                    render: function (data, type, row) {

                        var result = "<span class='text-primary'>"+data['get_sponsor']['name']+"</a></span>"; 

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

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

                        if(data['get_sponsor']['is_active'] != "undefined" && data['get_sponsor']['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>";
                        }

                        var result2 = '';
                        if(typeof(data['get_sponsor_logo_order_items']) != "undefined" && data['get_sponsor_logo_order_items'] !== null && data['get_sponsor_logo_order_items'].length ) {
                            
                            $.each( data['get_sponsor_logo_order_items'], function( key, value ) {
                                result2 = "<br/><span class='text-black font-weight-bold'>"+value['get_logo_package']['package_name']+"</span>";
                            });
                        }

                        if(result2 != "") {
                            result += "<br><br>Selected package:";
                            result += result2;
                        }

                       return result;
                    }
                },
                {
                    data: null,
                    name: 'getPaymentDetails.transaction_id',                    
                    className: 'text-left',
                    render: function (data, type, row) {

                        var result = '';
                        if(typeof(data['get_sponsor_logo_order_items']) != "undefined" && data['get_sponsor_logo_order_items'] !== null && data['get_sponsor_logo_order_items'].length ) {
                            
                            $.each( data['get_sponsor_logo_order_items'], function( key, value ) {
                                result += "<div class=''>"+(key+1)+". ";
                                result += "<a title='"+value['get_event']['title']+"' href="+baseUrl+"admin/campaigns/logo/campaign/show/"+(value['get_event']['id'])+"/order/"+(data['order_ID'])+">Event ID: <span class='text-primary'>"+(value['get_event']['event_ID'])+"</span></a>";

                                if(value['is_approve_by_admin'] != "undefined" && value['is_approve_by_admin'] == 1) {
                                    result += "<br/><span class='text-success font-weight-bold'>Logo approved</span>";
                                }
                                else {
                                    result += "<br/><a title='"+value['get_event']['title']+"' href="+baseUrl+"admin/campaigns/logo/campaign/show/"+(value['get_event']['id'])+"/order/"+(data['order_ID'])+"><span class='text-danger' style='text-decoration: underline;'>Pending logo approval</span></a>";
                                }

                                result += "<p></p>";

                                result += "</div>";
                            });
                        }
                        else {
                            result = 'No event selected.';
                        }

                        return result;
                    }
                },
                {
                    data: null,
                    name: 'getSponsor.email',
                    className: 'text-left',
                    render: function (data, type, row) {

                        var logo = '<div>No logo found.</div>';
                        var link = "<div>No link.</div>";
                        if(typeof(data['get_sponsor_logo_order_items']) != "undefined" && data['get_sponsor_logo_order_items'] !== null && data['get_sponsor_logo_order_items'].length ) {
                            
                            $.each( data['get_sponsor_logo_order_items'], function( key, value ) {
                                logo = '<img  title="" src="' + baseUrl + 'storage/images/sponsor_logo/web/'+value['logo_name']+'" style="max-height:145px; max-width:145px;" alt="No image found">';

                                if(typeof(value['logo_link']) != "undefined" && value['logo_link'] !== null) {

                                    if(value['logo_link']) {
                                        link = "<br>"+"<a href='"+value['logo_link']+"' target='_blank'><u>"+value['logo_link']+"</u></a>";
                                    }

                                    if(value['logo_link'].length > 20) {
                                        link = "<br>"+"<a href='"+value['logo_link']+"' target='_blank'><u>"+value['logo_link'].substring(1, 20)+"...</u></a>";
                                    }
                                }
                            });
                        }

                        return logo+link;
                    }
                },
                {
                    data: null,
                    name: 'getSponsor.phone',                    
                    className: 'text-left',
                    render: function (data, type, row) {
                        var result = "<span class='font-weight-normal'>ID: </span><span class='text-primary font-weight-bold'>"+data['order_ID']+"</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'];

                        result += "<br>Order date: <span class='text-danger'> "+moment(local_date).format("DD MMM YYYY hh:mmA")+"</span>";

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

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

                        return result+payment;
                    }
                },
                {
                    data: null,
                    name: '',
                    className: 'text-left',
                    render: function (data, type, row) {

                        var amount = '';
                        amount += "<table width='100%'>";
                        amount +=   "<tr>";
                        amount +=       "<td>Sub Total</td>";
                        amount +=       "<td align='right'>";
                        if(data['get_payment_details']['total_price'] != "undefined"){
                          amount += "<span class='text-danger'> $"+data['get_payment_details']['total_price']+"</span>";
                        }
                        amount +=       "</td>";
                        amount +=   "</tr>";

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

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

                        return amount;
                    }
                },
                { data: 'id', name: 'id' }                
            ],
            'columnDefs': [
                {
                    'targets': [ 0, 1, 2, 3, 4 ], /* column index   */
                    'orderable': false, /* true or false */                   
                },
                {
                    "targets": [ 5 ], 
                    "visible": false,
                },
                {
                    "targets": [ 4, 5 ],
                    "searchable": false
                }                           
            ],
            'aaSorting': [ 5, 'DESC']
        });

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

        $("input[name=user_email], 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') == "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()).length && $(this).attr('type') != "checkbox")
            {
                $(".filter-clear-button").show();
            }
        });
    }

    $('.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; }
    });
    
</script>
@endsection