@extends('admin.layouts.app')

@section('title', 'Dashboard')

@section('content')

<!-- Leaflet FREE Map Library -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

<style>


/* ---------------------------------------------------
   GLOBAL THEME COLORS
---------------------------------------------------- */
:root {
    --deep-blue: #0A3D62;
    --aqua-green: #3EC6A8;
    --sky-blue: #74B9FF;
    --teal: #1ABC9C;
    --soft-mint: #C9F7F5;

    --text-dark: #0A3D62;
    --text-muted: #5f7a8a;

    --card-bg: #ffffff;
    --card-border: #d8e7ea;
}

/* Background */
body {
    background: var(--soft-mint) !important;
}

/* Wrapper */
.dashboard-wrapper {
    padding: 40px 30px;
    max-width: 1500px;
    margin: 0 auto;
}

/* ---------------------------------------------------
   WELCOME SECTION – MODERN ELEGANT GLASS TILE
---------------------------------------------------- */
.welcome-section {
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(10,61,98,0.15);
    border-radius: 24px;
    padding: 30px;
    box-shadow:
        0 12px 30px rgba(10,61,98,0.15),
        0 0 0 4px rgba(255,255,255,0.4) inset;
    backdrop-filter: blur(18px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.welcome-section h1 {
    background: linear-gradient(135deg, var(--deep-blue), var(--teal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 34px;
    font-weight: 800;
}

.welcome-section p {
    color: var(--text-muted);
    margin-top: 6px;
}

/* Avatar */
.user-avatar {
    width: 85px;
    height: 85px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--teal), var(--sky-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #fff;
    box-shadow: 0 8px 20px rgba(26,188,156,0.35);
    position: relative;
    overflow: hidden;
}

.user-avatar::after {
    content: "";
    position: absolute;
    width: 140%;
    height: 140%;
    background: rgba(255,255,255,0.35);
    transform: rotate(35deg) translateY(-120%);
    transition: 0.5s;
}

.user-avatar:hover::after {
    transform: rotate(35deg) translateY(120%);
}

/* ---------------------------------------------------
   STAT CARDS – PREMIUM GLASS + GLOWS
---------------------------------------------------- */

.stats-grid {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
    gap: 28px;
}

.stat-card {
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(10,61,98,0.12);
    border-radius: 22px;
    padding: 30px;
    box-shadow:
        0 12px 34px rgba(10,61,98,0.12),
        0 0 0 4px rgba(255,255,255,0.45) inset;
    backdrop-filter: blur(16px);
    transition: 0.35s ease;
    overflow: hidden;
    position: relative;
}

/* Glow background */
.stat-card::before {
    content: "";
    position: absolute;
    top: -25%;
    right: -25%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(74,185,255,0.35), transparent 70%);
    filter: blur(40px);
    transition: 0.4s;
}

/* Hover */
.stat-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 18px 40px rgba(10,61,98,0.18),
        0 0 0 4px rgba(255,255,255,0.6) inset;
}

.stat-card:hover::before {
    transform: scale(1.2);
}

/* Icon bubbles */
.stat-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.stat-icon::after {
    content: "";
    position: absolute;
    width: 150%;
    height: 150%;
    background: rgba(255,255,255,0.2);
    transform: translate(-70%, -70%) rotate(45deg);
    transition: 0.5s;
}

.stat-card:hover .stat-icon::after {
    transform: translate(30%, 30%) rotate(45deg);
}

/* Icon colors */
.variant-1 { background: linear-gradient(135deg, var(--deep-blue), var(--teal)); }
.variant-2 { background: linear-gradient(135deg, var(--aqua-green), var(--sky-blue)); }
.variant-3 { background: linear-gradient(135deg, var(--sky-blue), var(--teal)); }
.variant-4 { background: linear-gradient(135deg, var(--teal), var(--deep-blue)); }

/* Stat titles */
.stat-info h3 {
    color: var(--text-dark);
    font-weight: 600;
    opacity: 0.85;
    font-size: 15px;
}

/* Stat value */
.stat-value {
    margin-top: 10px;
    font-size: 36px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--deep-blue), var(--sky-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Trend indicators */
.stat-trend {
    margin-top: 14px;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
}

.stat-trend.up {
    background: rgba(62,198,168,0.15);
    color: var(--aqua-green);
}

.stat-trend.down {
    background: rgba(255,80,80,0.18);
    color: #d62828;
}

/* ---------------------------------------------------
   CLOCK CARD – CRYSTAL PANEL STYLE
---------------------------------------------------- */

.clock-card {
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(10,61,98,0.15);
    border-radius: 26px;
    padding: 35px;
    text-align: center;
    margin-top: 35px;
    backdrop-filter: blur(20px);
    box-shadow:
        0 12px 34px rgba(10,61,98,0.15),
        0 0 0 4px rgba(255,255,255,0.4) inset;
    position: relative;
    overflow: hidden;
}

.clock-card::before {
    content: "";
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(62,198,168,0.35), transparent 75%);
    filter: blur(45px);
    transition: 0.4s;
}

.clock-card:hover::before {
    transform: scale(1.15) translateX(8%);
}

/* Clock icon */
.clock-icon {
    font-size: 48px;
    background: linear-gradient(135deg, var(--deep-blue), var(--sky-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Digital time */
.clock-time {
    font-size: 60px;
    font-weight: 900;
    font-family: 'Courier New', monospace;
    margin-top: 8px;
    background: linear-gradient(135deg, var(--deep-blue), var(--teal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Date */
.clock-date {
    margin-top: 8px;
    font-size: 18px;
    color: var(--text-muted);
}



/* ---------------------------------------------------
   ACTION CARDS – FUTURISTIC MINT–AQUA GLOW EDITION
---------------------------------------------------- */

.action-grid {
    margin-top: 45px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 30px;
}

/* Base card design */
.action-inner {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    padding: 28px;
    border: 1px solid rgba(10, 61, 98, 0.15);
    box-shadow:
        0 10px 28px rgba(10,61,98,0.12),
        0 0 0 4px rgba(255,255,255,0.45) inset;
    transition: 0.35s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(14px) saturate(160%);
}

/* Floating mint glow */
.action-inner::before {
    content: "";
    position: absolute;
    top: -30%;
    left: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(62,198,168,0.35), transparent 70%);
    filter: blur(45px);
    transition: 0.4s ease;
}

.action-inner:hover::before {
    transform: scale(1.15);
    opacity: 1;
}

/* Hover effect – lift + neon glow */
.action-inner:hover {
    transform: translateY(-6px);
    box-shadow:
        0 16px 36px rgba(10,61,98,0.22),
        0 0 0 4px rgba(255,255,255,0.6) inset,
        0 0 18px rgba(62,198,168,0.45);
}

/* ---------------------------------------------------
   ICON WRAPPER WITH HOLOGRAM SHINE
---------------------------------------------------- */

.action-icon-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 8px 18px rgba(0,0,0,0.15),
        0 0 14px rgba(26,188,156,0.35);
}

/* Color styles based on your palette */
.variant-emerald {
    background: linear-gradient(135deg, var(--teal), var(--deep-blue));
}
.variant-lime {
    background: linear-gradient(135deg, var(--sky-blue), var(--aqua-green));
}
.variant-dark {
    background: linear-gradient(135deg, var(--deep-blue), var(--teal));
}

/* Shine animation */
.action-icon-wrapper::after {
    content: "";
    position: absolute;
    width: 160%;
    height: 160%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.4),
        transparent
    );
    top: -120%;
    left: -120%;
    transform: rotate(30deg);
    transition: 0.6s ease;
}

.action-inner:hover .action-icon-wrapper::after {
    top: 120%;
    left: 120%;
}

/* ---------------------------------------------------
   TEXT CONTENT
---------------------------------------------------- */

.action-title {
    font-size: 22px;
    margin-top: 16px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--deep-blue), var(--aqua-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.action-description {
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.5;
}

/* ---------------------------------------------------
   FOOTER LINK
---------------------------------------------------- */

.action-footer {
    margin-top: 18px;
}

.action-link {
    font-weight: 700;
    font-size: 15px;
    color: var(--teal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s ease;
}

.action-link:hover {
    color: var(--deep-blue);
    transform: translateX(4px);
}

.action-link:hover i {
    transform: translateX(4px);
}




    #farmersMap {
        width: 100%;
        height: 550px;
        border-radius: 14px;
        border: 2px solid #3EC6A8;
        margin-top: 20px;
    }

    .page-title {
        font-size: 30px;
        font-weight: 800;
        color: #0A3D62;
    }

</style>




<div class="dashboard-wrapper">

    <br><br>

    <!-- Welcome Section -->
    <div class="glass-card welcome-section">
        <div class="welcome-content">
            <div class="welcome-text">
                <h1>Welcome Back! 👋</h1>
                <p>Here's what's happening with your dashboard today</p>
            </div>
            <div class="user-avatar" aria-hidden="true">
                <i class="fa fa-user"></i>
            </div>
        </div>
    </div>

    <!-- Stats Grid -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-icon variant-1">
                    <i class="fa fa-chart-line"></i>
                </div>
                <div class="stat-info">
                    <h3>Total Revenue</h3>
                </div>
            </div>
            <div class="stat-value">$45,231</div>
            <div class="stat-trend up">
                <i class="fa fa-arrow-up"></i>
                <span>+12.5%</span>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-icon variant-2">
                    <i class="fa fa-users"></i>
                </div>
                <div class="stat-info">
                    <h3>Active Users</h3>
                </div>
            </div>
            <div class="stat-value">2,847</div>
            <div class="stat-trend up">
                <i class="fa fa-arrow-up"></i>
                <span>+8.2%</span>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-icon variant-3">
                    <i class="fa fa-shopping-bag"></i>
                </div>
                <div class="stat-info">
                    <h3>Orders</h3>
                </div>
            </div>
            <div class="stat-value">1,234</div>
            <div class="stat-trend down">
                <i class="fa fa-arrow-down"></i>
                <span>-3.1%</span>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-icon variant-4">
                    <i class="fa fa-star"></i>
                </div>
                <div class="stat-info">
                    <h3>Rating</h3>
                </div>
            </div>
            <div class="stat-value">4.8</div>
            <div class="stat-trend up">
                <i class="fa fa-arrow-up"></i>
                <span>+0.3</span>
            </div>
        </div>
    </div>

    <!-- Clock Section -->
    <div class="clock-section">
        <div class="clock-card">
            <div class="clock-display">
                <div class="clock-icon">
                    <i class="fa fa-clock"></i>
                </div>
                <div class="clock-time" id="clockTime" aria-live="polite">00:00:00</div>
                <div class="clock-date" id="clockDate">Loading...</div>
            </div>
        </div>
    </div>

    <!-- Action Cards -->
    <div class="action-grid">
        <a href="#" class="action-card" aria-label="Analytics">
            <div class="action-inner">
                <div class="action-icon-wrapper variant-emerald">
                    <i class="fa fa-tachometer-alt"></i>
                </div>
                <div class="action-title">Analytics</div>
                <div class="action-description">View detailed insights and performance metrics for your business</div>
                <div class="action-footer">
                    <span class="action-link">
                        View Details
                        <i class="fa fa-arrow-right"></i>
                    </span>
                </div>
            </div>
        </a>

        <a href="#" class="action-card" aria-label="Schedule">
            <div class="action-inner">
                <div class="action-icon-wrapper variant-lime">
                    <i class="fa fa-calendar-alt"></i>
                </div>
                <div class="action-title">Schedule</div>
                <div class="action-description">Manage your appointments and organize your daily tasks</div>
                <div class="action-footer">
                    <span class="action-link">
                        Open Calendar
                        <i class="fa fa-arrow-right"></i>
                    </span>
                </div>
            </div>
        </a>

        <a href="#" class="action-card" aria-label="Messages">
            <div class="action-inner">
                <div class="action-icon-wrapper variant-dark">
                    <i class="fa fa-envelope"></i>
                </div>
                <div class="action-title">Messages</div>
                <div class="action-description">Check your inbox and respond to important communications</div>
                <div class="action-footer">
                    <span class="action-link">
                        View Messages
                        <i class="fa fa-arrow-right"></i>
                    </span>
                </div>
            </div>
        </a>

        <a href="#" class="action-card" aria-label="Settings">
            <div class="action-inner">
                <div class="action-icon-wrapper variant-emerald">
                    <i class="fa fa-cog"></i>
                </div>
                <div class="action-title">Settings</div>
                <div class="action-description">Configure your preferences and manage account settings</div>
                <div class="action-footer">
                    <span class="action-link">
                        Manage Settings
                        <i class="fa fa-arrow-right"></i>
                    </span>
                </div>
            </div>
        </a>

        <a href="#" class="action-card" aria-label="Reports">
            <div class="action-inner">
                <div class="action-icon-wrapper variant-lime">
                    <i class="fa fa-file-alt"></i>
                </div>
                <div class="action-title">Reports</div>
                <div class="action-description">Generate and download comprehensive business reports</div>
                <div class="action-footer">
                    <span class="action-link">
                        View Reports
                        <i class="fa fa-arrow-right"></i>
                    </span>
                </div>
            </div>
        </a>

        <a href="#" class="action-card" aria-label="Profile">
            <div class="action-inner">
                <div class="action-icon-wrapper variant-emerald">
                    <i class="fa fa-user-circle"></i>
                </div>
                <div class="action-title">Profile</div>
                <div class="action-description">Update your personal information and profile details</div>
                <div class="action-footer">
                    <span class="action-link">
                        Edit Profile
                        <i class="fa fa-arrow-right"></i>
                    </span>
                </div>
            </div>
        </a>
    </div>

<br><br>



<div class="container-fluid">

<h2 class="page-title">🚜 Farmer Location Dashboard</h2>

<p>Farmers are displayed on the map as markers based on the latitude and longitude values stored in the database.</p>

<div id="farmersMap"></div>
</div>



</div>

<script>
function updateClock() {
    const now = new Date();

    // Format time as HH:MM:SS (local)
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');

    document.getElementById("clockTime").textContent = `${hours}:${minutes}:${seconds}`;

    // Format date (readable)
    const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    document.getElementById("clockDate").textContent = now.toLocaleDateString('en-US', options);
}

// Update immediately and then every second
updateClock();
setInterval(updateClock, 1000);




// Map section

// Initialize Map (Sri Lanka Center)
var map = L.map('farmersMap').setView([7.8731, 80.7718], 8);

// FREE OpenStreetMap Tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
}).addTo(map);

// Custom Farmer Icon
var farmerIcon = L.icon({
    iconUrl: '/dashboard/assets/images/location.png',
    iconSize: [55, 55],
    iconAnchor: [27, 55],
    popupAnchor: [0, -45],
});


// Custom Headquarters Icon
var hqIcon = L.icon({
    iconUrl: '/dashboard/assets/images/7360068.png',
    iconSize: [60, 60],
    iconAnchor: [30, 60],
    popupAnchor: [0, -50],
});

// Add Headquarters Marker
L.marker([6.9849, 81.0562], { icon: hqIcon })
    .addTo(map)
    .bindPopup("<b>🏢 KMECHHMS Headquarters</b><br>Badulla, Sri Lanka");


// Loop through dataset and add farmers
@foreach ($farmers as $farmer)
    L.marker(
        [{{ $farmer->latitude }}, {{ $farmer->longitude }}],
        { icon: farmerIcon }
    )
    .addTo(map)
    .bindPopup(
        "<b>👨‍🌾 {{ $farmer->farmer_name }}</b><br>" +
        "ID: {{ $farmer->id }}"
    );
@endforeach   // <-- FIXED

</script>

@endsection
