@extends('superadmin.sidebar')

@section('content')

<main>
    @if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @endif

    @if($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <div class="container1">
        <!-- Left Section (Centers Cards) -->
        <div class="left-section">
            <!-- Search Bar -->
            <input type="text" id="searchInput" class="form-control" placeholder="🔍 Search by center name, lab or route..." onkeyup="filterCards()">
            
            <!-- Filter Bar -->
            <div class="filter-bar">
                <select id="labFilter" class="filter-select" onchange="applyFilters()">
                    <option value="">All Labs</option>
                    @foreach($labs as $lab)
                        <option value="{{ $lab->lid }}">{{ $lab->name }}</option>
                    @endforeach
                </select>
                
                <select id="routeFilter" class="filter-select" onchange="applyFilters()">
                    <option value="">All Routes</option>
                    @foreach($routes as $route)
                        <option value="{{ $route->rid }}">{{ $route->routename }}</option>
                    @endforeach
                </select>
                
                <button class="btn-reset-filter" onclick="resetFilters()">Reset Filters</button>
            </div>
            
            <!-- Stats -->
            <div class="stats-container">
                <div class="stat-box">
                    <span class="stat-number" id="totalCenters">0</span>
                    <span class="stat-label">Total Centers</span>
                </div>
                <div class="stat-box">
                    <span class="stat-number" id="mappedCenters">0</span>
                    <span class="stat-label">Mapped Centers</span>
                </div>
            </div>

            <div id="centersList">
                <div class="loading-container">
                    <div class="spinner"></div>
                    <p>Loading centers...</p>
                </div>
            </div>
        </div>

        <!-- Right Section (Map) -->
        <div class="right-section1">
            <div class="map-header">
                <h3><i class='bx bx-map-alt'></i> Center Locations Map</h3>
                <p>Click on any marker or center card to view location</p>
            </div>
            <div id="map" class="map-container"></div>
            <div class="map-footer">
                <small>📍 <span id="selectedCenterName">Select a center</span></small>
            </div>
        </div>
    </div>
</main>

<!-- Center Details Modal -->
<div id="centerModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modalTitle">Center Details</h3>
            <span class="modal-close" onclick="closeModal()">&times;</span>
        </div>
        <div class="modal-body" id="modalContent">
        </div>
        <div class="modal-footer">
            <button class="btn-secondary" onclick="closeModal()">Close</button>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBtrib-K89VKyLSpwXsN0in_TM-TFUIhJg&callback=initMap" async defer></script>

<script>
// Global variables
let map;
let markers = [];
let infoWindow;
let allCenters = [];
let currentInfoWindow = null;

// Sri Lanka center coordinates
const sriLankaCenter = { lat: 6.6908464, lng: 80.3894895 };

// Initialize map
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: sriLankaCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [
            { featureType: "poi", elementType: "labels", stylers: [{ visibility: "off" }] },
            { featureType: "transit", elementType: "labels", stylers: [{ visibility: "off" }] }
        ]
    });
    
    infoWindow = new google.maps.InfoWindow();
    
    // Load centers from server
    loadCentersFromServer();
    
    // Close info window when clicking on map
    map.addListener('click', function() {
        if (currentInfoWindow) {
            currentInfoWindow.close();
            currentInfoWindow = null;
        }
    });
}

// Load centers via AJAX
function loadCentersFromServer() {
    const lid = $('#labFilter').val();
    const rid = $('#routeFilter').val();
    const searchTerm = $('#searchInput').val();
    
    $('#centersList').html('<div class="loading-container"><div class="spinner"></div><p>Loading centers...</p></div>');
    
    $.ajax({
        url: '/get-centers',
        type: 'GET',
        data: { lid: lid, rid: rid },
        success: function(response) {
            if (response.success) {
                allCenters = response.centers;
                
                // Apply search filter if exists
                if (searchTerm && searchTerm.trim() !== '') {
                    allCenters = allCenters.filter(center => 
                        center.centername.toLowerCase().includes(searchTerm.toLowerCase()) ||
                        (center.labname && center.labname.toLowerCase().includes(searchTerm.toLowerCase())) ||
                        (center.routename && center.routename.toLowerCase().includes(searchTerm.toLowerCase()))
                    );
                }
                
                renderCenterCards(allCenters);
                updateStats(allCenters);
                updateMapMarkers(allCenters);
            } else {
                $('#centersList').html('<div class="error-message">Error loading centers. Please refresh the page.</div>');
            }
        },
        error: function() {
            $('#centersList').html('<div class="error-message">Error loading centers. Please refresh the page.</div>');
        }
    });
}

