/* ================= CSS INJECTION ================= */
var styleInjection = `
<style>
    /* Modern CSS Variables */
    :root {
        --primary-color: #4361ee;
        --primary-dark: #3a56d4;
        --primary-light: #6c7ee8;
        --secondary-color: #06d6a0;
        --danger-color: #ef476f;
        --warning-color: #ffb703;
        --dark-bg: #005fc6;
        --light-bg: #f8fafc;
        --card-bg: #ffffff;
        --text-primary: #1e293b;
        --text-secondary: #64748b;
        --border-color: #e2e8f0;
        --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
        --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
        --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
        --gradient-primary: linear-gradient(135deg, #4361ee 0%, #3a56d4 100%);
        --gradient-danger: linear-gradient(135deg, #ef476f 0%, #d43f63 100%);
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Main Navigation Container */
    .crud-tabs {
        background: #005fc6;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        box-shadow: var(--shadow-lg);
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color) rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.1);
        backdrop-filter: blur(10px);
    }

    /* Custom Scrollbar */
    .crud-tabs::-webkit-scrollbar {
        height: 4px;
    }

    .crud-tabs::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.1);
        border-radius: 10px;
    }

    .crud-tabs::-webkit-scrollbar-thumb {
        background: var(--gradient-primary);
        border-radius: 10px;
    }

    .crud-tabs::-webkit-scrollbar-thumb:hover {
        background: var(--primary-light);
    }

    /* Tabs Container */
    .tabs-left {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-width: min-content;
    }

    /* Tab Items */
    .tab-item {
        padding: 0.6rem 1.2rem;
        border-radius: 40px;
        font-size: 0.9rem;
        font-weight: 500;
        color: rgba(255,255,255,0.7);
        cursor: pointer;
        transition: var(--transition);
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        letter-spacing: 0.3px;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        white-space: nowrap;
    }

    /* Tab Hover Effect */
    .tab-item:hover {
        color: white;
        background: rgba(255,255,255,0.15);
        border-color: rgba(255,255,255,0.3);
        transform: translateY(-2px);
    }

    /* Active Tab */
    .tab-item.active {
        background: black;
        color: white;
        font-weight: 600;
        border: none;
        box-shadow: 0 8px 16px -4px rgba(67, 97, 238, 0.5);
        position: relative;
        overflow: hidden;
    }

    .tab-item.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3) 0%, transparent 70%);
        border-radius: inherit;
        pointer-events: none;
    }

    /* Notification Badge */
    .badge.header-badge, .badge_alarms {
        background: linear-gradient(135deg, #ef476f 0%, #ffb703 100%);
        color: white;
        font-size: 0.65rem;
        padding: 0.2rem 0.45rem;
        border-radius: 50px;
        margin-right: 2px;
        animation: pulse 2s infinite;
        box-shadow: 0 2px 8px rgba(239, 71, 111, 0.5);
        font-weight: 700;
    }

    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
    }

    /* Tab Icons */
    .tab-item i {
        font-size: 1rem;
        transition: var(--transition);
    }

    .tab-item:hover i {
        transform: scale(1.2);
    }

    /* Quick Action Button */
    .quick-action-btn {
        margin-left: 1rem;
        background: linear-gradient(135deg, #000000 0%, #000000 100%);
        border: none;
        padding: 0.6rem 1.5rem;
        border-radius: 40px;
        color: white;
        cursor: pointer;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        font-size: 0.9rem;
        white-space: nowrap;
        box-shadow: 0 4px 12px rgba(6, 214, 160, 0.3);
    }

    .quick-action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(6, 214, 160, 0.4);
    }

    .quick-action-btn i {
        font-size: 1rem;
    }

    /* Tab Content Animation */
    .crud-tab-content {
        animation: fadeIn 0.4s ease;
        padding: 0px;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Mobile Menu Toggle (hidden by default) */
    .mobile-menu-toggle {
        display: none;
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.2);
        color: white;
        padding: 0.6rem 1rem;
        border-radius: 40px;
        cursor: pointer;
        align-items: center;
        gap: 8px;
        font-weight: 500;
        transition: var(--transition);
    }

    .mobile-menu-toggle:hover {
        background: rgba(255,255,255,0.2);
    }

    /* Responsive Breakpoints */
    @media (max-width: 1024px) {
        .tab-item {
            padding: 0.5rem 1rem;
            font-size: 0.85rem;
        }
        
        .quick-action-btn {
            padding: 0.5rem 1.2rem;
            font-size: 0.85rem;
        }
    }

    @media (max-width: 768px) {
        .crud-tabs {
            margin: 10px;
            padding: 0.5rem 1rem;
        }
        
        .tab-item {
            padding: 0.45rem 0.9rem;
            font-size: 0.8rem;
            gap: 4px;
        }
        
        .tab-item i {
            font-size: 0.9rem;
        }
        
        .quick-action-btn {
            padding: 0.45rem 1rem;
            font-size: 0.8rem;
            margin-left: 0.5rem;
        }
        
        .badge.header-badge, .badge_alarms {
            font-size: 0.6rem;
            padding: 0.15rem 0.35rem;
        }
    }

    @media (max-width: 480px) {
        .crud-tabs {
            margin: 5px;
            padding: 0.5rem;
        }
        
        .tab-item {
            padding: 0.4rem 0.8rem;
            font-size: 0.75rem;
        }
        
        .tab-item i {
            font-size: 0.8rem;
        }
        
        .tab-item span:not(.badge) {
            display: none; /* Hide text on very small screens, show only icons */
        }
        
        .tab-item i + span.badge {
            display: inline-block; /* Keep badges visible */
        }
        
        .quick-action-btn span {
            display: none; /* Hide quick action text on mobile */
        }
        
        .quick-action-btn {
            padding: 0.4rem 0.8rem;
        }
        
        .quick-action-btn i {
            margin: 0;
        }
    }

    /* Optional: Hide text on tablet if needed */
    @media (max-width: 640px) and (min-width: 481px) {
        .tab-item span:not(.badge) {
            font-size: 0.7rem;
        }
    }

    /* Loading State */
    body.refreshing {
        opacity: 0.7;
        pointer-events: none;
    }

    /* Click Animation */
    .tab-item.clicked {
        transform: scale(0.95);
    }

    /* Active Tab Indicator */
    .tab-item.active::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 3px;
        background: white;
        border-radius: 3px;
        animation: slideIn 0.3s ease;
    }

    @keyframes slideIn {
        from { width: 0; opacity: 0; }
        to { width: 20px; opacity: 1; }
    }
</style>
`;

