@extends('layouts.backend.app')


@section('title', 'Refer Report')

@push('css')
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">

    <link rel="stylesheet" href="{{ asset('datepicker/bootstrap-datepicker.min.css') }}">
    <link rel="stylesheet" href="{{ asset('datepicker/datepicker.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.css"
        integrity="sha512-gp+RQIipEa1X7Sq1vYXnuOW96C4704yI1n0YB9T/KqdvqaEgL6nAuTSrKufUX3VBONq/TPuKiXGLVgBKicZ0KA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="{{ asset('datepicker/morris.css') }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">

    <style>
        .select2-selection__arrow {
            display: none;
        }
    </style>
@endpush

@section('content')
    <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-start mb-0">Dashboard</h2>
                    <div class="breadcrumb-wrapper">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="dashboard">
                                    Report
                                </a>
                            </li>
                            <li class="breadcrumb-item">
                                Refer Reports
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                Filter
            </div>
            <div class="card-body">
                <form action="">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="date">Date</label>
                                <input type="text" id="date_filter" class="form-control" name="date_filter">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="affiliate_id">Affiliate</label>
                                <select name="affiliate_id[]" class="form-control affiliate" id="affiliate_id" multiple>
                                    @foreach ($affiliates as $affiliate)
                                        <option
                                            @if (request()->has('affiliate_id')) @foreach (request()->get('affiliate_id') as $id)
                                                    @if ($id == $affiliate->id)
                                                        selected @endif
                                            @endforeach
                                    @endif
                                    value="{{ $affiliate->id }}">({{ $affiliate->id }}) {{ $affiliate->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="offer_id">Offer</label>
                                <select name="offer_id[]" class="form-control offer" id="offer_id" multiple>
                                    @foreach ($offers as $offer)
                                        <option
                                            @if (request()->has('offer_id')) @foreach (request()->get('offer_id') as $id)
                                                    @if ($id == $offer->id)
                                                        selected @endif
                                            @endforeach
                                    @endif
                                    value="{{ $offer->id }}">({{ $offer->id }}) {{ $offer->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-success mt-2 rounded btn-sm">
                        <i class="fa fa-play"></i>
                        Generate Report
                    </button>
                </form>
            </div>
        </div>
        <div class="card">
            <div class="card-header">Refer Report</div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped table-hover datatable">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Click ID</th>
                                <th>Refer By</th>
                                <th>Refer To</th>
                                <th>Offer</th>
                                <th>Commission</th>
                                <th>Date</th>
                                <th>Convert Time</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($referCommissions as $referCommission)
                                <tr>
                                    <td>{{ $referCommission->id }}</td>
                                    <td>{{ $referCommission->click_id }}</td>
                                    <td>{{ $referCommission->referFrom->name }}</td>
                                    <td>{{ $referCommission->referTo->name }}</td>
                                    <td>{{ $referCommission->offer->name }}</td>
                                    <td>{{ $referCommission->commission }}</td>
                                    <td>{{ $referCommission->date }}</td>
                                    <td>{{ $referCommission->created_at->difFforHumans() }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="mt-2">
                        {{ $referCommissions->withQueryString()->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
    <!-- daterangepicker -->
    <script src="{{ asset('datepicker/moment.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js"
        integrity="sha512-mh+AjlD3nxImTUGisMpHXW03gE6F4WdQyvuFRkjecwuWLwD2yCijw4tKA3NsEFpA1C3neiKhGXPSIGSfCYPMlQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ asset('datepicker/bootstrap-datepicker.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.2.7/morris.min.js"
        integrity="sha512-nF4mXN+lVFhVGCieWAK/uWG5iPru9+/z1iz0MJbYTto85I/k7gmbTFFFNgU+xVRkF0LI2nRCK20AhxFIizNsXA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function() {
            $('.datatable').DataTable({
                "order": [
                    [0, "desc"]
                ]
            });
        });
        $(document).ready(function() {
            $('.offer').select2({
                placeholder: 'Select Offers',
                allowClear: true,
            });
        });
        $(document).ready(function() {
            $('.affiliate').select2({
                placeholder: 'Select Affiliate',
                allowClear: true,
            });
        });
        $(document).ready(function() {
            $('.country').select2({
                placeholder: 'Select Country',
                allowClear: true,
            });
        });
    </script>
    <script type="text/javascript">
        $(function() {
            let dateInterval = getQueryParameter('date_filter');
            let start = moment().startOf('last Monday');
            let end = moment().endOf('this Sunday');
            if (dateInterval) {
                dateInterval = dateInterval.split(' - ');
                start = dateInterval[0];
                end = dateInterval[1];
            }
            $('#date_filter').daterangepicker({
                "showDropdowns": true,
                "showWeekNumbers": true,
                "alwaysShowCalendars": false,
                startDate: start,
                endDate: end,
                locale: {
                    format: 'YYYY-MM-DD',
                    firstDay: 1,
                },
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')],
                    'This Year': [moment().startOf('year'), moment().endOf('year')],
                    'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year')
                        .endOf('year')
                    ],
                    'All time': [moment().subtract(30, 'year').startOf('month'), moment().endOf('month')],
                }
            });
        });

        function getQueryParameter(name) {
            const url = window.location.href;
            name = name.replace(/[\[\]]/g, "\\$&");
            const regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(url);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, " "));
        }
        // bar char
        const select_all = document.getElementById("select_all");
        const select_row = document.getElementsByClassName("select_row");
        select_all.addEventListener("click", function() {
            for (let i = 0; i < select_row.length; i++) {
                select_row[i].checked = this.checked;
            }
        });
    </script>
@endpush