// Render center cards
function renderCenterCards(centers) {
    if (!centers || centers.length === 0) {
        $('#centersList').html('<div class="no-results">No centers found</div>');
        $('#listStats').text('No centers available');
        return;
    }
    
    let cardsHtml = '';
    centers.forEach(center => {
        const hasCoordinates = center.latitude && center.longitude && center.latitude != '0' && center.longitude != '0';
        cardsHtml += `
            <div class="card" data-cid="${center.cid}" data-lab="${center.lid || ''}" data-route="${center.rid || ''}">
                <div class="card-content">
                    <h3 class="text"><i class='bx bxs-building'></i> ${escapeHtml(center.centername)}</h3>
                    <p><strong>📍 Location:</strong> 
                        ${hasCoordinates ? 
                            `${center.latitude}, ${center.longitude}` : 
                            '<span class="text-muted">No coordinates available</span>'}
                    </p>
                    <p><strong>🏢 Lab:</strong> ${escapeHtml(center.labname)}</p>
                    <p><strong>🛣️ Route:</strong> ${escapeHtml(center.routename)}</p>
                    <p><strong>👤 Authorized Person:</strong> ${escapeHtml(center.authorizedperson)}</p>
                    <p><strong>📞 Contact:</strong> ${escapeHtml(center.authorizedcontact)}</p>
                </div>
                <div class="icon">
                    <div class="view-icon" title="View on Map" onclick="viewOnMap(this)" 
                         data-cid="${center.cid}" 
                         data-lat="${center.latitude || ''}" 
                         data-lng="${center.longitude || ''}" 
                         data-name="${escapeHtml(center.centername)}">
                        <i class='bx bx-map'></i>
                    </div>
                    <div class="details-icon" title="View Details" onclick="viewDetails(this)" data-cid="${center.cid}">
                        <i class='bx bx-info-circle'></i>
                    </div>
                </div>
            </div>
        `;
    });
    
    $('#centersList').html(cardsHtml);
}

// Update statistics
function updateStats(centers) {
    const total = centers.length;
    const mapped = centers.filter(c => c.latitude && c.longitude && c.latitude != '0' && c.longitude != '0').length;
    $('#totalCenters').text(total);
    $('#mappedCenters').text(mapped);
}

// Update map markers
function updateMapMarkers(centers) {
    // Clear existing markers
    markers.forEach(marker => marker.setMap(null));
    markers = [];
    
    let bounds = new google.maps.LatLngBounds();
    let hasValidMarkers = false;
    
    centers.forEach(center => {
        if (center.latitude && center.longitude && center.latitude != '0' && center.longitude != '0') {
            const position = {
                lat: parseFloat(center.latitude),
                lng: parseFloat(center.longitude)
            };
            
            const marker = new google.maps.Marker({
                position: position,
                map: map,
                title: center.centername,
                animation: google.maps.Animation.DROP,
                icon: {
                    url: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
                    scaledSize: new google.maps.Size(32, 32)
                }
            });
            
            marker.addListener('click', () => {
                if (currentInfoWindow) {
                    currentInfoWindow.close();
                }
                
                const content = `
                    <div class="info-window">
                        <h4>${escapeHtml(center.centername)}</h4>
                        <p><strong>🏢 Lab:</strong> ${escapeHtml(center.labname)}</p>
                        <p><strong>🛣️ Route:</strong> ${escapeHtml(center.routename)}</p>
                        <p><strong>👤 Person:</strong> ${escapeHtml(center.authorizedperson)}</p>
                        <p><strong>📞 Contact:</strong> ${escapeHtml(center.authorizedcontact)}</p>
                        <button class="btn-info" onclick="showCenterDetails(${center.cid})">
                            View Full Details
                        </button>
                    </div>
                `;
                
                infoWindow.setContent(content);
                infoWindow.open(map, marker);
                currentInfoWindow = infoWindow;
                
                // Highlight card
                $('.card').removeClass('active');
                $(`.card[data-cid="${center.cid}"]`).addClass('active');
                
                $('#selectedCenterName').html(`📍 <strong>${escapeHtml(center.centername)}</strong>`);
            });
            
            marker.centerData = center;
            markers.push(marker);
            bounds.extend(position);
            hasValidMarkers = true;
        }
    });
    
    // Only fit bounds if there are valid markers, otherwise center on Sri Lanka
    if (hasValidMarkers && markers.length > 0) {
        map.fitBounds(bounds);
        // If only one marker, set a reasonable zoom level
        if (markers.length === 1) {
            map.setZoom(14);
        }
    } else {
        // No markers with coordinates, center on Sri Lanka
        map.setCenter(sriLankaCenter);
        map.setZoom(8);
        $('#selectedCenterName').html('No coordinates available for filtered centers');
    }
}

