@extends('backend::layouts.app')
@section('title', 'Dashboard')
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">Dashboard</h4>
            </div>
        </div>
    </div>
    <div class="row">
        <a href="{{ route('product.index') }}" class="col-xl-3 col-md-3">
            <div class="card card-h-100 align-items-center">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-12 text-center">
                            <h4 class="mb-3 ">
                                <span class="counter-value text-primary" data-target="{{ $productCount }}">0</span>
                            </h4>
                        </div>
                    </div>
                    <div class="text-nowrap">
                        <span class=" text-muted font-size-13 ">Total Products</span>
                    </div>
                </div>
            </div>
        </a>
        <a href="{{ route('contact-enquiry.index') }}" class="col-xl-3 col-md-3">
            <div class="card card-h-100 align-items-center">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-12 text-center">
                            <h4 class="mb-3">
                                <span class="counter-value text-primary" data-target="{{ $contactCount }}">0</span>
                            </h4>
                        </div>
                    </div>
                    <div class="text-nowrap">
                        <span class=" text-muted font-size-13 ">Contact Enquiries</span>
                    </div>
                </div>
            </div>
        </a>
        <a href="{{ route('dealer-detail.index') }}" class="col-xl-3 col-md-3">
            <div class="card card-h-100 align-items-center">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-12 text-center">
                            <h4 class="mb-3">
                                <span class="counter-value text-primary" data-target="{{ $dealerCount }}">0</span>
                            </h4>
                        </div>
                    </div>
                    <div class="text-nowrap">
                        <span class=" text-muted font-size-13 ">Dealers Enquiries</span>
                    </div>
                </div>
            </div>
        </a>
        <a href="{{ route('career-enquiry.index') }}" class="col-xl-3 col-md-3">
            <div class="card card-h-100 align-items-center">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-12 text-center">
                            <h4 class="mb-3">
                                <span class="counter-value text-primary" data-target="{{ $careerCount }}">0</span>
                            </h4>
                        </div>
                    </div>
                    <div class="text-nowrap">
                        <span class=" text-muted font-size-13 ">Job Applications</span>
                    </div>
                </div>
            </div>
        </a>
        {{-- <a class="col-xl-2 col-md-3">
            <div class="card card-h-100 align-items-center">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-12 text-center">
                            <h4 class="mb-3">
                                <span class="counter-value text-primary"
                                    data-target="{{ $getAnalytics[0]['active28DayUsers'] ?? 0 }}">0</span>
                            </h4>
                        </div>
                    </div>
                    <div class="text-nowrap">
                        <span class=" text-muted font-size-13">Current Month Users</span>
                    </div>
                </div>
            </div>
        </a>
        <a class="col-xl-2 col-md-3">
            <div class="card card-h-100 align-items-center">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-12 text-center">
                            <h4 class="mb-3">
                                <span class="counter-value text-primary"
                                    data-target="{{ $getAnalytics[0]['screenPageViews'] ?? 0 }}">0</span>
                            </h4>
                        </div>
                    </div>
                    <div class="text-nowrap">
                        <span class=" text-muted font-size-13">Screen Page Views</span>
                    </div>
                </div>
            </div>
        </a> --}}
    </div>
    {{-- <div class="row">
        <div class="col-xl-6">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Most Visited Pages</h4>
                    <div class="flex-shrink-0">
                        <select class="form-select form-select-sm mb-0 my-n1" id="timePeriodSelectPages">
                            <option value="yesterday">Yesterday</option>
                            <option value="week" selected>Last Week</option>
                            <option value="month">Last Month</option>
                        </select>
                    </div>
                </div>
                <div class="card-body px-0">
                    <div class="table-responsive px-3" data-simplebar style="max-height: 352px;">
                        <table class="table align-middle table-nowrap table-borderless">
                            <tbody id="mostVisitedPagesBody">
                                <!-- Data rows will be injected here by jQuery -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Visitors And Page Views</h4>
                    <div class="flex-shrink-0">
                        <select class="form-select form-select-sm mb-0 my-n1" id="timePeriodSelectVisitors">
                            <option value="yesterday">Yesterday</option>
                            <option value="week" selected>Last Week</option>
                            <option value="month">Last Month</option>
                        </select>
                    </div>
                </div>
                <div class="card-body px-0">
                    <div class="table-responsive px-3" data-simplebar style="max-height: 352px;">
                        <table class="table align-middle table-nowrap table-borderless" id="visitorsTable">
                            <tbody id="visitorsTableBody">
                                <!-- Data rows will be injected here by jQuery -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}
    <div class="row">
        <div class="col-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title">Latest Contact Enquiries</h4>
                    <a href="{{ route('contact-enquiry.index') }}" class="btn btn-primary btn-sm">
                        View All
                    </a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Phone Number</th>
                                    <th>Subject</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($contactEnquiries as $contactEnquiry)
                                    <tr>
                                        <th scope="row">{{ $loop->iteration }}</th>
                                        <td>{{ $contactEnquiry->name }}</td>
                                        <td>{{ $contactEnquiry->email }}</td>
                                        <td>{{ $contactEnquiry->phone_number }}</td>
                                        <td>{{ $contactEnquiry->subject }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center">No contact enquiries found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title">Latest Dealer Enquiries</h4>
                    <a href="{{ route('dealer-detail.index') }}" class="btn btn-primary btn-sm">
                        View All
                    </a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Phone Number</th>
                                    <th>Location</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($dealerEnquiries as $dealerEnquiry)
                                    <tr>
                                        <th scope="row">{{ $loop->iteration }}</th>
                                        <td>{{ $dealerEnquiry->name }}</td>
                                        <td>{{ $dealerEnquiry->email }}</td>
                                        <td>{{ $dealerEnquiry->phone_number }}</td>
                                        <td>{{ $dealerEnquiry->location }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center">No dealer enquiries found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title">Latest Career Enquiries</h4>
                    <a href="{{ route('career-enquiry.index') }}" class="btn btn-primary btn-sm">
                        View All
                    </a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Career</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Phone Number</th>
                                    <th>Resume</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($careerEnquiries as $careerEnquiry)
                                    <tr>
                                        <th scope="row">{{ $loop->iteration }}</th>
                                        <td>{{ $careerEnquiry->has_career ? $careerEnquiry->career->title ?? '' : 'Open Career Options' }}
                                        </td>
                                        <td>{{ $careerEnquiry->name }}</td>
                                        <td>{{ $careerEnquiry->email }}</td>
                                        <td>{{ $careerEnquiry->phone_number }}</td>
                                        <td>
                                            <a href="{{ $careerEnquiry->resume_value }}" target="_blank"
                                                class="btn btn-soft-light btn-sm w-xs waves-effect btn-label waves-light">
                                                <i class="bx bxs-show label-icon"></i>
                                                {{ $careerEnquiry->resume_extension }}
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center">No career enquiries found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title">Latest Newsletter Subscriptions</h4>
                    <a href="{{ route('newsletter-subscription.index') }}" class="btn btn-primary btn-sm">
                        View All
                    </a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Email</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($newsletterSubscriptions as $newsletterSubscription)
                                    <tr>
                                        <th scope="row">{{ $loop->iteration }}</th>
                                        <td>{{ $newsletterSubscription->email }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="2" class="text-center">No subscriptions found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            const timePeriodSelectVisitors = $('#timePeriodSelectVisitors');
            const timePeriodSelectPages = $('#timePeriodSelectPages');
            const visitorsTableBody = $('#visitorsTableBody');
            const mostVisitedPagesBody = $('#mostVisitedPagesBody');

            function fetchMostVisitedPagesData(period) {
                $.ajax({
                    url: '{{ route('dashboard.most-visited-pages') }}',
                    method: 'GET',
                    data: {
                        period: period
                    },
                    dataType: 'json',
                    success: function(data) {
                        mostVisitedPagesBody.html(data.renderedView);
                    },
                    error: function(xhr, status, error) {
                        console.error('Error fetching most visited pages data:', error);
                    }
                });
            }

            function fetchVisitorsData(period) {
                $.ajax({
                    url: '{{ route('admin.dashboard.visitors-data') }}',
                    method: 'GET',
                    data: {
                        period: period
                    },
                    dataType: 'json',
                    success: function(data) {
                        visitorsTableBody.html(data.renderedView);
                    },
                    error: function(xhr, status, error) {
                        console.error('Error fetching visitors data:', error);
                    }
                });
            }

            // Fetch initial data for the default period (Last Week) for both sections
            fetchMostVisitedPagesData(timePeriodSelectPages.val());
            fetchVisitorsData(timePeriodSelectVisitors.val());

            // Handle changes to the time period select inputs
            timePeriodSelectPages.change(function() {
                const selectedPeriod = $(this).val();
                fetchMostVisitedPagesData(selectedPeriod);
            });

            timePeriodSelectVisitors.change(function() {
                const selectedPeriod = $(this).val();
                fetchVisitorsData(selectedPeriod);
            });
        });
    </script>
@endpush