@extends('business_owner.layouts.master')
@section('title', __('backend.dashboard'))
@push('after-styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" type="text/css" />
    <link rel="stylesheet" href="{{ asset('assets/dashboard/css/flags.css') }}" type="text/css" />
@endpush
@section('content')
    <style>
        .container {
            width: 100%;
            margin: 15px auto;
        }

        .icon-img img {
            height: 50px;
        }
    </style>
    <div class="upskild-dashboard">
        <div class="row align-items-center title-row">
            <div class="col-xl-4">
                <h1 class="heading-two m-b-0">{{ __('backend.hi') }}
                    <span class="text-primary">{{ Auth::guard('business_owner')->user()->full_name }}</span> ,
                    {{ __('backend.welcomeBack') }}
                </h1>
            </div>
            <div class="col-xl-8 title-right-col">
                <form action="{{ route('business_owner.dashboardfilter') }}" method="post" style="padding-left: %;"
                    id="datafilter">
                    @csrf
                    <div class="filter-date-block">
                        <input type="text" class="form-control filter_message" value="{{ isset($filterdate) ? $filterdate : old('date_filter') }}" placeholder="DD-MM-YYYY - DD-MM-YYYY"
                        name="date_filter" id="date_filter" autocomplete="off" />

                        <span class="removeError1" style="color: red; display: none; margin-right: -25px;" id="span">Please
                            select start date and end date
                        </span>
                    </div>
                    <div class="filter-button-block">
                        <input type="submit" name="filter_submit" class="solid-button" value="Filter" id="filter_submit" disabled />
                        <a href="{{ route('businessOwnerHome') }}">
                            <input type="button" name="clear" class="btn btn-danger" value="Clear" id="filter_clear"/>
                        </a>
                    </div>

                    <input type="hidden" name="startdate" value="{{ isset($startdate) ? $startdate : '' }}"
                        id="export_start_date" class="start_date">
                    <input type="hidden" name="enddate" value="{{ isset($enddate) ? $enddate : '' }}"
                        id="export_end_date" class="end_date">
                </form>
            </div>

        </div>

        <div class="row">
            <div class="col-xl-12">
                <div class="row box-inner-row dashboard-box-row">

                    <div class="col-sm-3">
                        <div class="stats-card">
                            <a href="{{ route('business_owner.event') }}">
                               <i class="icon icon-event"></i>
                                <div class="stats-title">
                                    <h3 class="heading-four m-a-0 ">{{ $total_events ?? 0 }}</h3>
                                    <p class="m-a-0 fw-600">Total Events </p>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="stats-card">
                            <a href="{{ route('businessOwnerHome') }}">
                                <i class="icon icon-event-view"></i>
                                <div class="stats-title">
                                    <h3 class="heading-four m-a-0 ">{{ $total_event_view ?? 0 }}</h3>
                                    <p class="m-a-0 fw-600">Total Events Views </p>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="stats-card">
                            <a href="{{ route('businessOwnerHome') }}">
                                <i class="icon icon-like"></i>
                                <div class="stats-title">
                                    <h3 class="heading-four m-a-0 ">{{ $total_event_like ?? 0 }}</h3>
                                    <p class="m-a-0 fw-600">Total Likes </p>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="stats-card">
                            <a href="{{ route('businessOwnerHome') }}">
                                <i class="icon icon-event-view"></i>
                                <div class="stats-title">
                                    <h3 class="heading-four m-a-0 ">{{ $total_active_events ?? 0 }}</h3>
                                    <p class="m-a-0 fw-600">Total Active Events </p>
                                </div>
                            </a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection
@push('after-scripts')
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js" defer></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script type="text/javascript">
        $(function() {
            let dateInterval = getQueryParameter('date_filter');
            let start = "";
            let end = "";
            $('#filter_submit').prop('disabled', true);

            if (dateInterval) {
                dateInterval = dateInterval.split(' - ');
                start = dateInterval[0];
                end = dateInterval[1];
                $('#filter_submit').prop('disabled', false);
            }

            let pickerConfig = {
                "showDropdowns": true,
                "showWeekNumbers": true,
                "alwaysShowCalendars": true,
                autoUpdateInput: false,
                maxDate: new Date(),
                locale: {
                    format: 'DD-MM-YYYY',
                    firstDay: 1,
                },
                ranges: {
                    'Today': [moment(), moment()],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    /*'All Time': [moment('1970-01-01'), moment()]*/
                }
            };

            // Set start/end date only if we have them, otherwise don't highlight any range by default
            if (start && end) {
                pickerConfig.startDate = moment(start, 'MM-DD-YYYY');
                pickerConfig.endDate = moment(end, 'MM-DD-YYYY');
            }

            $('#date_filter').daterangepicker(pickerConfig);

            $('#date_filter').on('apply.daterangepicker', function(ev, picker) {
                if (picker.chosenLabel === 'All Time') {
                    $(this).val('');
                    $('#filter_submit').prop('disabled', true);
                    window.location.href = "{{ route('adminHome') }}";
                } else {
                    $(this).val(picker.startDate.format('DD-MM-YYYY') + ' - ' + picker.endDate.format(
                        'DD-MM-YYYY'));
                    $('#filter_submit').prop('disabled', false);
                }
            });

            $('#date_filter').on('cancel.daterangepicker', function() {
                $(this).val('');
                $('#filter_submit').prop('disabled', true);
            });

        });

        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, " "));
        }
    </script>
@endpush