// Apply filters
function applyFilters() {
    const lid = $('#labFilter').val();
    const rid = $('#routeFilter').val();
    const searchTerm = $('#searchInput').val().toLowerCase();
    
    $.ajax({
        url: '/get-centers',
        type: 'GET',
        data: { lid: lid, rid: rid },
        success: function(response) {
            if (response.success) {
                let filteredCenters = response.centers;
                
                // Apply search filter
                if (searchTerm && searchTerm.trim() !== '') {
                    filteredCenters = filteredCenters.filter(center => 
                        center.centername.toLowerCase().includes(searchTerm) ||
                        (center.labname && center.labname.toLowerCase().includes(searchTerm)) ||
                        (center.routename && center.routename.toLowerCase().includes(searchTerm))
                    );
                }
                
                allCenters = filteredCenters;
                renderCenterCards(allCenters);
                updateStats(allCenters);
                updateMapMarkers(allCenters);
            }
        }
    });
}

// Filter cards (for search)
function filterCards() {
    applyFilters();
}

// Reset filters
function resetFilters() {
    $('#labFilter').val('');
    $('#routeFilter').val('');
    $('#searchInput').val('');
    applyFilters();
}

// View on map
function viewOnMap(element) {
    const lat = $(element).attr('data-lat');
    const lng = $(element).attr('data-lng');
    const name = $(element).attr('data-name');
    
    if (lat && lng && lat !== '0' && lng !== '0') {
        const position = { lat: parseFloat(lat), lng: parseFloat(lng) };
        map.setCenter(position);
        map.setZoom(17);
        
        // Find and trigger marker click
        const marker = markers.find(m => m.centerData?.cid == $(element).attr('data-cid'));
        if (marker) {
            google.maps.event.trigger(marker, 'click');
        }
        
        $('#selectedCenterName').html(`📍 <strong>${escapeHtml(name)}</strong>`);
        
        // Highlight card
        $('.card').removeClass('active');
        $(element).closest('.card').addClass('active');
    } else {
        alert('No coordinates available for this center');
    }
}

// View details
function viewDetails(element) {
    const cid = $(element).attr('data-cid');
    showCenterDetails(cid);
}

// Show center details modal
function showCenterDetails(cid) {
    $.ajax({
        url: `/get-center-details/${cid}`,
        type: 'GET',
        success: function(response) {
            if (response.success) {
                const center = response.center;
                const modalContent = `
                    <div class="detail-row">
                        <span class="detail-label">Center Name:</span>
                        <span class="detail-value"><strong>${escapeHtml(center.centername)}</strong></span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Authorized Person:</span>
                        <span class="detail-value">${escapeHtml(center.authorizedperson)}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Authorized Contact:</span>
                        <span class="detail-value">${escapeHtml(center.authorizedcontact)}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Selected Contact:</span>
                        <span class="detail-value">${escapeHtml(center.selectedcontact) || 'N/A'}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Third Party Contact:</span>
                        <span class="detail-value">${escapeHtml(center.thirdpartycontact) || 'N/A'}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Description:</span>
                        <span class="detail-value">${escapeHtml(center.description) || 'N/A'}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Location:</span>
                        <span class="detail-value">${center.latitude && center.latitude != '0' ? center.latitude + ', ' + center.longitude : 'No coordinates'}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Lab:</span>
                        <span class="detail-value">${escapeHtml(center.labname)}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Route:</span>
                        <span class="detail-value">${escapeHtml(center.routename)}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Created:</span>
                        <span class="detail-value">${new Date(center.created_at).toLocaleString()}</span>
                    </div>
                `;
                $('#modalContent').html(modalContent);
                $('#modalTitle').html(center.centername);
                $('#centerModal').css('display', 'flex');
            }
        },
        error: function() {
            alert('Error loading center details');
        }
    });
}

// Close modal
function closeModal() {
    $('#centerModal').css('display', 'none');
}