// Inject styles
$('head').append(styleInjection);

/* ================= MODERN HORIZONTAL NAVBAR ================= */
var crud_section_view = `
<div class="crud-tabs">
    <div class="tabs-left">
        <!-- Dashboard -->
        <div class="tab-item active" onclick="switchCrudTab(event, 'dasboard')">
            <i class="fas fa-home"></i>
            <span>Home</span>
        </div>

        <!-- Monitoring -->
        <div class="tab-item" onclick="switchCrudTab(event, 'position')">
            <i class="fas fa-map-marker-alt"></i>
            <span>Monitoring</span>
        </div>

      
        <!-- Devices -->
        <div class="tab-item" onclick="switchCrudTab(event, 'devices')">
            <i class="fas fa-microchip"></i>
            <span>Devices</span>
        </div>

         <!-- Geofence -->
        <div class="tab-item" onclick="switchCrudTab(event, 'geofence')">
            <i class="fas fa-draw-polygon"></i>
            <span>Geofence</span>
        </div>

        <!-- Notifications -->
        <div class="tab-item" onclick="switchCrudTab(event, 'alerts')">
            <i class="fas fa-bell"></i>
            <span>Alerts</span>
            <span class="badge badge-danger badge_alerts">3</span>
        </div>

         <!-- Notifications -->
        <div class="tab-item" onclick="switchCrudTab(event, 'allalarms')">
            <i class="fas fa-bell"></i>
            <span>Alarm</span>
            <span class="badge badge-danger badge_alarms">3</span>
        </div>

        <!-- Stations -->
        <div class="tab-item" onclick="switchCrudTab(event, 'stations')">
            <i class="fas fa-building"></i>
            <span>Stations</span>
        </div>

        <!-- Hotspots -->
        <div class="tab-item" onclick="switchCrudTab(event, 'hotspots')">
            <i class="fas fa-fire"></i>
            <span>Hotspots</span>
        </div>

        <!-- Routes -->
        <div class="tab-item" onclick="switchCrudTab(event, 'routes')">
            <i class="fas fa-route"></i>
            <span>Routes</span>
        </div>

        <!-- Commands -->
        <div class="tab-item" onclick="switchCrudTab(event, 'commands')">
            <i class="fas fa-terminal"></i>
            <span>Commands</span>
        </div>

       

        <!-- Quick Action Button -->
        <div class="quick-action-btn" onclick="createNewRecord()">
            <i class="fas fa-plus"></i>
            <span>New</span>
        </div>
    </div>
</div>

<!-- Tab Content Containers -->
<div id="tab_dasboard" class="crud-tab-content tab_dasboard"></div>
<div id="tab_position" class="crud-tab-content tab_position"></div>
<div id="tab_allalarms" class="crud-tab-content tab_allalarms"></div>
<div id="tab_alerts" class="crud-tab-content tab_alerts"></div>
<div id="tab_replay" class="crud-tab-content" style="display:none;"></div>
<div id="tab_devices" class="crud-tab-content tab_devices" style="display:none;"></div>
<div id="tab_commands" class="crud-tab-content tab_commands" style="display:none;"></div>
<div id="tab_scheduled" class="crud-tab-content" style="display:none;"></div>
<div id="tab_geofence" class="crud-tab-content tab_geofences" style="display:none;"></div>
<div id="tab_reports" class="crud-tab-content" style="display:none;"></div>
<div id="tab_stations" class="crud-tab-content tab_stations" style="display:none;"></div>
<div id="tab_hotspots" class="crud-tab-content tab_hotspots" style="display:none;"></div>
<div id="tab_routes" class="crud-tab-content tab_routes" style="display:none;"></div>
`;

