@extends('layouts.master')

@section('title') Compaign Overview @endsection

@section('content')
   @component('common-components.breadcrumb')
         @slot('title'){{ $row->title != '' ? $row->title : ($row->facebook_post_title == '' ? "Instagram Post" : $row->facebook_post_title) }} Campaign  @endslot

              @endcomponent


                        <div class="row">
                            <div class="col-lg-8">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="media">
                                            {{-- @if ($row->image_url)
                                            <img src="/uploads/campaign_images/{{ $row->image_url }}" alt="{{ $row->title != '' ? $row->title : ($row->facebook_post_title == '' ? "Instagram Post" : $row->facebook_post_title) }}" class="rounded-circle avatar-md mr-4">
                                            @else
                                            <img src="/assets/images/companies/img-1.png" alt="{{ $row->title != '' ? $row->title : 'Instagram post' }}" class="avatar-sm mr-4">
                                            @endif --}}
                                            @if(!empty($row->cover_photo))
                                            <img src="/uploads/campaign_images/{{ $row->cover_photo }}" alt="" height="30">
                                            @elseif(!empty($row->facebook_image_url))

                                            @php $text = preg_match('@(https?://([-\w\.]+)+(:\d+)?(/([-\w/_\.]*(\?\S+)?)?)?)@', $row->facebook_image_url); @endphp
                                            @if($text == 1)
                                            <img src="{{ $row->facebook_image_url }}" alt="" height="30">
                                            @else
                                            <img src="/uploads/campaign_images/{{ $row->facebook_image_url }}" alt="" height="30">
                                            @endif
                                            @else
                                            <img src="/uploads/campaign_images/{{ $row->image_url }}" alt="" height="30">
                                            @endif

                                            <div class="media-body overflow-hidden">
                                                <h5 class="text-truncate font-size-15">{{ $row->title != '' ? $row->title : ($row->facebook_post_title == '' ? "Instagram Post" : $row->facebook_post_title)  }}</h5>
                                                <!-- <p class="text-muted">Separate existence is a myth. For science, music, sport, etc.</p> -->
                                            </div>
                                        </div>

                                        <!-- <h5 class="font-size-15 mt-4">Campaign Details :</h5>

                                        <p class="text-muted">{{ $row->description != '' ? $row->description : $row->caption }}</p> -->

                                        <!-- <div class="text-muted mt-4">
                                            <p><i class="mdi mdi-chevron-right text-primary mr-1"></i> To achieve this, it would be necessary</p>
                                            <p><i class="mdi mdi-chevron-right text-primary mr-1"></i> Separate existence is a myth.</p>
                                            <p><i class="mdi mdi-chevron-right text-primary mr-1"></i> If several languages coalesce</p>
                                        </div> -->

                                        <div class="row task-dates">
                                            <div class="col-lg-4">
                                                <div class="mt-4">
                                                    <h5 class="font-size-14"><i class="bx bx-calendar mr-1 text-primary"></i>Date</h5>
                                                    <p class="text-muted mb-0">{{date('m-d-Y', strtotime($row->created_at))}}</p>
                                                </div>
                                            </div>

                                            <!-- <div class="col-lg-4">
                                                <div class="mt-4">
                                                    <h5 class="font-size-14"><i class="bx bx-calendar-check mr-1 text-primary"></i> Due Date</h5>
                                                    <p class="text-muted mb-0">12 Oct, 2019</p>
                                                </div>
                                            </div> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end col -->

                            <div class="col-lg-4" style="max-height: 500px; overflow-y: overlay;">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title mb-4">Total Donors</h4>

                                        <div class="table-responsive custom_tabal_saction_part">
                                            <table class="table table-centered">
                                                <tbody>
                                                @if (count($donors) > 0)
                                                    @foreach ($donors as $value )
                                                    <tr>
                                                        <td style="width: 50px;">
                                                        @if(!$value->profile_pic)
                                                        <img src="{{ asset('/assets/images/users/avatar-2.png') }}" class="rounded-circle avatar-xs" alt="{{$value->name}}">
                                                        @else
                                                        <img src="/upload/donors/{{$value->profile_pic}}" class="rounded-circle avatar-xs" alt="{{$value->name}}">
                                                        @endif
                                                    </td>
                                                        <td><h5 class="font-size-14 m-0"><a href="" class="text-dark">{{$value->name}}</a></h5></td>
                                                        <td>
                                                            <div>
                                                                <a href="#" class="badge badge-primary font-size-11">${{ number_format($value->donation,2)}}</a>
                                                            </div>
                                                        </td>
                                                        </tr>
                                                    @endforeach
                                                    @else
                                                    <tr>
                                                        <td><h5 class="font-size-14 m-0"><a href="" class="text-dark">Donation not add yet</a></h5></td>
                                                        </tr>
                                                    @endif
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end col -->
                        </div>
                        <!-- end row -->



                        <div class="row">
    <div class="col-xl-12">
        <div class="card shadow-lg">
            <div class="card-body">
                <div class="clearfix">
                    <!-- <div class="float-right">
                                                <div class="input-group input-group-sm">
                                                    <select class="custom-select custom-select-sm">

                                                        <option selected>Jan</option>
                                                        <option value="1">Dec</option>
                                                        <option value="2">Nov</option>
                                                        <option value="3">Oct</option>
                                                    </select>
                                                    <div class="input-group-append">
                                                        <label class="input-group-text">Month</label>
                                                    </div>
                                                </div>
                                            </div> -->
                    <h4 class="card-title mb-4">Donations</h4>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div id="line-chart" class="apex-charts" dir="ltr"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- <div class="col-xl-4">
                                <div class="card shadow-lg">
                                    <div class="card-body">
                                        <h4 class="card-title mb-4">Campaign Analytics</h4>

                                        <div>
                                            <div id="donut-chart" class="apex-charts"></div>
                                        </div>

                                        <div class="text-center text-muted">
                                            <div class="row">
                                                <div class="col-4">
                                                    <div class="mt-4">
                                                        <p class="mb-2 text-truncate"><i class="mdi mdi-circle text-primary mr-1"></i> Campaign A</p>
                                                        <h5>$ 2,132</h5>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="mt-4">
                                                        <p class="mb-2 text-truncate"><i class="mdi mdi-circle text-success mr-1"></i> Campaign B</p>
                                                        <h5>$ 1,763</h5>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="mt-4">
                                                        <p class="mb-2 text-truncate"><i class="mdi mdi-circle text-danger mr-1"></i> Campaign C</p>
                                                        <h5>$ 973</h5>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> -->