// Escape HTML to prevent XSS
function escapeHtml(text) {
    if (!text) return '';
    const map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#39;'
    };
    return String(text).replace(/[&<>"']/g, m => map[m]);
}

// Dynamic route filtering based on lab selection
$('#labFilter').on('change', function() {
    const lid = $(this).val();
    if (lid) {
        $.ajax({
            url: `/get-routes-by-lab/${lid}`,
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    let routeSelect = $('#routeFilter');
                    routeSelect.empty();
                    routeSelect.append('<option value="">All Routes</option>');
                    response.routes.forEach(route => {
                        routeSelect.append(`<option value="${route.rid}">${escapeHtml(route.routename)}</option>`);
                    });
                }
            }
        });
    } else {
        // Reset route filter to show all routes
        let routeSelect = $('#routeFilter');
        routeSelect.empty();
        routeSelect.append('<option value="">All Routes</option>');
        @foreach($routes as $route)
        routeSelect.append(`<option value="{{ $route->rid }}">{{ $route->routename }}</option>`);
        @endforeach
    }
});

// Make functions global
window.initMap = initMap;
window.applyFilters = applyFilters;
window.filterCards = filterCards;
window.resetFilters = resetFilters;
window.viewOnMap = viewOnMap;
window.viewDetails = viewDetails;
window.showCenterDetails = showCenterDetails;
window.closeModal = closeModal;
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* Main Container */
.container1 {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    padding: 1.8rem;
}

/* Left Section */
.left-section {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-right: 5px;
}

.left-section::-webkit-scrollbar {
    width: 5px;
}

.left-section::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.left-section::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 5px;
}

/* Search Bar */
#searchInput {
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 12px 20px;
    font-size: 0.9rem;
    width: 100%;
    transition: all 0.3s ease;
    background-color: var(--color-white);
    color: var(--color-dark);
}

#searchInput:focus {
    border-color: #628ECB;
    outline: none;
    box-shadow: 0 0 0 3px rgba(98, 142, 203, 0.1);
}

/* Filter Bar */
.filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-select {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 50px;
    background-color: var(--color-white);
    color: var(--color-dark);
    cursor: pointer;
    font-size: 0.85rem;
}

.filter-select:focus {
    outline: none;
    border-color: #628ECB;
}

.btn-reset-filter {
    padding: 10px 20px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.3s;
}

.btn-reset-filter:hover {
    background: #5a6268;
}

/* Stats Container */
.stats-container {
    display: flex;
    gap: 15px;
    background: var(--color-white);
    padding: 15px;
    border-radius: 12px;
    box-shadow: var(--box-shadow);
}

.stat-box {
    flex: 1;
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #628ECB;
}

.stat-label {
    display: block;
    font-size: 12px;
    color: var(--color-dark);
    opacity: 0.7;
}

/* Loading Container */
.loading-container {
    text-align: center;
    padding: 40px;
    background: var(--color-white);
    border-radius: 12px;
}

.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #628ECB;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Cards */
.card {
    position: relative;
    background-color: var(--color-white);
    padding: 1.2rem;
    border-radius: 12px;
    box-shadow: var(--box-shadow);
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 1rem;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.card.active {
    border-left: 4px solid #628ECB;
    background: rgba(98, 142, 203, 0.05);
}

.card-content p {
    margin: 6px 0;
    font-size: 13px;
    color: var(--color-dark);
}

.card-content .text {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--color-dark);
}

.card-content .text i {
    margin-right: 8px;
    color: #628ECB;
}

.text-muted {
    color: #999;
    font-style: italic;
}

.no-results, .error-message {
    text-align: center;
    padding: 40px;
    background: var(--color-white);
    border-radius: 12px;
    color: #999;
}

.error-message {
    color: #dc3545;
}

/* Icons */
.icon {
    position: absolute;
    top: 12px;
    right: 12px;
    display: none;
    gap: 8px;
}

.card:hover .icon {
    display: flex;
}

.icon div {
    background: rgba(98, 142, 203, 0.1);
    padding: 6px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.icon div:hover {
    background: #628ECB;
    transform: scale(1.1);
}

.icon div:hover i {
    color: white;
}

.icon i {
    font-size: 16px;
    color: #628ECB;
}

/* Right Section - Map */
.right-section1 {
    background-color: var(--color-white);
    padding: 1.2rem;
    border-radius: 12px;
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.map-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--color-dark);
}

.map-header h3 i {
    color: #628ECB;
    margin-right: 8px;
}

.map-header p {
    margin: 5px 0 0;
    font-size: 12px;
    color: var(--color-dark);
    opacity: 0.7;
}

