@extends('layouts.user_type.auth')

@section('home')
    <div>
        @include('components.alert')
        <div class="row">
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-capitalize font-weight-bold">Total Company</p>
                                    <h5 class="font-weight-bolder mb-0">{{ $total_company }}</h5>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                                    <i class="fa fa-building text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-capitalize font-weight-bold">Subscribed company</p>
                                    <h5 class="font-weight-bolder mb-0">{{ $subscribed_company }}</h5>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                                    <i class="fas fa-building text-lg opacity-10" aria-hidden="true"></i><i
                                        class="fas fa-check"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-capitalize font-weight-bold">Expired company</p>
                                    <h5 class="font-weight-bolder mb-0">{{ $expired_company }}</h5>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                                    <i class="fas fa-building text-lg opacity-10" aria-hidden="true"></i><i
                                        class="fas fa-times"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @if (auth()->user()->user_type == 'admin' || auth()->user()->user_type == 'super_admin')
                <div class="col-xl-3 col-sm-6">
                    <div class="card">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-capitalize font-weight-bold">Total User</p>
                                        <h5 class="font-weight-bolder mb-0">{{ $total_user }}</h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                                        <i class="fa fa-user text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div class="col-xl-3 col-sm-6">
                    <div class="card">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-capitalize font-weight-bold">In Progress</p>
                                        <h5 class="font-weight-bolder mb-0">
                                            {{ $openTicketsCount }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                                        <i class="fa fa-user text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
        <div class="row mt-4">
            <div class="col-12">
                <h5 class="font-weight-bolder mb-4">Analytics Overview</h5>
            </div>

            <div class="col-xl-4 col-sm-12 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-header p-3 pt-2">
                        <div
                            class="icon icon-lg icon-shape bg-gradient-danger shadow-danger text-center border-radius-xl mt-n4 position-absolute">
                            <i class="fas fa-file-invoice text-white opacity-10"></i>
                        </div>
                        <div class="text-end pt-1">
                            <p class="text-sm mb-0 text-capitalize">Cron Log Monitor</p>
                            <h4 class="mb-0 text-danger">{{ $cron_errors_24h ?? '4' }}</h4>
                        </div>
                    </div>

                    <hr class="dark horizontal my-0">

                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-12">
                                <p class="mb-1">
                                    <span
                                        class="text-danger text-sm font-weight-bolder">{{ $cron_errors_24h ?? '4' }}</span>
                                    Last 24 Hrs Errors
                                </p>
                                <p class="mb-0 text-sm">
                                    Last Successful Run: <span
                                        class="font-weight-bold">{{ $last_cron_run ?? '5 mins ago' }}</span>
                                </p>
                            </div>
                            <div class="col-lg-6 col-md-6 col-12 d-flex align-items-center justify-content-end">
                                <div id="cron-trend-chart" style="height: 60px; width: 100%;">
                                    {{-- <small class="text-muted">[Cron Trend Graph Here]</small> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4 col-sm-12 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-header p-3 pt-2">
                        <div
                            class="icon icon-lg icon-shape bg-gradient-info shadow-info text-center border-radius-xl mt-n4 position-absolute">
                            <i class="fas fa-eye text-white opacity-10"></i>
                        </div>
                        <div class="text-end pt-1">
                            <p class="text-sm mb-0 text-capitalize">Visitor Tracker</p>
                            <h4 class="mb-0 text-info">{{ $visits_today ?? '352' }}</h4>
                        </div>
                    </div>

                    <hr class="dark horizontal my-0">

                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-12">
                                <p class="mb-1">
                                    <span
                                        class="text-success text-sm font-weight-bolder">{{ $visits_today_percentage ?? '+12%' }}</span>
                                    than yesterday
                                </p>
                                <p class="mb-0 text-sm">
                                    7-Day Total: <span
                                        class="font-weight-bold">{{ $visits_7_day_total ?? '2,145' }}</span>
                                </p>
                            </div>
                            <div class="col-lg-6 col-md-6 col-12 d-flex align-items-center justify-content-end">
                                <div id="visits-trend-chart" style="height: 60px; width: 100%;">
                                    {{-- <small class="text-muted">[Visits Trend Graph Here]</small> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4 col-sm-12 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-header p-3 pt-2">
                        <div
                            class="icon icon-lg icon-shape bg-gradient-warning shadow-warning text-center border-radius-xl mt-n4 position-absolute">
                            <i class="fas fa-envelope-open-text text-white opacity-10"></i>
                        </div>
                        <div class="text-end pt-1">
                            <p class="text-sm mb-0 text-capitalize">Daily Contact Us</p>
                            <h4 class="mb-0 text-warning">{{ $contact_us_today ?? 0 }}</h4>
                        </div>
                    </div>

                    <hr class="dark horizontal my-0">

                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-12">
                                <p class="mb-1">
                                    <span class="text-success text-sm font-weight-bolder">
                                        {{ $contact_us_percentage ?? '+0%' }}
                                    </span>
                                    than yesterday
                                </p>
                                <p class="mb-0 text-sm">
                                    7-Day Total:
                                    <span class="font-weight-bold">
                                        {{ $contact_us_7_day_total ?? 0 }}
                                    </span>
                                </p>
                            </div>
                            <div class="col-lg-6 col-md-6 col-12 d-flex align-items-center justify-content-end">
                                <div id="contact-us-trend-chart" style="height: 60px; width: 100%;">
                                    {{-- Optional: Contact Us Trend Graph --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row my-4">
            <div class="card">
                <div class="card-header pb-0">
                    <div class="row">
                        <h6>Upcoming Expirations</h6>
                    </div>
                </div>
                <div class="card-body px-0 pb-2">
                    <div class="table-responsive" style="height:320px;">
                        <table class="table align-items-center mb-0">
                            <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">No.
                                    </th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Companies</th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Package</th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Expire Date</th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Days</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($subscriptions as $index => $subscription)
                                    <tr>
                                        <td class="ps-4">
                                            <p class="text-xs font-weight-bold mb-0">{{ $index }}</p>
                                        </td>
                                        <!-- First column: Company Name -->
                                        <td>
                                            <div class="align-middle text-center text-sm">
                                                <h6 class="mb-0 text-sm">{{ $subscription['company_name'] }}</h6>
                                            </div>
                                        </td>

                                        <!-- Second column: Package Name -->
                                        <td>
                                            <div class="align-middle text-center text-sm">
                                                <h6 class="mb-0 text-sm">{{ $subscription['package_name'] }}</h6>
                                            </div>
                                        </td>

                                        <!-- Third column: Expires At -->
                                        <td class="align-middle text-center text-sm">
                                            <h6 class="mb-0 text-sm">
                                                {{ \Carbon\Carbon::parse($subscription['expires_at'])->format('d-m-Y | H:i:s') }}
                                            </h6>
                                        </td>

                                        <!-- Fourth column: Days Difference -->
                                        <td class="align-middle text-center text-sm">
                                            <h6 class="mb-0 text-sm">{{ $subscription['days'] }}</h6>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center py-5">
                                            <img src="{{ asset('assets/img/no_data_found.png') }}" alt="No Data Found"
                                                style="width: 132px; opacity: 0.6;">
                                            <p class="mt-2 text-muted">No Upcoming Expirations</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    @include('components.pagination', ['paginator' => $subscriptions])
                </div>
            </div>
        </div>
    </div>
@endsection