@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;
        }

        .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;
        }

        /* Optional: show scrollbar only on hover */
        .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;
            /* Match the header background */
            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;
        }
    </style>

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

    <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 class="emplyoeeCountClass"></h2>
                        </div>
                        <div class="statistics-item">
                            <p>
                                <i class="icon-sm fa fa-tractor mr-2"></i>
                                Farmers
                            </p>
                            <h2 class="farmerCountClass"></h2>
                        </div>
                        <div class="statistics-item">
                            <p>
                                <i class="icon-sm fa-solid fa-box mr-2"></i>
                                Products
                            </p>
                            <h2 class="productCountClass"></h2>
                        </div>
                        <div class="statistics-item">
                            <p>
                                <i class="icon-sm fa fa-leaf mr-2"></i>
                                Pesticides
                            </p>
                            <h2 class="pesticideCountClass"></h2>
                        </div>
                        <div class="statistics-item">
                            <p>
                                <i class="icon-sm fa fa-tags mr-2"></i>
                                Tickets
                            </p>
                            <h2 class="ticketCountClass"></h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @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

    <div class="row">
        <div class="col-md-4 grid-margin stretch-card">
            <div class="card" style="background: linear-gradient(85deg, #174239, #00B896); color: #fff; border-radius: 10px;">
                <div class="card-body todaysAttendance" data-checkin="{{ $todayAttendance?->check_in_time }}" data-checkout="{{ $todayAttendance?->check_in_out }}" data-option="{{ $todayAttendance?->check_in_option }}">
                    <h5>Hello {{ auth()->user()->employeeMaster?->short_name }}</h5>
                    <p>Good {{ $greeting }}</p>

                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="d-flex align-items-center">
                            <!-- Dropdown -->
                            <div class="dropdown mr-2">
                                <button class="btn btn-outline-light btn-sm dropdown-toggle" 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 -->
                            <button id="checkInBtn" class="btn btn-outline-light btn-sm">Check In</button>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <div class="d-flex align-items-center">
                            <p class="mb-0 mr-1">Check In Time:</p>
                            <p id="checkInTime" class="mb-0">--:--:--</p>
                        </div>
                        <div class="d-flex align-items-center">
                            <p class="mb-0 mr-1">Check Out Time:</p>
                            <p id="checkOutTime" class="mb-0">--:--:--</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <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->employee_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>
        <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>
        <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>
        <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->employee_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>
    </div>
    <div class="row">
        <div class="col-12 grid-margin">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">
                        🎫 <b>Tickets</b>
                    </h4>
                    <div class="table-responsive">
                        <table class="table" id="ticketDashboardTable">
                            <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 dashboardTicketList = "{{ route('dashboard-ticket-list') }}";
        var dashboardCounts = "{{ route('dashboard-counts') }}";
        var dailyCheckInOut = "{{ route('employee-daily-check-in-out') }}";
    </script>
    <script src="{{ asset('assets/js/admin/dashborad.js') }}?time={{ time() }}"></script>
@endsection