$(".crud_section_header").html(crud_section_view);





        // <div class="tab-item" onclick="switchCrudTab(event, 'replay')">
        //     <i class="fas fa-history"></i>
        //     <span>Replay</span>
        // </div>



        // <div class="tab-item" onclick="switchCrudTab(event, 'scheduled')">
        //     <i class="fas fa-calendar-alt"></i>
        //     <span>Scheduled</span>
        // </div>

       

        // <div class="tab-item" onclick="switchCrudTab(event, 'reports')">
        //     <i class="fas fa-chart-bar"></i>
        //     <span>Reports</span>
        // </div>

// Initialize dashboard
dashboad();

/* ================= ENHANCED TAB SWITCH ================= */
function switchCrudTab(e, tab) {
    // Add click animation
    const target = $(e.currentTarget);
    target.addClass('clicked');
    setTimeout(() => target.removeClass('clicked'), 200);

    // Update active state
    $(".tab-item").removeClass("active");
    target.addClass("active");

    // Load content based on tab
    if(tab == "position"){
        homePage();
    } else if(tab == "dasboard"){
        dashboad();
    } else if(tab == "stations"){
        allStations();
    } else if(tab == "hotspots"){
        allHotspots();
    } else if(tab == "routes"){
        allRoutes();
    } else if(tab == "devices"){
        allDevices();
    } else if(tab == "alerts"){
        alerts();
    } else if(tab == "geofence"){
        allGeofences();
    } else if(tab == "commands"){
        allcommandsSet();
    } else if(tab == "allalarms"){
        loadAllAlarms();
    } 

    

    
    
    
    else {
        // For tabs without dedicated functions, show placeholder
        $(".crud-tab-content").hide();
        $("#tab_" + tab).show();
    }

    // Hide all and show selected with fade
    $(".crud-tab-content").hide();
    $("#tab_" + tab).fadeIn(300);
}

/* ================= ADD NEW RECORD MODAL ================= */
function createNewRecord() {
    // Using SweetAlert2 for modern modals
    if (typeof Swal !== 'undefined') {
        Swal.fire({
            title: 'Create New Record',
            html: `
                <div style="text-align: left;">
                    <label style="color: #fff; display: block; margin-bottom: 5px;">Type</label>
                    <select id="recordType" class="swal2-select" style="width: 100%; margin-bottom: 15px;">
                        <option value="device">Device</option>
                        <option value="station">Station</option>
                        <option value="hotspot">Hotspot</option>
                        <option value="route">Route</option>
                        <option value="geofence">Geofence</option>
                    </select>
                    
                    <label style="color: #fff; display: block; margin-bottom: 5px;">Name</label>
                    <input id="recordName" class="swal2-input" placeholder="Enter name" style="width: 100%; margin-bottom: 15px;">
                    
                    <label style="color: #fff; display: block; margin-bottom: 5px;">Description</label>
                    <textarea id="recordDesc" class="swal2-textarea" placeholder="Enter description" style="width: 100%;"></textarea>
                </div>
            `,
            showCancelButton: true,
            confirmButtonText: 'Create',
            confirmButtonColor: '#4361ee',
            cancelButtonColor: '#ef476f',
            background: '#0f172a',
            color: '#fff',
            preConfirm: () => {
                const type = document.getElementById('recordType').value;
                const name = document.getElementById('recordName').value;
                const desc = document.getElementById('recordDesc').value;
                
                if (!name) {
                    Swal.showValidationMessage('Please enter a name');
                    return false;
                }
                
                return { type, name, desc };
            }
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: 'Success!',
                    text: `${result.value.type} "${result.value.name}" created successfully`,
                    icon: 'success',
                    confirmButtonColor: '#06d6a0',
                    background: '#0f172a',
                    color: '#fff',
                    timer: 2000,
                    timerProgressBar: true
                });
            }
        });
    } else {
        alert("Add New clicked 🚀");
    }
}

/* ================= REFRESH PAGE ================= */
function refreshpage(){
    // Add refresh animation
    $('body').addClass('refreshing');
    
    // Reload current tab
    const activeTab = $('.tab-item.active').text().trim().toLowerCase();
    
    setTimeout(() => {
        $('body').removeClass('refreshing');
        window.location.reload();
    }, 500);
}

/* ================= UPDATE NOTIFICATION BADGE ================= */
function updateNotificationBadge(count) {
    $('.badge.header-badge').text(count);
    if (count > 0) {
        $('.tab-item[onclick*="alarms"]').addClass('has-notifications');
    } else {
        $('.tab-item[onclick*="alarms"]').removeClass('has-notifications');
    }
}

// Example: Update badge with actual count
// updateNotificationBadge(5);