@extends('dashboard.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-lg-4">
                <div class="dashboard-hero">
                    <h1 class="heading-two m-b-0">{{ __('backend.hi') }}
                        <span class="text-primary">{{ Auth::user()->name }}</span> , {{ __('backend.welcomeBack') }}
                    </h1>
                </div>
            </div>
            <div class="col-lg-8 title-right-col">
                <form action="{{ route('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('adminHome') }}">
                            <input type="button" name="clear" class="border-btn" 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>
        
        <!-- Top Row: 5 Equal Boxes -->
        <div class="row box-inner-row dashboard-box-row">
            <div class="col-xl-2 col-lg-4 stats-card-col">
                <div class="stats-card">
                    <a href="{{ route('user') }}">
                        <i class="icon icon-customer"></i>
                        <div class="stats-title">
                            <h3 class="heading-four m-a-0">{{ $total_user ?? 0 }}</h3>
                            <p class="m-a-0 fw-600">Total Customers</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-xl-2 col-lg-4 stats-card-col">
                <div class="stats-card">
                    <a href="{{ route('business_owner') }}">
                        <i class="icon icon-business-owner"></i>
                        <div class="stats-title">
                            <h3 class="heading-four m-a-0">{{ $total_business_user ?? 0 }}</h3>
                            <p class="m-a-0 fw-600">Total Business Owners</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-xl-2 col-lg-4 stats-card-col">
                <div class="stats-card">
                    <a href="{{ route('event') }}">
                        <i class="icon icon-event"></i>
                        <div class="stats-title">
                            <h3 class="heading-four m-a-0 ">{{ $total_event ?? 0 }}</h3>
                            <p class="m-a-0 fw-600">Total Events</p>
                        </div>
                    </a>
                </div>
            </div> 
            <div class="col-xl-2 col-lg-4 stats-card-col">
                <div class="stats-card">
                    <a href="{{ route('tourism-places') }}">
                        <i class="icon icon-location"></i>
                        <div class="stats-title">
                            <h3 class="heading-four m-a-0 ">{{ $total_place ?? 0 }}</h3>
                            <p class="m-a-0 fw-600">Total Tourism Places</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-xl-2 col-lg-4 stats-card-col">
                <div class="stats-card">
                    <a href="{{ route('interest') }}">
                        <i class="icon icon-location"></i>
                        <div class="stats-title">
                            <h3 class="heading-four m-a-0 ">{{ $total_interest ?? 0 }}</h3>
                            <p class="m-a-0 fw-600">Total Interest</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <!-- Second Row: AS and TR -->
        <div class="row box-inner-row dashboard-box-row large-box m-t-md">
            <!-- AS: Active Subscriptions -->
            <div class="col-xl-6 col-lg-6 large-box-col">
                <div class="stats-card">
                    <h3 class="heading-four text-center m-b-md">Active Subscriptions </h3>
                    <div class="row text-center no-gutters d-flex justify-content-between align-items-center">
                        <div class="col-6" style="border-right: 1px solid #D7D3CF;">
                            <a href="{{ route('business.report') }}">
                                <h3 class="heading-four m-a-0">{{ $business_sponsorship_status ?? 0 }}</h3>
                                <p class="text-md m-a-0">Business Active</p>
                            </a>
                        </div>
                        <div class="col-6">
                            <a href="{{ route('event.report') }}">
                                <h3 class="heading-four m-a-0">{{ $event_sponsorship_status ?? 0 }}</h3>
                                <p class="text-md m-a-0">Event Active</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- TR: Total Revenue -->
            <div class="col-xl-6 col-lg-6 large-box-col">
                <div class="stats-card">
                    <h3 class="heading-four text-center m-b-md">Total Revenue </h3>
                    <div class="row text-center no-gutters d-flex justify-content-between align-items-center">
                        <div class="col-6" style="border-right: 1px solid #D7D3CF;">
                            <a href="{{ route('business.report') }}">
                                <h3 class="heading-four m-a-0">{{ $currency_symbol }} {{ $total_business_revenue ?? 0 }}</h3>
                                <p class="text-md m-a-0">Business Revenue</p>
                            </a>
                        </div>
                        <div class="col-6">
                            <a href="{{ route('event.report') }}">
                                <h3 class="heading-four m-a-0">{{ $currency_symbol }} {{ $total_event_revenue ?? 0 }}</h3>
                                <p class="text-md m-a-0">Event Revenue</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row m-t-md">
            <div class="col-xl-12">
                <div class="box">
                    <div class="box-header d-flex align-items-center justify-content-between">
                        <h2 class="m-a-0 ">Latest Business ({{$totalbusiness}})</h2>
                        <a href="{{ route('business_owner') }}" class="border-btn">
                             View All
                        </a>
                    </div>
                    <div class="table-responsive table_data">
                        <table class="table table-bordered m-a-0 dataTable no-footer">
                            <thead>
                                <tr>
                                    <th>Business Name</th>
                                    <th>Category Name</th>
                                    <th>Location</th>
                                    <th>Registration Date</th>
                                    <th>Approval Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($latest_business as $business)
                                <tr>
                                    <td>{{ $business->business_name ?? '-' }}</td>
                                    <td>{{ $business->category->name ?? '-' }}</td>
                                    <td>{{ $business->address }}</td>
                                    <td>{{ $business->created_at ? $business->created_at->format('d-m-Y') : '-' }}</td>
                                    <td>
                                        @if($business->approval_status == 1)
                                            <span class="text-success">
                                                <strong>Approved</strong>
                                            </span>
                                        @elseif($business->approval_status == 0)
                                            <span class="text-warning">
                                                <strong>Pending</strong>
                                            </span>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" class="text-center">No business found</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="row m-t-md">
            <div class="col-xl-12">
                <div class="box">
                    <div class="box-header d-flex align-items-center justify-content-between">
                        <h2 class="m-a-0 ">Latest Events ({{ $totalevent }})</h2>
                        <a href="{{ route('event') }}" class="border-btn">
                             View All
                        </a>
                    </div>
                    <div class="table-responsive table_data">
                        <table class="table table-bordered m-a-0 dataTable no-footer">
                            <thead>
                                <tr>
                                    <th>Event Name</th>
                                    <th>Business Name</th>
                                    <th>Category Name</th>
                                    <th>Location</th>
                                    <th>Event Date</th>
                                    <th>Approval Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($latest_events as $event)
                                <tr>
                                    <td>{{ $event->title }}</td>
                                    <td>{{ $event->business->business_name ?? '-' }}</td>
                                    <td>{{ $event->category->name ?? '-' }}</td>
                                    <td>{{ $event->location_name }}</td>
                                    <td>{{ $event->event_start ? $event->event_start->format('d-m-Y') : '-' }}</td>
                                    <td>
                                        @if($event->approval_status == 1)
                                            <span class="text-success">
                                                <strong>Approved</strong>
                                            </span>
                                        @elseif($event->approval_status == 0)
                                            <span class="text-warning">
                                                <strong>Pending</strong>
                                            </span>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" class="text-center">No events found</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </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