@php
    $hour = date('H');
    $greeting = '';

    if ($hour >= 4 && $hour < 12) {
        $greeting = 'morning';
    } elseif ($hour >= 12 && $hour < 17) {
        $greeting = 'afternoon';
    } elseif ($hour >= 17 && $hour < 21) {
        $greeting = 'evening';
    } else {
        $greeting = 'night';
    }
@endphp

@extends('admin.layouts.layouts')

@section('title', 'Dashboard')

@section('content')
    <style>
        .card-container {
            width: 100%;
            max-width: 400px;
            background: #f9fbff;
            border-radius: 10px;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
            padding: 15px;
            font-family: Arial, sans-serif;
            height: 100%;
        }

        .card-headerr {
            font-weight: bold;
            font-size: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 5px;
            margin-bottom: 10px;
        }

        .total-count {
            font-weight: normal;
            font-size: 14px;
            color: #666;
        }

        .card-scroll {
            max-height: 400px;
            overflow-y: auto;
            padding-right: 5px;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .card-scroll::-webkit-scrollbar {
            width: 6px;
        }

        .card-scroll::-webkit-scrollbar-thumb {
            background-color: #cbd5e1;
            border-radius: 3px;
        }

        .card-scroll:hover::-webkit-scrollbar-thumb {
            background-color: #94a3b8;
        }

        .customer-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
            table-layout: fixed;
        }

        .customer-table th {
            background: #e0ecff;
            text-align: left;
            padding: 8px;
            color: #374151;
        }

        .customer-table td {
            padding: 8px;
            border-bottom: 1px solid #e5e7eb;
            vertical-align: top;
        }

        .customer-table td strong {
            color: #2563eb;
        }

        .customer-table thead th {
            position: sticky;
            top: 0;
            background: #e0ecff;
            z-index: 1;
            text-align: left;
            padding: 8px;
            color: #374151;
            font-weight: bold;
        }

        .customer-table tbody td {
            padding: 8px;
            border-bottom: 1px solid #e5e7eb;
            vertical-align: top;
            background: #fff;
        }

        .card-scroll::-webkit-scrollbar {
            display: none;
        }

        #checkInOptionBtn:hover {
            color: black !important;
        }

        #checkInBtn:hover {
            color: black !important;
        }

        .d-flex.gap-3>div {
            width: 82px;
        }

        .text-center img {
            border: 2px solid #ddd;
            padding: 2px;
        }


        .checkin-card {
            background: linear-gradient(135deg, #174239, #00B896);
            color: #fff;
            border-radius: 12px;
            height: auto;
            max-height: 240px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        }

        .checkin-card .card-body {
            padding: 20px;
        }

        .highlights-card {
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            min-height: 240px;
        }

        .highlights-card .nav-tabs {
            border-bottom: 2px solid #e5e7eb;
        }

        .highlights-card .nav-link {
            color: #444;
            font-weight: 500;
            border: none;
        }

        .highlights-card .nav-link.active {
            border-bottom: 3px solid #00B896;
            color: #00B896;
            background: none;
        }

        #highlight-content {
            min-height: 80px;
            color: #6b7280;
        }

        .text-light-50 {
            opacity: 0.7;
            font-size: 12px;
        }

        #highlight-content .d-flex.gap-3 {
            justify-content: flex-start !important;
            text-align: left !important;
        }

        #highlight-content p {
            text-align: center;
            margin: 0px -15px;
        }

        #highlight-content.loading p {
            text-align: center !important;
            width: 100%;
        }

        .leave-circle {
            text-align: center;
        }

        .swal-modal.wide-swal {
            width: 650px !important;
            max-width: 90% !important;
        }

        .swal-content {
            text-align: left !important;
        }

        .swal-modal.wide-swal img {
            height: auto !important;
            display: block;
        }
    </style>

    <div class="page-header">
        <h3 class="page-title">
            Dashboard
        </h3>
    </div>

    {{-- Counts --}}
    <div class="row grid-margin">
        <div class="col-12">
            <div class="card card-statistics">
                <div class="card-body">
                    <div class="d-flex flex-column flex-md-row align-items-center justify-content-between">
                        <div class="statistics-item">
                            <p>
                                <i class="icon-sm fa-solid fa-user-tie mr-2"></i>
                                Employees
                            </p>
                            <h2 id="employee-counts">00</h2>
                        </div>
                        <div class="statistics-item">
                            <p>
                                <i class="icon-sm fa fa-tractor mr-2"></i>
                                Farmers
                            </p>
                            <h2 id="farmer-counts">00</h2>
                        </div>
                        <div class="statistics-item">
                            <p>
                                <i class="icon-sm fa-solid fa-box mr-2"></i>
                                Products
                            </p>
                            <h2 id="product-counts">00</h2>
                        </div>
                        <div class="statistics-item">
                            <p>
                                <i class="icon-sm fa fa-leaf mr-2"></i>
                                Pesticides
                            </p>
                            <h2 id="pesticide-counts">00</h2>
                        </div>
                        <div class="statistics-item">
                            <p>
                                <i class="icon-sm fa fa-tags mr-2"></i>
                                Tickets
                            </p>
                            <h2 id="ticket-counts">00</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Check In-Out & Employee Highlights --}}
    <div class="row">
        {{-- Check In-Out --}}
        <div class="col-md-4 grid-margin">
            <div class="card checkin-card">
                <div class="card-body" data-checkin="{{ $presentDayAttendance?->check_in_time }}"
                    data-checkout="{{ $presentDayAttendance?->check_in_out }}"
                    data-option="{{ $presentDayAttendance?->check_in_option }}" id="present-day-attendance">
                    <h5 class="fw-bold mb-1">Hello {{ auth()->user()->employeeMaster?->short_name }}</h5>
                    <p class="text-light">Good {{ $greeting }}</p>

                    <div class="d-flex align-items-center mb-3 gap-2">
                        <div class="dropdown">
                            <button class="btn btn-light btn-sm dropdown-toggle text-dark" type="button"
                                id="checkInOptionBtn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Check In Option
                            </button>
                            <div class="dropdown-menu" aria-labelledby="checkInOptionBtn">
                                <a class="dropdown-item check-in-option" href="#" data-value="Local">Local</a>
                                <a class="dropdown-item check-in-option" href="#" data-value="Travel">Travel</a>
                                <a class="dropdown-item check-in-option" href="#" data-value="Work From Home">
                                    Work From Home
                                </a>
                            </div>
                        </div>
                        <button id="checkInBtn" class="btn btn-outline-light btn-sm ml-2">Check In</button>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mt-2 border-top pt-2">
                        <div>
                            <small class="">Check In Time:</small>
                            <p id="checkInTime" class="mb-0 text-white fw-semibold">--:--:--</p>
                        </div>
                        <div>
                            <small class="">Check Out Time:</small>
                            <p id="checkOutTime" class="mb-0 text-white fw-semibold">--:--:--</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Employee Highlights --}}
        <div class="col-md-8">
            <div class="card highlights-card">
                <div class="card-body">
                    <ul class="nav" id="highlightTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link employee-highlight-tab active" data-type="birthday" href="#">
                                <i class="fa-solid fa-cake-candles"></i> Birthdays
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link employee-highlight-tab" data-type="anniversary" href="#">
                                <i class="fa-solid fa-champagne-glasses"></i>
                                Work Anniversaries
                            </a>
                        </li>
                        <li class="nav-item"><a class="nav-link employee-highlight-tab" data-type="joinee" href="#">
                                <i class="fa-solid fa-user-tie"></i> New Joinee
                            </a>
                        </li>
                    </ul>
                    <div id="highlight-content" class="mt-4 text-center">
                        <p>Loading...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- On Absent, On Present, On Leave Employees & Order and Pickup Chart --}}
    <div class="row mt-4">
        {{-- On Absent Today --}}
        <div class="col-md-4 grid-margin stretch-card">
            <div class="card">
                <div class="card-container">
                    <div class="card-headerr">
                        <span>On Absent Today <i class="fas fa-walking"></i></span>
                        <span>Total: {{ count($onAbsentEmployees) }}</span>
                    </div>
                    <div class="card-scroll">
                        <table class="customer-table">
                            <thead>
                                <tr>
                                    <th>Employee</th>
                                    <th style="width: 100px;">Mobile</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (count($onAbsentEmployees) > 0)
                                    @foreach ($onAbsentEmployees as $onAbsentEmployee)
                                        <tr>
                                            <td>{{ $onAbsentEmployee->short_name }}</td>
                                            <td>{{ $onAbsentEmployee->phone_number }}</td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="2" style="text-align: center !important;">
                                            No Records Found
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- Orders Chart --}}
        <div class="col-md-4 grid-margin stretch-card">
            <div class="card">
                <div class="card-body d-flex flex-column">
                    <h4 class="card-title">
                        <i class="fa-solid fa-cart-shopping"></i>
                        Orders
                    </h4>
                    <div class="flex-grow-1 d-flex flex-column justify-content-between">
                        <canvas id="order-chart" class="mt-3"></canvas>
                        <div class="pt-4">
                            <div id="order-chart-legend" class="order-chart-legend"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Pickup Chart --}}
        <div class="col-md-4 grid-margin stretch-card">
            <div class="card">
                <div class="card-body d-flex flex-column">
                    <h4 class="card-title">
                        <i class="fa-solid fa-truck-fast"></i>
                        Pick Up
                    </h4>
                    <div class="flex-grow-1 d-flex flex-column justify-content-between">
                        <canvas id="pickup-status-chart" class="mt-3 mb-3 mb-md-0"></canvas>
                        <div id="pickup-status-chart-legend" class="pickup-status-chart-legend pt-4 border-top"></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- On Present Today --}}
        <div class="col-md-4 grid-margin stretch-card">
            <div class="card">
                <div class="card-container">
                    <div class="card-headerr">
                        <span>On Present Today <i class="fa-solid fa-hand"></i></span>
                        <span>Total: {{ count($onPresentEmployees) }}</span>
                    </div>
                    <div class="card-scroll">
                        <table class="customer-table">
                            <thead>
                                <tr>
                                    <th>Employee</th>
                                    <th style="width: 100px;">Mobile</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (count($onPresentEmployees) > 0)
                                    @foreach ($onPresentEmployees as $onPresentEmployee)
                                        <tr>
                                            <td>{{ $onPresentEmployee->short_name }}</td>
                                            <td>{{ $onPresentEmployee->phone_number }}</td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="2" style="text-align: center !important;">No Records Found</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- On Leave Today --}}
        <div class="col-md-4 grid-margin stretch-card">
            <div class="card">
                <div class="card-container">
                    <div class="card-headerr">
                        <span>On Leave Today <i class="fas fa-walking"></i></span>
                        <span>Total: {{ count($onLeaveEmployees) }}</span>
                    </div>
                    <div class="card-scroll">
                        <div class="d-flex gap-3 flex-wrap">
                            @forelse($onLeaveEmployees as $onLeaveTodayEmployee)
                                <div class="leave-circle" data-toggle="tooltip" data-placement="bottom"
                                    data-original-title="{{ $onLeaveTodayEmployee->leave_type }}"
                                    data-bs-toggle="tooltip" title="{{ $onLeaveTodayEmployee->leave_type }}">
                                    <img src="{{ isset($onLeaveTodayEmployee->profile_photo_path) &&
                                    file_exists('storage/' . $onLeaveTodayEmployee->profile_photo_path)
                                        ? asset('storage/' . $onLeaveTodayEmployee->profile_photo_path)
                                        : asset('assets/images/faces/user-acc.png') }}"
                                        class="rounded-circle" width="60">
                                    <p style="">{{ $onLeaveTodayEmployee->shortName ?? '-' }}</p>
                                </div>
                            @empty
                                <p class="text-muted mt-4">No one on leave today</p>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Recent Tickets --}}
    <div class="row">
        <div class="col-12 grid-margin">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">
                        <i class="fa-solid fa-ticket"></i><b>Tickets</b>
                    </h4>
                    <div class="table-responsive">
                        <table class="table table-sm" id="tickets-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Category</th>
                                    <th>Description</th>
                                    <th>Created By</th>
                                    <th>Created Date</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('page-js')
    <script type="text/javascript">
        var ticketListRoute = "{{ route('admin.dashboard.ticket-list') }}";
        var countsRoute = "{{ route('admin.dashboard.counts') }}";
        var employeeHighlightsRoute = "{{ route('admin.dashboard.employee-highlights') }}";
        var dailyCheckInOutRoute = "{{ route('employee-master.daily-check-in-out') }}";
        var chromeStep1 = "{{ asset('assets/images/chrome/step-1.png') }}";
        var chromeStep2 = "{{ asset('assets/images/chrome/step-2.png') }}";
        var chromeStep3 = "{{ asset('assets/images/chrome/step-3.png') }}";
        var safariStep1 = "{{ asset('assets/images/safari/step-1.png') }}";
        var safariStep2 = "{{ asset('assets/images/safari/step-2.png') }}";
        var safariStep3 = "{{ asset('assets/images/safari/step-3.png') }}";
        var androidSafariStep1 = "{{ asset('assets/images/m_chrome/a-step-1.jpg') }}";
        var androidSafariStep2 = "{{ asset('assets/images/m_chrome/a-step-2.jpg') }}";
        var androidSafariStep3 = "{{ asset('assets/images/m_chrome/a-step-3.jpg') }}";
        var iosSafariStep1 = "{{ asset('assets/images/m_safari/is-step-1.png') }}";
        var iosSafariStep2 = "{{ asset('assets/images/m_safari/is-step-2.png') }}";
        var iosSafariStep3 = "{{ asset('assets/images/m_safari/is-step-3.png') }}";
    </script>
    <script src="{{ asset('assets/js/admin/dashborad.js') }}"></script>
@endsection