@extends('layouts.master')
@section('title') Campaign Management @endsection
@section('css')
<link rel="stylesheet" type="text/css" href="{{ URL::asset('assets/libs/datatables/datatables.min.css')}}">
<link rel="stylesheet" href="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.css')}}">
@endsection
@section('content')
@component('common-components.breadcrumb')
@slot('title') @endslot
@slot('add_btn') <h4 class="card-title">

    @can('Campaign Create')
  {{-- @canany(['Admin-Users Edit','Admin-Users View','Admin-Users Delete']) --}}
    <a style="margin-left: -28%;background:#314667;border:1px solid #314667;color:white;" href="{{ route('campaign.create') }}"
        class="btn btn-primary waves-effect btn-label waves-light" ><i class="bx bx-plus label-icon"></i>Add Campaign</a>
    @endcan
    </h4> @endslot
@endcomponent
<style>
.form-control{
    color: #314667 !important;
}
body{
    background:#f8f8fb !important
}
.nav-tabs .nav-link.active{
background: #314667 !important;
    border: 1px solid #314667 !important;

}
.nav-tabs .nav-link.active > li > a{
    color: black !important;
}

.nav-link.active a{
    color:white !important;
}

</style>
<div class="row">
    <div class="col-12">

                  @if ($notification = Session::get('error'))
                        <div class="alert alert-danger alert-block">
                            <button type="button" class="close" data-dismiss="alert">×</button>
                                <strong>{{ $notification }}</strong>
                        </div>
                    @endif
                    @if ($notification = Session::get('success'))
                        <div class="alert alert-success alert-block">
                            <button type="button" class="close" data-dismiss="alert">×</button>
                                <strong>{{ $notification }}</strong>
                        </div>
                    @endif
                    <div>
                        <ul class="nav nav-tabs" role="tablist" style="margin-bottom: 7px;">

                            <li class="nav-link active"><a href="#Facebook" role="tab" data-toggle="tab">Facebook</a></li>
                            <li class="nav-link"><a href="#Instagram" role="tab" data-toggle="tab">Instagram</a></li>
                          </ul>


                          <div class="tab-content">
                            <div class="tab-pane active" id="Facebook">

                            <table id="UsersList1" class="table-responsive border-0  border-specing-20">
                                <thead class="d-none">
                                    <tr>
                                        <th>#</th>
                                        <th>#</th>

                                    </tr>
                                </thead>
                                <tbody>

                                    <tr width="100">
                                        @php
                                              $rowCount = 1; $numItems = count($facebook_campaign);  @endphp
                                        @foreach($facebook_campaign as $key => $row)

                                        <td class="box-shadow-1 border-specing-20 col-lg-6 col-12">
                                                 <div class="card">
                                                    <div class="card-body">
                                                        <div class="dropdown" style="float: right">
                                                            <a href="#" class="dropdown-toggle card-drop" data-toggle="dropdown" aria-expanded="false">
                                                                <i class="mdi mdi-dots-vertical font-size-18"></i>
                                                            </a>
                                                            <div class="dropdown-menu dropdown-menu-right" >
                                                                    {{-- <a class="dropdown-item" href="{{route('admin_users.edit', $row['campaign']->id)}}"><i class="fas fa-pencil-alt text-success me-1"></i>&nbsp;Edit</a> --}}
                                                                     <a class="dropdown-item" href="{{route('campaign.show', $row['campaign']->id)}}"><i class="fas fa-eye text-primary me-1"></i>&nbsp;View</a>
                                                                    {{-- <a class="dropdown-item" href="javascript:void(0);" data-id="{{$row['campaign']->id}}" id="delete"><i class="fas fa-trash text-danger me-1"></i>&nbsp; Delete</a> --}}
                                                            </div>
                                                        </div>
                                                    <div class="media">

                                                        <div class="avatar-md mr-4">
                                                            <span class="avatar-title rounded-circle bg-light text-danger font-size-16">
                                                                @if(!empty($row['campaign']->cover_photo))
                                                                <img src="{{ asset('/uploads/campaign_images/') }}/{{ $row['campaign']->cover_photo }}" alt="" height="30">
                                                                @else
                                                                @php $text = preg_match('@(https?://([-\w\.]+)+(:\d+)?(/([-\w/_\.]*(\?\S+)?)?)?)@', $row['campaign']->facebook_image_url); @endphp
                                                                @if($text == 1)
                                                                <img src="{{ $row['campaign']->facebook_image_url }}" alt="" height="30">
                                                                @else
                                                                <img src="{{ asset('/uploads/campaign_images/') }}/{{ $row['campaign']->facebook_image_url }}" alt="" height="30">
                                                                @endif

                                                                @endif
                                                            </span>
                                                        </div>
                                                        <div class="media-body overflow-hidden">

                                                            <h5 class="text-truncate font-size-15"><a href="campaign/show/{{ $row['campaign']->id }}" class="text-dark">{{ $row['campaign']->title != ""  ? $row['campaign']->title :  implode(' ', array_slice(str_word_count($row['campaign']->facebook_post_title,2),0,7))}}</a></h5>
                                                            <p class="text-muted mb-4"> {!! $row['campaign']->description !!}

                                                            </p>
                                                            @if (Auth::user()->role == 1)
                                                            <p class="text-muted mb-4">Campaign created by - {!! $row['campaign']->name !!} </p>
                                                            @endif


                                                            @php
                                                            $j = 0;
                                                            @endphp
                                                            <div class="team">
                                                                @foreach ( $row['donor'] as $donor)
                                                                @if($j == 5)
                                                                @php break; @endphp
                                                                @endif
                                                                @if(!$donor->profile_pic)
                                                                <a href="javascript: void(0);" class="team-member d-inline-block" data-toggle="tooltip" data-placement="top" title="" data-original-title="{{$donor->name}}">
                                                                    <img src="{{ asset('/assets/images/users/avatar-2.png') }}" class="rounded-circle avatar-xs m-1" alt="">
                                                                </a>
                                                                @else
                                                                <a href="javascript: void(0);" class="team-member d-inline-block" data-toggle="tooltip" data-placement="top" title="" data-original-title="{{$donor->name}}">
                                                                    <img src="{{ asset('/upload/donors/') }}/{{$donor->profile_pic}}" class="rounded-circle avatar-xs m-1" alt="">
                                                                </a>
                                                                @endif
                                                                @php $j++; @endphp
                                                                @endforeach


                                                             <!-- <a href="javascript: void(0);" class="team-member d-inline-block" data-toggle="tooltip" data-placement="top" title="" data-original-title="Jennifer Walker">
                                                                    <img src="../assets/images/users/avatar-1.jpg" class="rounded-circle avatar-xs m-1" alt="">
                                                                </a> -->

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

                                                <div class="py-3 border-top">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item mr-2">

                                                            @if (!$row['campaign']->title || $row['campaign']->facebook_post_title)
                                                            <span class="badge badge-info">Posted</span>
                                                            @else
                                                            @php
                                                            $now = Carbon::now();
                                                            $event_date = $row['campaign']->event_datetime;
                                                            if($event_date == ''){
                                                                $event_date = $row['campaign']->created_at;
                                                            }
                                                            $today_dt = new DateTime($now);
                                                            $expire_dt = new DateTime($event_date);
                                                            if($expire_dt  > $today_dt){
                                                                echo '<span class="badge badge-primary">Pending</span>';
                                                            }else{
                                                                echo '<span class="badge badge-success">Completed</span>';
                                                            }
                                                            @endphp

                                                            @endif

                                                        </li>
                                                        <li class="list-inline-item mr-2" data-toggle="tooltip" data-placement="top" title="" data-original-title="Campaign Created Date">
                                                            <i class= "bx bx-calendar mr-1"></i>{{date('m-d-Y h:m A', strtotime($row['campaign']->created_at))}}
                                                        </li>
                                                        <li class="list-inline-item mr-2" data-toggle="tooltip" data-placement="top" title="" data-original-title="Comments">
                                                            <i class= "bx bx-comment-dots mr-1"></i> 0
                                                        </li>
                                                    </ul>
                                        </div>
                                    </div>
                                </div>
                            </td>

                            @if($numItems % 2 != 0 && $rowCount == $numItems)
                            <td></td>
                           @else
                           @endif

                            @if($rowCount != 0 && $rowCount % 2 == 0)
                            </tr><tr>
                            @else
                            @endif

                                                        @endforeach
                                    </tr>

                       </tbody>
                      </table>
                    </div>

                    <div class="tab-pane " id="Instagram">

                        <table id="UsersList2" class="table border-0  border-specing-20">
                            <thead class="d-none">
                                <tr>
                                    <th>#</th>
                                    <th>#</th>

                                </tr>
                            </thead>
                            <tbody>

                                <tr>
                                    @php
                                          $rowCount1 = 1; $numItems1 = count($instagram_campaign);  @endphp
                                    @foreach($instagram_campaign as $key1 => $row1)

                                    <td class="box-shadow-1 border-specing-20 col-lg-6 col-12">
                                             <div class="card">
                                                <div class="card-body">
                                                    <div class="dropdown" style="float: right">
                                                        <a href="#" class="dropdown-toggle card-drop" data-toggle="dropdown" aria-expanded="false">
                                                            <i class="mdi mdi-dots-vertical font-size-18"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-right" >
                                                                {{-- <a class="dropdown-item" href="{{route('admin_users.edit', $row['campaign']->id)}}"><i class="fas fa-pencil-alt text-success me-1"></i>&nbsp;Edit</a> --}}
                                                                 <a class="dropdown-item" href="{{route('campaign.show', $row1['campaign']->id)}}"><i class="fas fa-eye text-primary me-1"></i>&nbsp;View</a>
                                                                {{-- <a class="dropdown-item" href="javascript:void(0);" data-id="{{$row1['campaign']->id}}" id="delete"><i class="fas fa-trash text-danger me-1"></i>&nbsp; Delete</a> --}}
                                                        </div>
                                                    </div>
                                                <div class="media">

                                                    <div class="avatar-md mr-4">
                                                        <span class="avatar-title rounded-circle bg-light text-danger font-size-16">
                                                            @if(empty($row1['campaign']->image_url))
                                                            <img src="../assets/images/companies/img-1.png" alt="" height="30">
                                                            @else
                                                            <img src="/uploads/campaign_images/{{ $row1['campaign']->image_url }}" alt="" height="30">
                                                            @endif
                                                        </span>
                                                    </div>
                                                    <div class="media-body overflow-hidden">

                                                        @if (!$row1['campaign']->title)
                                                        <h5 class="text-truncate font-size-15"><a href="campaign/show/{{ $row1['campaign']->id }}" class="text-dark">Instagram Post</a></h5>
                                                        <p class="text-muted mb-4">{!! $row1['campaign']->caption !!}

                                                        </p>

                                                        @endif
                                                        <div class="team">
                                                            @foreach ( $row1['donor'] as $donor)
                                                            @if(!$donor->profile_pic)
                                                                <a href="javascript: void(0);" class="team-member d-inline-block" data-toggle="tooltip" data-placement="top" title="" data-original-title="{{$donor->name}}">
                                                                    <img src="{{ asset('/assets/images/users/avatar-2.png') }}" class="rounded-circle avatar-xs m-1" alt="">
                                                                </a>
                                                                @else
                                                                <a href="javascript: void(0);" class="team-member d-inline-block" data-toggle="tooltip" data-placement="top" title="" data-original-title="{{$donor->name}}">
                                                                    <img src="{{ asset('/upload/donors/') }}/{{$donor->profile_pic}}" class="rounded-circle avatar-xs m-1" alt="">
                                                                </a>
                                                                @endif
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>

                                            <div class="py-3 border-top">
                                                <ul class="list-inline mb-0">
                                                    <li class="list-inline-item mr-2">

                                                        @if (!$row1['campaign']->title)
                                                        <span class="badge badge-info">Posted </span>
                                                        @else
                                                        <!-- @php
                                                        $now = Carbon::now();
                                                        $event_date = $row1['campaign']->created_at;
                                                        $today_dt = new DateTime($now);
                                                        $expire_dt = new DateTime($event_date);
                                                        if($expire_dt  > $today_dt){
                                                            echo '<span class="badge badge-primary">Pending</span>';
                                                        }else{
                                                            echo '<span class="badge badge-success">Completed</span>';
                                                        }
                                                        @endphp -->

                                                        @endif

                                                    </li>
                                                    <li class="list-inline-item mr-2" data-toggle="tooltip" data-placement="top" title="" data-original-title="Campaign Created Date">
                                                        <i class= "bx bx-calendar mr-1"></i>{{date('m-d-Y h:m A', strtotime($row1['campaign']->created_at))}}
                                                    </li>
                                                    <li class="list-inline-item mr-2" data-toggle="tooltip" data-placement="top" title="" data-original-title="Comments">
                                                        <i class= "bx bx-comment-dots mr-1"></i> 0
                                                    </li>
                                                </ul>
                                    </div>
                                </div>
                            </div>
                        </td>

                        @if($key1+1 == $numItems1)
                        <td></td>
                       @else
                       @endif

                        @if($rowCount1 != 0 && $rowCount1 % 2 == 0)
                        </tr><tr>
                        @else
                        @endif

                                                @endforeach
                                </tr>

                   </tbody>
                  </table>
                </div>




                    </div>
                </div>

    </div> <!-- end col -->
</div> <!-- end row -->
@endsection
@section('script')
<!-- Plugins js -->
<script src="{{ URL::asset('assets/libs/datatables/datatables.min.js')}}"></script>

<script src="{{ URL::asset('assets/js/pages/datatables.init.js')}}"></script>

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
    $(document).ready(function() {


        $("#UsersList1 tbody tr").each(function(){

        var row = $(this);
        var td_elements = row.find('td');
        var colText = td_elements.text();

        if(td_elements.length == 0){
        $(this).remove();
        }
        });

        $("#UsersList2 tbody tr").each(function(){

        var row = $(this);
        var td_elements = row.find('td');
        var colText = td_elements.text();

        if(td_elements.length == 0){
        $(this).remove();
        }
        });
        $('#UsersList1').DataTable({
        "aaSorting": []
    } );
        $('#UsersList2').DataTable({
        "aaSorting": []
    } );

        $(".nav-tabs li a").click(function(){
        $(".nav-tabs li").removeClass("active");
        $(this).parent().addClass("active");
    });
    });
    </script>
@endsection