.map-container {
    height: 500px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.map-footer {
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
}

/* Info Window */
.info-window {
    padding: 5px;
    max-width: 250px;
}

.info-window h4 {
    margin: 0 0 8px;
    color: #333;
    font-size: 14px;
}

.info-window p {
    margin: 5px 0;
    font-size: 12px;
}

.btn-info {
    margin-top: 8px;
    padding: 5px 12px;
    background: #628ECB;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 11px;
    width: 100%;
}

.btn-info:hover {
    background: #4a7bb5;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: var(--color-white);
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 80%;
    overflow: hidden;
}

.modal-header {
    padding: 15px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.modal-close {
    font-size: 24px;
    cursor: pointer;
    color: #999;
    transition: color 0.2s;
}

.modal-close:hover {
    color: #333;
}

.modal-body {
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #e0e0e0;
    text-align: right;
}

.btn-secondary {
    padding: 8px 20px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

.btn-secondary:hover {
    background: #5a6268;
}

.detail-row {
    margin-bottom: 12px;
    line-height: 1.5;
}

.detail-label {
    font-weight: 600;
    color: #555;
    min-width: 140px;
    display: inline-block;
}

.detail-value {
    color: #333;
}

/* Alerts */
.alert {
    padding: 15px;
    margin: 20px;
    border-radius: 8px;
    font-size: 14px;
    position: relative;
}

.alert-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.alert ul {
    margin: 0;
    padding-left: 20px;
}

/* Responsive */
@media (max-width: 1200px) {
    .container1 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .map-container {
        height: 400px;
    }
    
    .left-section {
        max-height: none;
    }
}

@media (max-width: 768px) {
    .container1 {
        padding: 1rem;
    }
    
    .filter-bar {
        flex-direction: column;
    }
    
    .filter-select, .btn-reset-filter {
        width: 100%;
    }
    
    .stats-container {
        flex-direction: column;
        gap: 10px;
    }
    
    .stat-box {
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .map-container {
        height: 350px;
    }
    
    .detail-label {
        display: block;
        margin-bottom: 4px;
    }
}

@media (max-width: 480px) {
    .card-content p {
        font-size: 12px;
    }
    
    .map-container {
        height: 280px;
    }
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

#roleError {
    color: red;
    font-size: 12px;
    margin-top: 5px;
}

.message {
    text-align: right;
    padding-right: 10px;
}

.content {
    margin-left: 90px;
}

.alert {
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    opacity: 0.95;
    transition: opacity 0.3s ease-in-out;
}

.alert-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.alert ul {
    margin: 0;
    padding-left: 20px;
}

.alert ul li {
    list-style-type: disc;
}

/* Optional close button styles */
.alert::after {
    content: "×";
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 20px;
    color: inherit;
}

.alert:hover {
    opacity: 1;
}

.alert-success:hover {
    border-color: #98c68a;
    background-color: #c3e6cb;
}

.alert-danger:hover {
    border-color: #f1a2a5;
    background-color: #f5c6cb;
}

.www {
    padding-left: 100px;
    display: inline-flex;
    gap: 10px;
}

.text {
    font-weight: 600;
    font-size: 14px;
}

.danger {
    color: var(--color-danger);
}

.success {
    color: var(--color-success);
}

.container {
    display: grid;
    width: 96%;
    margin: 0 auto;
    gap: 1.8rem;
    grid-template-columns: 16rem auto 6rem;
}

/*-------------------------Form Css-------------------------------*/

form {
    display: flex;
    flex-direction: column;
}

/* Input Field Styling */
input[type="text"],
input[type="password"],
input[type="email"] {
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 12px 20px;
    font-size: 1rem;
    margin-bottom: 15px;
    width: 100%;
    transition: border 0.3s ease;
    background-color: var(--color-white);
    color: var(--color-dark);
}

input:focus {
    border-color: #9BC1FF;
    outline: none;
}

/* Button Styling */
button {
    padding: 12px 25px;
    border: none;
    border-radius: 50px;
    background-color: #628ECB;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #365485;
}

button:active {
    background-color: #628ECB;
}

/* Centering Button for Mobile View */
.text-center {
    text-align: center;
    margin-bottom: 20px;
}

.form-group input[type="file"] {
    width: 100%;
    max-width: 400px;
    padding: 10px;
    font-size: 14px;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 25px;
    cursor: pointer;
    transition: border-color 0.3s ease;
    background-color: var(--color-background);

}

.form-group input[type="file"]:hover {
    border-color: #628ECB;
    /* Green border on hover */
}

.form-group input[type="file"]::-webkit-file-upload-button {
    padding: 8px 16px;
    color: #fff;
    background-color: #8AAEE0;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.form-group input[type="file"]::-webkit-file-upload-button:hover {
    background-color: #628ECB;
}

.row {
    display: inline-flex;
    gap: 0.8em;
}

/* ------------------------------------Active Inactive----------------------------------------- */

.checks {
    display: none;
}

.check {
    position: relative;
    color: #9BC1FF;
    font-family: "Poppins", sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.8em;
    border: 3px solid #9BC1FF;
    padding: 0.5em 2em;
    border-radius: 0.5em;
}

.check:before {
    content: "";
    height: 0.5em;
    width: 0.5em;
    border: 3px solid #9BC1FF;
    border-radius: 50%;
}

.checks:checked+label.check:before {
    height: 0.1em;
    width: 0.2em;
    border: 0.65em solid #ffffff;
    background-color: #9BC1FF;
}

.checks:checked+label.check {
    background-color: #9BC1FF;
    color: #ffffff;
}

/* ----------------------------------- Radio Button for role -------------------------  */
.radio {
    display: inline-flex;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}

.radio__input {
    display: none;
}

.radio__label {
    padding: 8px 14px;
    font-size: 12px;
    /* font-family:sans-serif; */
    color: #fff;
    background: #8AAEE0;
    cursor: pointer;
    transition: background 0.1s;
}

.radio__label:not(:last-of-type) {
    border-right: 3px solid #B1C9EF;
}

.radio__input:checked+.radio__label {
    background: #628ECB;
}

/* ----------------------end role--------------------------- */

/* Main Container */
.container1 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    /* 1fr for cards, 2fr for form */
    gap: 2rem;
    padding: 1.8rem;
}

/* Right Section (Form) */
.right-section1 {
    background-color: var(--color-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    gap: 1rem;
}

/* Left Section (Cards) */
.left-section {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.left-section {
    max-height: 750px;
    /* Set a fixed height for the left section */
    overflow-y: auto;
    /* Enable vertical scrolling */
    padding-right: 5px;
    padding-left: 5px;
    /* Add some padding to avoid hiding content behind the scrollbar */
}

.left-section::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar in Chrome, Safari, and Edge */
}


/* Fixed positioning for the search bar */
.left-section #searchInput {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px;
    margin-bottom: 10px;

}

/* Card Style */
.card {

    position: relative;
    background-color: var(--color-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: none;
}

i {
    font-size: 17px;
    color: #628ECB;
}

/* Styling for the edit icon */
.icon {
    /* position: relative; */
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
    /* Hidden by default */
    font-size: 18px;
    color: #007bff;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.card:hover .icon {
    display: block;
    /* Show when hovering over the card */
    transform: scale(1.2);
    opacity: 1;
}

.icon:hover {
    color: #0056b3;
}

@media (min-width: 1200px) and (max-width: 1587px) {
    .container1 {
        display: grid;
        /* padding: 0 var(--padding-1); */
        /* width: 100%; */
        grid-template-columns: 1.5fr 2.5fr;
        /* 1fr for cards, 2fr for form */
        gap: 2rem;
        padding: 1.8rem;
    }

    main {
        /* margin-top: 8rem; */
        padding: 0 1rem;
    }

    .card {

        position: relative;
        background-color: var(--color-white);
        padding: var(--card-padding);
        border-radius: var(--card-border-radius);
        box-shadow: var(--box-shadow);
        transition: all 0.3s ease;
    }

    .www {
        padding-left: 5px;
        /* Corrected the typo: removed the extra "/" */
        display: inline-flex;
        /* Keeps the flex layout but with inline behavior */
        gap: 10px;
        /* Space between items */
        flex-wrap: wrap;
    }

    .row {
        padding-left: 5px;
        /* Corrected the typo: removed the extra "/" */
        display: inline-flex;
        /* Keeps the flex layout but with inline behavior */
        gap: 10px;
        /* Space between items */
        flex-wrap: wrap;
    }

}

@media (min-width: 1058px) and (max-width: 1200px) {
    .container1 {
        display: grid;
        /* padding: 0 var(--padding-1); */
        /* width: 100%; */
        grid-template-columns: 1.5fr 2.5fr;
        /* 1fr for cards, 2fr for form */
        gap: 2rem;
        padding: 1.8rem;
    }

}

/* @media (min-width: 1200px) and (max-width: 1587px) {
    
} */

/* New media queries */
@media screen and (max-width: 1200px)

/* @media (min-width: 1248px) and (max-width: 1587px) */
    {
    /* aside .logo {
        margin-left: 1rem;
    }

    aside .logo h2 {
        display: inline;
    }

    aside .sidebar h3 {
        display: inline;
    }

    aside .sidebar a {
        width: 100%;
        height: 3.4rem;
    }

    aside .sidebar a:last-child {
        position: absolute;
        bottom: 5rem;
    }

    aside .toggle .close {
        display: inline-block;
        cursor: pointer;
    } */
    /* .container1 {
        width: 100%;
        grid-template-columns: 1fr;
        padding: 0 var(--padding-1);
    } */

    .container1 {
        /* display: grid;
        grid-template-columns: 1fr 2fr;
        /* 1fr for cards, 2fr for form */
        /* gap: 2rem;
        padding: 1.8rem; */
    }


    /* Right Section (Form) */
    .right-section1 {
        background-color: var(--color-white);
        padding: var(--card-padding);
        border-radius: var(--card-border-radius);
        box-shadow: var(--box-shadow);
        display: flex;
        flex-direction: column;
        /* align-items: flex-start; */
        gap: 1rem;
    }

    /* Left Section (Cards) */


    /* Card Style */
    .card {

        position: relative;
        background-color: var(--color-white);
        padding: var(--card-padding);
        border-radius: var(--card-border-radius);
        box-shadow: var(--box-shadow);
        transition: all 0.3s ease;
    }

    .card:hover {
        box-shadow: none;
    }

    i {
        font-size: 17px;
        color: #628ECB;
    }

    @keyframes showMenu {
        to {
            left: 0;
        }
    }

    main {
        margin-top: 8rem;
        padding: 0 1rem;
    }

    .right-section1 {
        width: 94%;
        margin: 0 auto 4rem;
    }

    .right-section .nav {
        position: fixed;
        top: 0;
        left: 0;
        align-items: center;
        background-color: var(--color-white);
        padding: 0 var(--padding-1);
        height: 4.6rem;
        width: 100%;
        z-index: 2;
        box-shadow: 0 1rem 1rem var(--color-light);
        margin: 0;
    }

    .right-section .nav .dark-mode {
        width: 4.4rem;
        position: absolute;
        left: 66%;
    }

    .right-section .profile .info {
        display: none;
    }

    .right-section .nav button {
        display: inline-block;
        background-color: transparent;
        cursor: pointer;
        color: var(--color-dark);
        position: absolute;
        left: 1rem;
    }

    .right-section .nav button span {
        font-size: 2rem;
    }

    .www {
        padding-left: 100px;
        display: inline-flex;
        gap: 10px;
    }

}

@media screen and (max-width: 1200px) {
    /* .container1 {
        width: 95%;
        grid-template-columns: 7rem auto 23rem;
        width: 100%;
        grid-template-columns: 1fr;
        padding: 0 var(--padding-1);
    } */

    main .container1 {
        grid-template-columns: 1fr;
        gap: 25px;
        position: absolute;
        left: 5%;
        /* transform: t */
        /* width: 65%; */
        /* grid-template-columns: 7rem auto 23rem; */
    }

    main .new-users .user-list .user {
        flex-basis: 40%;
    }

    main .container1 {
        width: 94%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 2rem 0 0 0.8rem;
    }

    main .right-section1 form {
        width: 80vw;
    }

    main table thead tr th:last-child,
    main table thead tr th:first-child {
        display: none;
    }

    main table tbody tr td:last-child,
    main table tbody tr td:first-child {
        display: none;
    }

}

@media screen and (max-width: 1200px) {
    /* .container1 {
        width: 100%;
        grid-template-columns: 1fr;
        padding: 0 var(--padding-1);
    } */

    aside {
        position: fixed;
        background-color: var(--color-white);
        width: 15rem;
        z-index: 3;
        box-shadow: 1rem 3rem 4rem var(--color-light);
        height: 100vh;
        left: -100%;
        display: none;
        animation: showMenu 0.4s ease forwards;
    }

    @keyframes showMenu {
        to {
            left: 0;
        }
    }

    aside .logo {
        margin-left: 1rem;
    }

    aside .logo h2 {
        display: inline;
    }

    aside .sidebar h3 {
        display: inline;
    }

    aside .sidebar a {
        width: 100%;
        height: 3.4rem;
    }

    aside .sidebar a:last-child {
        position: absolute;
        bottom: 5rem;
    }

    aside .toggle .close {
        display: inline-block;
        cursor: pointer;
    }

    main {
        margin-top: 8rem;
        padding: 0 1rem;
    }

    main .new-users .user-list .user {
        flex-basis: 35%;
    }

    main .recent-orders {
        position: relative;
        margin: 3rem 0 0 0;
        width: 100%;
    }

    main .recent-orders table {
        width: 100%;
        margin: 0;
    }

    .right-section1 {
        width: 94%;
        margin: 0 auto 4rem;
    }

    .right-section .nav {
        position: fixed;
        top: 0;
        left: 0;
        align-items: center;
        background-color: var(--color-white);
        padding: 0 var(--padding-1);
        height: 4.6rem;
        width: 100%;
        z-index: 2;
        box-shadow: 0 1rem 1rem var(--color-light);
        margin: 0;
    }

    .right-section .nav .dark-mode {
        width: 4.4rem;
        position: absolute;
        left: 66%;
    }

    .right-section .profile .info {
        display: none;
    }

    .right-section .nav button {
        display: inline-block;
        background-color: transparent;
        cursor: pointer;
        color: var(--color-dark);
        position: absolute;
        left: 1rem;
    }

    .right-section .nav button span {
        font-size: 2rem;
    }

}

@media screen and (max-width: 768px) {
    .container1 {
        width: 100%;
        grid-template-columns: 1fr;
        padding: 0 var(--padding-1);
    }

    aside {
        position: fixed;
        background-color: var(--color-white);
        width: 15rem;
        z-index: 3;
        box-shadow: 1rem 3rem 4rem var(--color-light);
        height: 100vh;
        left: -100%;
        display: none;
        animation: showMenu 0.4s ease forwards;
    }

    @keyframes showMenu {
        to {
            left: 0;
        }
    }

    main {
        margin-top: 8rem;
        padding: 0 1rem;
    }

    main .new-users .user-list .user {
        flex-basis: 35%;
    }

    main .recent-orders {
        position: relative;
        margin: 3rem 0 0 0;
        width: 100%;
    }

    main .recent-orders table {
        width: 100%;
        margin: 0;
    }

    .right-section1 {
        width: 94%;
        margin: 0 auto 4rem;
    }

    .right-section .nav {
        position: fixed;
        top: 0;
        left: 0;
        align-items: center;
        background-color: var(--color-white);
        padding: 0 var(--padding-1);
        height: 4.6rem;
        width: 100%;
        z-index: 2;
        box-shadow: 0 1rem 1rem var(--color-light);
        margin: 0;
    }

    .right-section .nav .dark-mode {
        width: 4.4rem;
        position: absolute;
        left: 66%;
    }

    .right-section .profile .info {
        display: none;
    }

    .right-section .nav button {
        display: inline-block;
        background-color: transparent;
        cursor: pointer;
        color: var(--color-dark);
        position: absolute;
        left: 1rem;
    }

    .right-section .nav button span {
        font-size: 2rem;
    }

    main .container1 {
        width: 94%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 2rem 0 0 0.8rem;
    }

    main .right-section1 form {
        width: 69vw;
    }

    main table thead tr th:last-child,
    main table thead tr th:first-child {
        display: none;
    }

    main table tbody tr td:last-child,
    main table tbody tr td:first-child {
        display: none;
    }

    .www {
        padding-left: 5px;
        /* Corrected the typo: removed the extra "/" */
        display: inline-flex;
        /* Keeps the flex layout but with inline behavior */
        gap: 10px;
        /* Space between items */
        flex-wrap: wrap;
    }

    .row {
        padding-left: 5px;
        /* Corrected the typo: removed the extra "/" */
        display: inline-flex;
        /* Keeps the flex layout but with inline behavior */
        gap: 10px;
        /* Space between items */
        flex-wrap: wrap;
    }

    /* card view Hide scrollbar for Webkit browsers (Chrome, Safari) */

    /*-----------------------------------------------------------------------------

/* .raw {
    max-height: 650px; 
    overflow-y: auto; 
    scrollbar-width: thin; 
    scrollbar-color: transparent transparent; 
    padding-left:7px;

}
.raw::-webkit-scrollbar {
    width: 6px;
}

.raw::-webkit-scrollbar-thumb {
    background: transparent;
}

.raw:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2); 
} */

}
@media screen and (max-height: 800px) {
aside .sidebar a {   
    height: 3rem;  
}
}

/* @media screen and (max-height: 800px) {
aside .sidebar a {   
    height: 2.7rem;  
}
} */
@media screen and (max-height: 600px) {
aside .sidebar a {   
    height: 2.3rem;  
}
}
</style>

@endsection