@extends('layouts.master')
    @section('title') Campaign Report @endsection
    @section('css')
    <link rel="stylesheet" type="text/css" href="{{ URL::asset('assets/libs/datatables/datatables.min.css')}}">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.css')}}">

    @endsection
    @section('content')
    @component('common-components.breadcrumb')
    @slot('title') Campaign Report @endslot

    @endcomponent
    <style>
        .form-control {
            color: #314667 !important;
        }

        .filter {
            border-color: #1b2b82;
        }

        .card {
            margin-left: 3px;

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

                <div class="card-body">
                    {{-- <input type="filter" class="form-control-sm" placeholder aria-controls="UsersList1"> --}}
                    <div class="card float-right">
                        <div id="filter1"></div>
                    </div>

                    @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 class="row mt-5 mb-4">
                            <form method="get" action="{{route('DateWise')}}" class="form-inline">
                                @csrf
                                <div class="form-group mb-4 ml-4">
                                    <label>From date</label>
                                    <div class="input-group ml-2">
                                        <input type="text" class="form-control" placeholder="dd mm yyyy" data-date-format="dd-mm-yyyy" data-provide="datepicker" data-date-autoclose="true" name="fromdate" autocomplete="off" value="{{ $fromdate }}">
                                        <div class="input-group-append">
                                            <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                                        </div>
                                    </div><!-- input-group -->
                                </div>
                                <div class="form-group mb-4 ml-4">
                                    <label>To date</label>
                                    <div class="input-group ml-2">
                                        <input type="text" class="form-control" placeholder="dd mm yyyy" data-date-format="dd-mm-yyyy" data-provide="datepicker" data-date-autoclose="true" name="todate" autocomplete="off" value="{{ $todate }}">
                                        <div class="input-group-append">
                                            <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                                        </div>
                                    </div><!-- input-group -->
                                </div>

                                <!-- <div class="col-lg-10"> -->
                                <button type="submit" class="btn btn-primary create_admin mb-4 ml-4"> Filter </button>
                                <a href="{{ route('reports.index') }}" class="btn btn-danger mb-4 ml-4"> Clear </a>
                                <!-- </div> -->

                            </form>
                        </div>

                    <div class="table-responsive">
                        <table id="UsersList1" class="table">
                            <thead class="thead-light">
                                <tr>
                                    <th>#</th>
                                    <th>Campaign</th>
                                    <th>Platform</th>
                                    <th>Donation</th>
                            </thead>
                            <tbody>
                                @php $i = 1; @endphp
                                @foreach ($campaign as $value )
                                <tr>
                                    <td>{{$i}}</td>
                                    <td>{{ implode(' ', array_slice(str_word_count($value['campaign']->facebook_post_title,2),0,5)) ? : implode(' ', array_slice(str_word_count($value['campaign']->title,2),0,5))}}...</td>
                                    <td>@if ($value['campaign']->platform == 'Instagram')
                                        <!-- <i class="fab fa-instagram"></i> -->
                                        {{ $value['campaign']->platform  }}
                                        @else
                                        <!-- <i class="fab fa-facebook"></i> -->
                                        {{ $value['campaign']->platform  }}
                                        @endif
                                    </td>
                                    <td>
                                        @foreach ($value['donor'] as $donor)
                                        @if (isset($donor->sum))
                                        {{ "$".number_format($donor->sum,2)  }}
                                        @else
                                        <p>{{'$0.00'}}</p>

                                        @endif
                                        @endforeach
                                    </td>
                                </tr>
                                @php $i++; @endphp
                                @endforeach

                            </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/libs/jszip/jszip.min.js')}}"></script>
    <script src="{{ URL::asset('assets/libs/pdfmake/pdfmake.min.js')}}"></script>
    <!-- Init js-->
    <script src="{{ URL::asset('assets/js/pages/datatables.init.js')}}"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
    <script src="{{ URL::asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js')}}"></script>
    <script src="{{ URL::asset('assets/libs/datepicker/datepicker.min.js')}}"></script>

    <script src="{{ URL::asset('assets/js/pages/form-advanced.init.js')}}"></script>
    <script src="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.js')}}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#UsersList1').DataTable({

                dom: 'Bfrtip',
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ],

                initComplete: function() {
                    var column = this.api().column(1);
                    var values = [];
                    column.data().each(function(d, j) {
                        d.split(",").forEach(function(data) {
                            data = data.trim();
                            if (values.indexOf(data) === -1) {
                                values.push(data);
                            }
                        });
                    });
                    // $('<select class="filter btn  border-blue"><option value="">All Campaigns</option></select>')
                    //     .append(values.sort().map(function(o) {
                    //     return '<option value="' + o + '">' + o + '</option>';
                    //     }))
                    //     .on('change', function() {
                    //     column.search(this.value ? '\\b' + this.value + '\\b' : " ", true, false).draw();
                    //     })
                    //     .appendTo('#filter1');
                }
            });
        });
    </script>


    @endsection