</div>





                        <!-- <div class="row">
                            <div class="col-lg-8">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title mb-4">Overview</h4>
                                        <div id="line-chart" class="apex-charts" dir="ltr"></div>
                                        <div id="overview-chart" class="apex-charts" dir="ltr"></div>
                                    </div>
                                </div>
                            </div> -->
                            <!-- end col -->
                            <!-- <div class="col-lg-4">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title mb-4">Comments</h4> -->

                                        <!-- <div class="media mb-4">
                                            <div class="mr-3">
                                                <img class="media-object rounded-circle avatar-xs" alt="" src="assets/images/users/avatar-2.jpg">
                                            </div>
                                            <div class="media-body">
                                                <h5 class="font-size-13 mb-1">David Lambert</h5>
                                                <p class="text-muted mb-1">
                                                    Separate existence is a myth.
                                                </p>
                                            </div>
                                            <div class="ml-3">
                                                <a href="" class="text-primary">Reply</a>
                                            </div>
                                        </div> -->

                                        <!-- <div class="media mb-4">
                                            <div class="mr-3">
                                                <img class="media-object rounded-circle avatar-xs" alt="" src="assets/images/users/avatar-3.jpg">
                                            </div>
                                            <div class="media-body">
                                                <h5 class="font-size-13 mb-1">Steve Foster</h5>
                                                <p class="text-muted mb-1">
                                                    <a href="" class="text-success">@Henry</a>
                                                    To an English person it will like simplified
                                                </p>
                                                <div class="media mt-3">
                                                    <div class="avatar-xs mr-3">
                                                        <span class="avatar-title rounded-circle bg-soft-primary text-primary font-size-16">
                                                            J
                                                        </span>
                                                    </div>
                                                    <div class="media-body">
                                                        <h5 class="font-size-13 mb-1">Jeffrey Walker</h5>
                                                        <p class="text-muted mb-1">
                                                            as a skeptical Cambridge friend
                                                        </p>
                                                    </div>
                                                    <div class="ml-3">
                                                        <a href="" class="text-primary">Reply</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ml-3">
                                                <a href="" class="text-primary">Reply</a>
                                            </div>
                                        </div> -->



                                    <!-- </div>
                                </div>
                            </div> -->
                            <!-- end col -->
                        <!-- </div> -->
                        <!-- end row -->
@endsection