@extends('layouts.appv2')

@section('content')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<style>
   

   .container {
    padding: 20px;
    display: flex;
    gap: 20px;
    justify-content: center; /* Centers the entire container content */
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

.search-bar {
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* Centers the search bar within its container */
    width: 100%; /* Ensures full width on smaller screens */
}

.search-bar input {
    width: 50%; /* Adjust width for better look */
    padding: 10px;
    box-sizing: border-box;
}

h2 {
    text-align: center; /* Centers the heading */
    width: 100%;
}

.employee-list, .drop-zone {
    flex: 1;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.employee {
    padding: 10px;
    margin: 5px 0;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
}

.drop-area {
    min-height: 200px;
    padding: 10px;
    border: 2px dashed #ccc;
}

.remove-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    background: red;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.wfh-form {
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
}

.wfh-form input {
    display: block;
    width: 100%;
    margin: 5px 0 10px;
    padding: 5px;
}

.wfh-form label {
    font-weight: bold;
}

.save-btn {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}

.error-message {
    color: red;
    font-size: 12px;
    margin-top: -8px;
    margin-bottom: 8px;
    display: none;
}

.search-bar input {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}
  </style>



<h1 class="mb-4 gradient-text">Work From Home</h1>  	
<div class="card mb-5" style="border-radius: 20px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">

<div class="card-header">
    <div class="d-flex justify-content-between align-items-center mb-0">
        <h5>Managa WFH Staff</h5>
    </div>
</div>
<div class="card-body">

  <!-- Map Container -->
  <div id="mapContainer" style="height: 400px; width: 100%; border-radius: 10px; margin-bottom: 20px;"></div>


<h2>Drag and Drop For Work From Home</h2>
<div class="container">
        <!-- Search Bar -->
        <div class="search-bar">
            <input type="text" id="search" placeholder="Search employees...">
        </div>

        <!-- Employee List -->
        <div class="employee-list">
            <h4>Employee List (Not WFH)</h4>
            @foreach ($otherEmployees as $employee)
                <div class="employee" draggable="true" id="emp{{ $employee->employee_id }}">
                    {{ $employee->employee_first_name }}
                </div>
            @endforeach
        </div>

        <!-- Drop Zone: Selected Employees WFH -->
        <div class="drop-zone">
            <h4>Selected Employees WFH</h4>
            <div id="dropArea" class="drop-area">
                @foreach ($wfhEmployees as $employee)
                    <div class="employee" draggable="true" id="emp{{ $employee->employee_id }}">
                        {{ $employee->employee_first_name }} {{ $employee->employee_last_name }}
                        <button class="remove-btn" data-employee-id="{{ $employee->employee_id }}">X</button>
                        
                        <!-- Form to fill address, lat, long, and radius -->
                        <div class="wfh-form" id="form-{{ $employee->employee_id }}" style="display:none;">
                            <label for="address-{{ $employee->employee_id }}">Address:</label>
                            <input type="text" id="address-{{ $employee->employee_id }}" 
                                   value="{{ $employee->address ?? '' }}" placeholder="Enter address">
                            <div class="error-message" id="address-error-{{ $employee->employee_id }}"></div>
                            
                            <label for="lat-{{ $employee->employee_id }}">Latitude:</label>
                            <input type="text" id="lat-{{ $employee->employee_id }}" 
                                   value="{{ $employee->lat ?? '' }}" placeholder="Enter latitude">
                            <div class="error-message" id="lat-error-{{ $employee->employee_id }}"></div>
                            
                            <label for="long-{{ $employee->employee_id }}">Longitude:</label>
                            <input type="text" id="long-{{ $employee->employee_id }}" 
                                   value="{{ $employee->long ?? '' }}" placeholder="Enter longitude">
                            <div class="error-message" id="long-error-{{ $employee->employee_id }}"></div>
                            
                            <label for="radius-{{ $employee->employee_id }}">Radius (meters):</label>
                            <input type="text" id="radius-{{ $employee->employee_id }}" 
                                   value="{{ $employee->radius ?? '' }}" placeholder="Enter radius">
                            <div class="error-message" id="radius-error-{{ $employee->employee_id }}"></div>
                            
                            <button class="save-btn" data-employee-id="{{ $employee->employee_id }}">Save</button>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    </div>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCONxWCXBdM26TGw7S3RR7W9hH804gM2H0&callback=initMap" async defer></script>


    <script>
      
      // Global variables
let map;
let currentMarker;
let currentCircle;
let currentInfoWindow;

function initMap() {
    // Initialize the map with a default center
    map = new google.maps.Map(document.getElementById("mapContainer"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        styles: [
            {
                featureType: "poi",
                elementType: "labels",
                stylers: [{ visibility: "off" }]
            }
        ]
    });
}

function showEmployeeLocation(lat, lng, radius, employeeName) {
    // Convert strings to numbers if needed
    lat = parseFloat(lat);
    lng = parseFloat(lng);
    radius = parseFloat(radius);

    // Create LatLng object
    const position = new google.maps.LatLng(lat, lng);

    // Close existing info window if open
    if (currentInfoWindow) {
        currentInfoWindow.close();
    }

    // Remove existing marker and circle if they exist
    if (currentMarker) currentMarker.setMap(null);
    if (currentCircle) currentCircle.setMap(null);

    // Create new marker
    currentMarker = new google.maps.Marker({
        position: position,
        map: map,
        title: employeeName,
        animation: google.maps.Animation.DROP
    });

    // Create info window
    currentInfoWindow = new google.maps.InfoWindow({
        content: `<div style="padding: 10px;">
                    <h4>${employeeName}</h4>
                    <p>WFH Radius: ${radius}m</p>
                 </div>`
    });

    // Show info window when marker is clicked
    currentMarker.addListener('click', () => {
        currentInfoWindow.open(map, currentMarker);
    });

    // Create circle to show radius
    currentCircle = new google.maps.Circle({
        map: map,
        center: position,
        radius: radius,
        fillColor: '#4CAF50',
        fillOpacity: 0.2,
        strokeColor: '#4CAF50',
        strokeOpacity: 0.8,
        strokeWeight: 2
    });

    // Center map on the location and adjust zoom to show the entire circle
    map.setCenter(position);
    const bounds = currentCircle.getBounds();
    map.fitBounds(bounds);
}

// Validation functions
function validateInput(value, type) {
    switch(type) {
        case 'address':
            return value.trim().length > 0;
        case 'latitude':
            return !isNaN(value) && value >= -90 && value <= 90;
        case 'longitude':
            return !isNaN(value) && value >= -180 && value <= 180;
        case 'radius':
            return !isNaN(value) && value > 0;
        default:
            return false;
    }
}

function showError(employeeId, field, message) {
    const errorDiv = document.getElementById(`${field}-error-${employeeId}`);
    errorDiv.textContent = message;
    errorDiv.style.display = 'block';
}

function clearErrors(employeeId) {
    ['address', 'lat', 'long', 'radius'].forEach(field => {
        const errorDiv = document.getElementById(`${field}-error-${employeeId}`);
        errorDiv.style.display = 'none';
    });
}

// Function to update WFH status via AJAX
function updateWFHStatus(employeeId, status) {
    const employeeIdNumber = employeeId.replace('emp', '');

    fetch('/update-wfh-status', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
        },
        body: JSON.stringify({
            employee_id: employeeIdNumber,
            status: status ? 'yes' : 'no',
        }),
    })
    .then(response => response.json())
    .then(data => {
        if (!data.success) {
            alert('Failed to update WFH status.');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while updating WFH status.');
    });
}

// Function to submit WFH details
function submitWFHDetails(employeeId) {
    clearErrors(employeeId);
    
    const address = document.getElementById(`address-${employeeId}`).value;
    const latitude = document.getElementById(`lat-${employeeId}`).value;
    const longitude = document.getElementById(`long-${employeeId}`).value;
    const radius = document.getElementById(`radius-${employeeId}`).value;

    // Validate inputs
    let isValid = true;
    if (!validateInput(address, 'address')) {
        showError(employeeId, 'address', 'Address is required');
        isValid = false;
    }
    if (!validateInput(latitude, 'latitude')) {
        showError(employeeId, 'lat', 'Invalid latitude (-90 to 90)');
        isValid = false;
    }
    if (!validateInput(longitude, 'longitude')) {
        showError(employeeId, 'long', 'Invalid longitude (-180 to 180)');
        isValid = false;
    }
    if (!validateInput(radius, 'radius')) {
        showError(employeeId, 'radius', 'Radius must be a positive number');
        isValid = false;
    }

    if (!isValid) return;

    fetch('/save-wfh-details', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
        },
        body: JSON.stringify({
            employee_id: employeeId,
            address: address,
            latitude: parseFloat(latitude),
            longitude: parseFloat(longitude),
            radius: parseFloat(radius)
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('WFH details saved successfully!');
            document.getElementById(`form-${employeeId}`).style.display = 'none';
            
            // Show location on map after saving
            const employeeName = document.getElementById(`emp${employeeId}`).childNodes[0].textContent.trim();
            showEmployeeLocation(latitude, longitude, radius, employeeName);
        } else {
            alert('Failed to save WFH details. Please check your inputs.');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while saving WFH details.');
    });
}

// Initialize form toggle and save button handlers
function initializeEmployeeHandlers(employeeElement) {
    employeeElement.addEventListener('click', (event) => {
        if (event.target.closest('.wfh-form') || event.target.classList.contains('remove-btn')) return;
        
        const employeeId = employeeElement.id.replace('emp', '');
        const form = document.getElementById(`form-${employeeId}`);
        
        // Get the employee's name
        const employeeName = employeeElement.childNodes[0].textContent.trim();
        
        // Check if this employee has location data
        const latInput = document.getElementById(`lat-${employeeId}`);
        const longInput = document.getElementById(`long-${employeeId}`);
        const radiusInput = document.getElementById(`radius-${employeeId}`);
        
        if (latInput && longInput && radiusInput && 
            latInput.value && longInput.value && radiusInput.value) {
            showEmployeeLocation(
                latInput.value,
                longInput.value,
                radiusInput.value,
                employeeName
            );
        }
        
        if (form) {
            form.style.display = form.style.display === 'none' ? 'block' : 'none';
        }
    });

    const saveBtn = employeeElement.querySelector('.save-btn');
    if (saveBtn) {
        saveBtn.addEventListener('click', (event) => {
            event.preventDefault();
            const employeeId = event.target.getAttribute('data-employee-id');
            submitWFHDetails(employeeId);
        });
    }
}

// Add event listener for the remove button in the WFH area
const dropArea = document.getElementById('dropArea');
dropArea.addEventListener('click', (event) => {
    if (event.target.classList.contains('remove-btn')) {
        const employeeId = event.target.getAttribute('data-employee-id');
        const employeeElement = document.getElementById(`emp${employeeId}`);
        
        updateWFHStatus(`emp${employeeId}`, false);
        
        // Create a new draggable employee element
        const newEmployee = employeeElement.cloneNode(true);
        newEmployee.draggable = true;
        
        // Remove the form and remove button
        const form = newEmployee.querySelector('.wfh-form');
        const removeBtn = newEmployee.querySelector('.remove-btn');
        if (form) form.remove();
        if (removeBtn) removeBtn.remove();
        
        // Move to employee list
        document.querySelector('.employee-list').appendChild(newEmployee);
        employeeElement.remove();
    }
});

// Search Functionality
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', () => {
    const query = searchInput.value.toLowerCase();
    const employees = document.querySelectorAll('.employee-list .employee');
    employees.forEach(employee => {
        const text = employee.textContent.toLowerCase();
        employee.style.display = text.includes(query) ? 'block' : 'none';
    });
});

