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

        /* Employee Highlights */
        .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;
        }

        /* Only center the loading message */
        #highlight-content p {
            text-align: center;
            margin: 0px -15px;
        }

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

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

        /* Make SweetAlert wider */
        .swal-modal.wide-swal {
            width: 650px !important;
            max-width: 90% !important;
        }

        /* Make Swal content area wider */
        .swal-content {
            text-align: left !important;
        }

        /* Make images scale properly */
        .swal-modal.wide-swal img {
            /* width: 70% !important; */
            height: auto !important;
            display: block;
        }
    </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">
        <!-- Left card -->
        <div class="col-md-4 grid-margin">
            <div class="card checkin-card">
                <div class="card-body todaysAttendance"
                    data-checkin="{{ $todayAttendance?->check_in_time }}"
                    data-checkout="{{ $todayAttendance?->check_in_out }}"
                    data-option="{{ $todayAttendance?->check_in_option }}">
                    <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>

        <!-- Right card -->
        <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="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-confetti"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 5h2" /><path d="M5 4v2" /><path d="M11.5 4l-.5 2" /><path d="M18 5h2" /><path d="M19 4v2" /><path d="M15 9l-1 1" /><path d="M18 13l2 -.5" /><path d="M18 19h2" /><path d="M19 18v2" /><path d="M14 16.518l-6.518 -6.518l-4.39 9.58a1 1 0 0 0 1.329 1.329l9.579 -4.39z" /></svg>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>




    <div class="row mt-4">
        <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>
        <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->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>

        <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($onLeaveTodayEmployees) }}</span>
                    </div>
                    <div class="card-scroll">
                        <div class="d-flex gap-3 flex-wrap">
                            @forelse($onLeaveTodayEmployees 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>
    <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') }}";
        var employeeHighlightFetch = "{{ route('employee.highlights.fetch') }}";
        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