// Drag and Drop Functionality
function initDragAndDrop() {
    const employees = document.querySelectorAll('.employee');
    employees.forEach(employee => {
        employee.addEventListener('dragstart', (event) => {
            event.dataTransfer.setData('text/plain', employee.id);
        });
    });
}

// Initialize drag and drop
initDragAndDrop();

// Handle dragover on drop area
dropArea.addEventListener('dragover', (event) => {
    event.preventDefault();
});

// Handle drop event
dropArea.addEventListener('drop', (event) => {
    event.preventDefault();
    const employeeId = event.dataTransfer.getData('text/plain');
    const draggedEmployee = document.getElementById(employeeId);

    if (draggedEmployee && !dropArea.contains(draggedEmployee)) {
        const clone = draggedEmployee.cloneNode(true);
        
        // Add remove button
        const removeBtn = document.createElement('button');
        removeBtn.classList.add('remove-btn');
        removeBtn.textContent = 'X';
        removeBtn.setAttribute('data-employee-id', employeeId.replace('emp', ''));
        clone.appendChild(removeBtn);

        // Add WFH form
        const formHtml = `
            <div class="wfh-form" id="form-${employeeId.replace('emp', '')}" style="display:none;">
                <label for="address-${employeeId.replace('emp', '')}">Address:</label>
                <input type="text" id="address-${employeeId.replace('emp', '')}" placeholder="Enter address">
                <div class="error-message" id="address-error-${employeeId.replace('emp', '')}"></div>
                
                <label for="lat-${employeeId.replace('emp', '')}">Latitude:</label>
                <input type="text" id="lat-${employeeId.replace('emp', '')}" placeholder="Enter latitude">
                <div class="error-message" id="lat-error-${employeeId.replace('emp', '')}"></div>
                
                <label for="long-${employeeId.replace('emp', '')}">Longitude:</label>
                <input type="text" id="long-${employeeId.replace('emp', '')}" placeholder="Enter longitude">
                <div class="error-message" id="long-error-${employeeId.replace('emp', '')}"></div>
                
                <label for="radius-${employeeId.replace('emp', '')}">Radius (meters):</label>
                <input type="text" id="radius-${employeeId.replace('emp', '')}" placeholder="Enter radius">
                <div class="error-message" id="radius-error-${employeeId.replace('emp', '')}"></div>
                
                <button class="save-btn" data-employee-id="${employeeId.replace('emp', '')}">Save</button>
            </div>
        `;
        clone.insertAdjacentHTML('beforeend', formHtml);

        draggedEmployee.remove();
        dropArea.appendChild(clone);
        updateWFHStatus(employeeId, true);
        
        // Initialize click handlers for the new element
        initializeEmployeeHandlers(clone);
    }
});

// Initialize handlers for existing employees
document.querySelectorAll('.employee').forEach(initializeEmployeeHandlers);
    </script>




@endsection