@extends('app')

@section('title', 'Syarikat')

@push('styles')
<style>
    /* Geocoder search box styling */
    .mapboxgl-ctrl-geocoder {
        width: 100%;
        max-width: 360px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .mapboxgl-ctrl-geocoder--input {
        font-size: 14px;
        padding: 8px 35px;
        height: 40px;
    }

    .mapboxgl-ctrl-geocoder--icon-search {
        top: 11px;
    }

    .mapboxgl-ctrl-geocoder--button {
        top: 8px;
    }

    /* Navigation controls */
    .mapboxgl-ctrl-top-right {
        top: 10px;
        right: 10px;
    }

    .mapboxgl-ctrl-top-left {
        top: 10px;
        left: 10px;
    }
</style>
@endpush

@section('content')
    <!-- Page Header -->
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Syarikat</h1>
            <p class="mt-1 text-sm text-gray-600">Urus syarikat anda</p>
        </div>
        <button onclick="openCreateModal()" class="btn btn-primary">
            <i data-lucide="plus" class="w-4 h-4"></i>
            Tambah Syarikat
        </button>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-lg shadow mb-6 p-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="space-y-2">
                <label class="label">Cari</label>
                <input type="text" id="search" class="input" placeholder="Search by name, number, address...">
            </div>
            <div class="flex items-end">
                <button onclick="loadCompanies()" class="btn btn-secondary">
                    <i data-lucide="search" class="w-4 h-4"></i>
                    Search
                </button>
            </div>
        </div>
    </div>

    <!-- Table -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="overflow-x-auto">
            <table class="table w-full">
                <thead>
                    <tr>
                        <th>Logo</th>
                        <th>Company Number</th>
                        <th>Nama</th>
                        <th>Alamat</th>
                        <th>Jumlah Pekerja</th>
                        <th>Tindakan</th>
                    </tr>
                </thead>
                <tbody id="companies-table">
                    <tr>
                        <td colspan="8" class="text-center py-8">
                            <span class="loading loading-spinner loading-lg"></span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="p-4 border-t border-gray-200">
            <div id="pagination" class="flex items-center justify-between"></div>
        </div>
    </div>

    <!-- Create/Edit Modal -->
    <dialog id="company-modal" class="modal">
        <div class="modal-box max-w-2xl">
            <h3 class="font-bold text-lg mb-4" id="modal-title">Tambah Syarikat</h3>
            <form id="company-form">
                <input type="hidden" id="company-id">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="mb-4 space-y-2">
                        <label for="no_company" class="label">Company Number <span class="text-red-500">*</span></label>
                        <div class="flex gap-2">
                            <input type="text" id="no_company" class="input w-full" required>
                            <button type="button" onclick="generateCompanyNumber()" class="btn btn-secondary">
                                <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                                Generate
                            </button>
                        </div>
                        <span id="error-no_company" class="text-red-500 text-sm hidden"></span>
                    </div>

                    <div class="mb-4 space-y-2">
                        <label for="name" class="label">Nama Syarikat <span class="text-red-500">*</span></label>
                        <input type="text" id="name" class="input w-full" required>
                        <span id="error-name" class="text-red-500 text-sm hidden"></span>
                    </div>
                </div>

                <div class="mb-4 space-y-2">
                    <label for="email" class="label">Company Email (User Account) <span
                            class="text-red-500">*</span></label>
                    <input type="email" id="email" class="input w-full" required>
                    <span id="error-email" class="text-red-500 text-sm hidden"></span>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="mb-4 space-y-2">
                        <label for="password" class="label">Kata Laluan <span class="text-red-500">*</span></label>
                        <input type="password" id="password" class="input w-full" autocomplete="new-password">
                        <span id="error-password" class="text-red-500 text-sm hidden"></span>
                    </div>
                    <div class="mb-4 space-y-2">
                        <label for="password_confirmation" class="label">Sahkan Kata Laluan <span
                                class="text-red-500">*</span></label>
                        <input type="password" id="password_confirmation" class="input w-full" autocomplete="new-password">
                        <span id="error-password_confirmation" class="text-red-500 text-sm hidden"></span>
                    </div>
                </div>

                <div class="mb-4 space-y-2">
                    <label for="logo_company" class="label">Company Logo</label>
                    <div class="flex gap-4">
                        <div class="flex-1">
                            <input type="file" id="logo_company" class="file-input  w-full" accept="image/*">
                            <p class="text-xs text-gray-500 mt-1">Max 5MB. Supported: JPG, PNG, GIF, WebP</p>
                            <span id="error-logo_company" class="text-red-500 text-sm hidden"></span>
                        </div>
                        <div id="logo-preview"
                            class="w-24 h-24 rounded-lg bg-gray-100 flex items-center justify-center border-2 border-dashed border-gray-300 hidden">
                            <img id="preview-img" src="" alt="Logo preview"
                                class="max-w-full max-h-full rounded">
                        </div>
                    </div>
                </div>

                <div class="mb-4 space-y-2">
                    <label for="address" class="label">Alamat</label>
                    <textarea id="address" class="textarea w-full" rows="3"></textarea>
                    <span id="error-address" class="text-red-500 text-sm hidden"></span>
                </div>

                <div class="mb-4 space-y-2">
                    <label class="label">Company Area (Draw on Map or Input Manually)</label>

                    <!-- Tab Switcher -->
                    <div class="flex gap-2 mb-2">
                        <button type="button" onclick="switchInputMethod('map')" id="btn-map-mode" class="btn btn-sm btn-primary">
                            <i data-lucide="map" class="w-4 h-4"></i>
                            Draw on Map
                        </button>
                        <button type="button" onclick="switchInputMethod('manual')" id="btn-manual-mode" class="btn btn-sm btn-ghost">
                            <i data-lucide="list" class="w-4 h-4"></i>
                            Manual Input
                        </button>
                    </div>

                    <!-- Map Mode -->
                    <div id="map-mode" class="">
                        <div class="bg-blue-50 border border-blue-200 rounded p-3 mb-2">
                            <p class="text-sm text-blue-800">
                                <i data-lucide="info" class="w-4 h-4 inline"></i>
                                <strong>Cari</strong> for location using search box, then click <strong>polygon icon</strong> to start drawing. Click multiple points to create area boundary. Double-click to finish.
                            </p>
                        </div>
                        <div id="map" style="height: 400px;"></div>
                    </div>

                    <!-- Manual Mode -->
                    <div id="manual-mode" class="hidden">
                        <div class="bg-green-50 border border-green-200 rounded p-3 mb-3">
                            <p class="text-sm text-green-800">
                                <i data-lucide="info" class="w-4 h-4 inline"></i>
                                Add coordinate points manually for Malaysia locations. Minimum 3 points required to form a polygon. Format: Latitude, Longitude
                            </p>
                        </div>

                        <div id="coordinates-container" class="space-y-2 mb-3">
                            <!-- Dynamic coordinate inputs will be added here -->
                        </div>

                        <div class="flex gap-2">
                            <button type="button" onclick="addCoordinateField()" class="btn btn-sm btn-secondary">
                                <i data-lucide="plus" class="w-4 h-4"></i>
                                Add Point
                            </button>
                            <button type="button" onclick="clearAllCoordinates()" class="btn btn-sm btn-ghost">
                                <i data-lucide="trash-2" class="w-4 h-4"></i>
                                Clear All
                            </button>
                            <button type="button" onclick="applyManualCoordinates()" class="btn btn-sm btn-primary">
                                <i data-lucide="check" class="w-4 h-4"></i>
                                Apply to Map
                            </button>
                        </div>
                    </div>

                    <input type="hidden" id="geojson" name="geojson">
                    <span id="error-geojson" class="text-red-500 text-sm hidden"></span>
                    <p class="text-xs text-gray-500 mt-2">You can draw as many points as needed to define the company area</p>
                </div>

                <div class="modal-action">
                    <button type="button" onclick="closeModal()" class="btn">Batal</button>
                    <button type="submit" id="btn-submit" class="btn btn-primary">
                        <span id="btn-text">Simpan</span>
                        <span id="btn-loading" class="loading loading-spinner hidden"></span>
                    </button>
                </div>
            </form>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>

    <!-- View Details Modal -->
    <dialog id="view-modal" class="modal">
        <div class="modal-box max-w-3xl">
            <h3 class="font-bold text-lg mb-4">Company Details</h3>
            <div id="company-details">
                <div class="flex justify-center py-8">
                    <span class="loading loading-spinner loading-lg"></span>
                </div>
            </div>
            <div id="view-map-container" class="hidden mt-4">
                <h4 class="font-semibold mb-2">Company Area</h4>
                <div id="view-map" style="height: 300px;"></div>
            </div>
            <div class="modal-action">
                <button onclick="closeViewModal()" class="btn">Tutup</button>
            </div>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>
@endsection

@push('scripts')
    <script>
        let currentPage = 1;
        let currentCompanyId = null;
        window.map = null;
        window.draw = null;
        let coordinateCounter = 0;
        let currentInputMethod = 'map'; // 'map' or 'manual'

        $(document).ready(function() {
            loadCompanies();

            // Search on enter
            $('#search').on('keypress', function(e) {
                if (e.which === 13) {
                    loadCompanies();
                }
            });

            // Form submit
            $('#company-form').on('submit', function(e) {
                e.preventDefault();
                saveCompany();
            });

            // Refresh icons when modals close
            $('#company-modal, #view-modal').on('close', function() {
                setTimeout(function() {
                    if (window.lucide && typeof window.lucide.createIcons === 'function') {
                        window.lucide.createIcons();
                    }
                }, 100);
            });

            // Logo preview
            $('#logo_company').on('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#preview-img').attr('src', e.target.result);
                        $('#logo-preview').removeClass('hidden');
                    };
                    reader.readAsDataURL(file);
                } else {
                    $('#logo-preview').addClass('hidden');
                }
            });

            // When the modal is closed, remove the map
            $('#company-modal').on('close', function() {
                if (window.map) {
                    window.map.remove();
                    window.map = null;
                    window.draw = null;
                }
            });
        });

        function initMap() {
            mapboxgl.accessToken = "{{ config('services.mapbox.token') }}";
            window.map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/streets-v12',
                center: [108.4, 2.5], // Malaysia center (covers West + East Malaysia)
                zoom: 4.3,
                projection: 'mercator' // Use flat mercator projection, not globe
            });

            // Add geocoder search control
            const geocoder = new MapboxGeocoder({
                accessToken: mapboxgl.accessToken,
                mapboxgl: mapboxgl,
                marker: false, // Don't show marker on search result
                placeholder: 'Search location (e.g., Kuala Lumpur, Johor Bahru)',
                bbox: [99.0, 0.8, 119.6, 7.4], // Malaysia bounding box
                countries: 'MY', // Limit to Malaysia only
                zoom: 15
            });

            window.map.addControl(geocoder, 'top-left');

            // Add navigation controls (zoom in/out)
            window.map.addControl(new mapboxgl.NavigationControl(), 'top-right');

            // Add drawing controls
            window.draw = new MapboxDraw({
                displayControlsDefault: false,
                controls: {
                    polygon: true,
                    trash: true
                }
            });

            window.map.addControl(window.draw);

            window.map.on('draw.create', updateArea);
            window.map.on('draw.delete', updateArea);
            window.map.on('draw.update', updateArea);
        }

        function updateArea(e) {
            const data = window.draw.getAll();

            // Minimize geojson by removing unnecessary fields and reducing precision
            const minimized = {
                type: data.type,
                features: data.features.map(feature => ({
                    type: 'Feature',
                    geometry: {
                        type: feature.geometry.type,
                        coordinates: minimizeCoordinates(feature.geometry.coordinates, feature.geometry.type)
                    }
                }))
            };

            const geojsonString = JSON.stringify(minimized);
            $('#geojson').val(geojsonString);

            // Sync to manual input if in manual mode
            if (currentInputMethod === 'manual') {
                syncMapToManualInput(minimized);
            }
        }

        // Reduce coordinate precision to 5 decimals (~1m accuracy)
        function minimizeCoordinates(coords, type) {
            if (type === 'Polygon') {
                return coords.map(ring =>
                    ring.map(point => [
                        parseFloat(point[0].toFixed(5)),
                        parseFloat(point[1].toFixed(5))
                    ])
                );
            } else if (type === 'Point') {
                return [
                    parseFloat(coords[0].toFixed(5)),
                    parseFloat(coords[1].toFixed(5))
                ];
            }
            return coords;
        }

        // Switch between map drawing and manual input
        function switchInputMethod(method) {
            currentInputMethod = method;

            if (method === 'map') {
                $('#map-mode').removeClass('hidden');
                $('#manual-mode').addClass('hidden');
                $('#btn-map-mode').removeClass('btn-ghost').addClass('btn-primary');
                $('#btn-manual-mode').removeClass('btn-primary').addClass('btn-ghost');

                // Refresh icons
                setTimeout(() => lucide.createIcons(), 100);
            } else {
                $('#map-mode').addClass('hidden');
                $('#manual-mode').removeClass('hidden');
                $('#btn-map-mode').removeClass('btn-primary').addClass('btn-ghost');
                $('#btn-manual-mode').removeClass('btn-ghost').addClass('btn-primary');

                // Load existing coordinates from geojson if any
                const geojsonValue = $('#geojson').val();
                if (geojsonValue) {
                    try {
                        const geojson = JSON.parse(geojsonValue);
                        syncMapToManualInput(geojson);
                    } catch (e) {
                        console.error('Error parsing geojson:', e);
                    }
                } else if ($('#coordinates-container').children().length === 0) {
                    // If no coordinates exist yet, add 3 empty fields as starter
                    addCoordinateField();
                    addCoordinateField();
                    addCoordinateField();
                }

                // Refresh icons
                setTimeout(() => lucide.createIcons(), 100);
            }
        }

        // Add coordinate input field
        function addCoordinateField(lat = '', lng = '') {
            coordinateCounter++;
            const html = `
                <div class="coordinate-row flex gap-2 items-center" data-id="${coordinateCounter}">
                    <span class="text-sm font-medium text-gray-600 w-8">#${coordinateCounter}</span>
                    <input type="number" step="any" placeholder="Latitude (e.g., 3.1390)"
                           class="input input-sm flex-1" data-type="lat" value="${lat}">
                    <input type="number" step="any" placeholder="Longitude (e.g., 101.6869)"
                           class="input input-sm flex-1" data-type="lng" value="${lng}">
                    <button type="button" onclick="removeCoordinateField(${coordinateCounter})"
                            class="btn btn-sm btn-ghost text-red-500">
                        <i data-lucide="x" class="w-4 h-4"></i>
                    </button>
                </div>
            `;
            $('#coordinates-container').append(html);

            // Refresh Lucide icons
            setTimeout(() => lucide.createIcons(), 100);
        }

        // Remove coordinate field
        function removeCoordinateField(id) {
            $(`.coordinate-row[data-id="${id}"]`).remove();
        }

        // Clear all coordinate fields
        function clearAllCoordinates() {
            if (confirm('Clear all coordinate points?')) {
                $('#coordinates-container').empty();
                coordinateCounter = 0;
            }
        }

        // Apply manual coordinates to map
        function applyManualCoordinates() {
            const coordinates = [];
            let hasError = false;

            $('.coordinate-row').each(function() {
                const lat = parseFloat($(this).find('[data-type="lat"]').val());
                const lng = parseFloat($(this).find('[data-type="lng"]').val());

                if (isNaN(lat) || isNaN(lng)) {
                    hasError = true;
                    return false;
                }

                // Validate ranges
                if (lat < -90 || lat > 90 || lng < -180 || lng > 180) {
                    alert('Invalid coordinate range. Latitude: -90 to 90, Longitude: -180 to 180');
                    hasError = true;
                    return false;
                }

                coordinates.push([lng, lat]); // GeoJSON format is [lng, lat]
            });

            if (hasError) {
                alert('Please fill all coordinate fields with valid numbers.');
                return;
            }

            if (coordinates.length < 3) {
                alert('Minimum 3 points required to form a polygon.');
                return;
            }

            // Close the polygon by adding the first point at the end
            coordinates.push(coordinates[0]);

            // Create minimized GeoJSON (no id, no properties, reduced precision)
            const geojson = {
                type: 'FeatureCollection',
                features: [{
                    type: 'Feature',
                    geometry: {
                        type: 'Polygon',
                        coordinates: [coordinates.map(coord => [
                            parseFloat(coord[0].toFixed(5)),
                            parseFloat(coord[1].toFixed(5))
                        ])]
                    }
                }]
            };

            // Update hidden field
            $('#geojson').val(JSON.stringify(geojson));

            // Update map if exists
            if (window.draw) {
                window.draw.deleteAll();
                window.draw.add(geojson);

                // Fit bounds
                const bounds = new mapboxgl.LngLatBounds();
                coordinates.forEach(coord => bounds.extend(coord));
                if (!bounds.isEmpty()) {
                    window.map.fitBounds(bounds, { padding: 50 });
                }
            }

            alert('✓ Coordinates applied to map successfully!');
        }

        // Sync map drawing to manual input
        function syncMapToManualInput(geojson) {
            if (!geojson || !geojson.features || geojson.features.length === 0) {
                return;
            }

            $('#coordinates-container').empty();
            coordinateCounter = 0;

            const feature = geojson.features[0];
            if (feature.geometry.type === 'Polygon') {
                const coords = feature.geometry.coordinates[0];
                // Remove the last point as it's duplicate daripada first (closing point)
                for (let i = 0; i < coords.length - 1; i++) {
                    const [lng, lat] = coords[i];
                    addCoordinateField(lat, lng);
                }
            }
        }

        function generateCompanyNumber() {
            const prefix = 'E';
            const randomNumber = Math.floor(10000 + Math.random() * 90000); // Generates a 5-digit number
            const companyNumber = prefix + randomNumber;
            $('#no_company').val(companyNumber);
            // Optionally, you might want to re-validate or clear error for no_company
            $('#error-no_company').addClass('hidden').text('');
        }

        function loadCompanies(page = 1) {
            currentPage = page;
            const search = $('#search').val();

            let url = `/api/companies?page=${page}&per_page=10`;
            if (search) url += `&search=${search}`;

            $('#companies-table').html(`
                <tr>
                    <td colspan="5" class="text-center py-8">
                        <span class="loading loading-spinner loading-lg"></span>
                    </td>
                </tr>
            `);

            window.authHelper.apiRequest(url, {
                    method: 'GET'
                })
                .then(function(response) {
                    const paginationData = response.data.data;
                    renderCompanies(paginationData.data || paginationData);
                    renderPagination(paginationData);
                })
                .catch(function(error) {
                    console.error('Error:', error);
                    $('#companies-table').html(`
                        <tr>
                            <td colspan="5" class="text-center py-8 text-red-500">
                                Failed to load companies
                            </td>
                        </tr>
                    `);
                });
        }

        function renderCompanies(data) {
            // Handle both array and pagination object
            const companies = Array.isArray(data) ? data : (data.data || []);

            if (companies.length === 0) {
                $('#companies-table').html(`
                    <tr>
                        <td colspan="8" class="text-center py-8 text-gray-500">
                            Tiada syarikat dijumpai
                        </td>
                    </tr>
                `);
                return;
            }

            let html = '';
            companies.forEach(function(company) {
                const logoUrl = company.logo_company ? `/storage/${company.logo_company}` :
                    'https://via.placeholder.com/40?text=No+Logo';
                html += `
                    <tr>
                        <td>
                            <div class="avatar">
                                <div class="w-10 rounded">
                                    <img src="${logoUrl}" alt="${company.name}" />
                                </div>
                            </div>
                        </td>
                        <td class="font-medium">${company.no_company}</td>
                        <td class="font-medium">${company.name}</td>
                        <td>${company.address || '-'}</td>
                        <td>
                            <span class="badge badge-info">${company.employees_count || 0}</span>
                        </td>
                        <td>
                            <div class="flex gap-2">
                                <button onclick="viewCompany(${company.id})" class="btn btn-sm btn-ghost">
                                    <i data-lucide="eye" class="w-4 h-4"></i>
                                </button>
                                <button onclick="editCompany(${company.id})" class="btn btn-sm btn-ghost">
                                    <i data-lucide="edit" class="w-4 h-4"></i>
                                </button>
                                <button onclick="deleteCompany(${company.id}, '${company.name}')" class="btn btn-sm btn-ghost text-red-500">
                                    <i data-lucide="trash" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            });

            $('#companies-table').html(html);

            // Refresh Lucide icons
            setTimeout(function() {
                if (window.lucide && typeof window.lucide.createIcons === 'function') {
                    window.lucide.createIcons();
                }
            }, 50);
        }

        function renderPagination(data) {
            if (data.last_page <= 1) {
                $('#pagination').html('');
                return;
            }

            let html = `
                <div class="text-sm text-gray-600">
                    Showing ${data.from} to ${data.to} daripada ${data.total} rekod
                </div>
                <div class="btn-group">
            `;

            html += `
                <button onclick="loadCompanies(${data.current_page - 1})"
                    class="btn btn-sm" ${data.current_page === 1 ? 'disabled' : ''}>
                    Sebelum
                </button>
            `;

            for (let i = 1; i <= data.last_page; i++) {
                if (i === data.current_page) {
                    html += `<button class="btn btn-sm btn-active">${i}</button>`;
                } else {
                    html += `<button onclick="loadCompanies(${i})" class="btn btn-sm">${i}</button>`;
                }
            }

            html += `
                <button onclick="loadCompanies(${data.current_page + 1})"
                    class="btn btn-sm" ${data.current_page === data.last_page ? 'disabled' : ''}>
                    Seterusnya
                </button>
            `;

            html += '</div>';
            $('#pagination').html(html);
        }

        function openCreateModal() {
            currentCompanyId = null;
            $('#modal-title').text('Tambah Syarikat');
            $('#company-form')[0].reset();
            $('#company-id').val('');
            $('#geojson').val('');
            $('#logo-preview').addClass('hidden');
            $('.text-red-500').addClass('hidden').text('');
            $('#email').val('');
            $('#password').val('');
            $('#password_confirmation').val('');

            // Reset input method to map
            currentInputMethod = 'map';
            $('#map-mode').removeClass('hidden');
            $('#manual-mode').addClass('hidden');
            $('#btn-map-mode').removeClass('btn-ghost').addClass('btn-primary');
            $('#btn-manual-mode').removeClass('btn-primary').addClass('btn-ghost');

            // Clear manual coordinates
            $('#coordinates-container').empty();
            coordinateCounter = 0;

            document.getElementById('company-modal').showModal();

            // Use a short timeout to ensure the modal is visible before initializing the map
            setTimeout(initMap, 150);
        }

        function viewCompany(id) {
            $('#company-details').html(`
                <div class="flex justify-center py-8">
                    <span class="loading loading-spinner loading-lg"></span>
                </div>
            `);
            $('#view-map-container').addClass('hidden');
            document.getElementById('view-modal').showModal();

            window.authHelper.apiRequest(`/api/companies/${id}`, {
                    method: 'GET'
                })
                .then(function(response) {
                    const company = response.data.data;

                    let employeesHtml = '<p class="text-gray-600">No employees yet</p>';
                    if (company.employees && company.employees.length > 0) {
                        employeesHtml = '<div class="space-y-2">';
                        company.employees.forEach(function(emp) {
                            employeesHtml +=
                                `<div class="p-2 bg-gray-100 rounded">${emp.name} (${emp.email})</div>`;
                        });
                        employeesHtml += '</div>';
                    }

                    const logoUrl = company.logo_company ? `/storage/${company.logo_company}` :
                        'https://via.placeholder.com/120?text=No+Logo';

                    let html = `
                        <div class="flex gap-6 mb-6">
                            <div class="w-32 h-32 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
                                <img src="${logoUrl}" alt="${company.name}" class="max-w-full max-h-full rounded">
                            </div>
                            <div>
                                <h2 class="text-2xl font-bold">${company.name}</h2>
                                <p class="text-gray-600">${company.no_company}</p>
                                ${company.user ? `<p class="text-gray-600">Email: ${company.user.email}</p>` : ''}
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4 mb-6">
                            <div>
                                <p class="text-sm text-gray-600">Alamat</p>
                                <p class="font-medium">${company.address || '-'}</p>
                            </div>
                        </div>
                        <div>
                            <p class="text-sm text-gray-600 mb-2">Employees (${company.employees ? company.employees.length : 0})</p>
                            ${employeesHtml}
                        </div>
                    `;

                    $('#company-details').html(html);

                    // Show map with geojson if available
                    if (company.geojson) {
                        $('#view-map-container').removeClass('hidden');
                        setTimeout(function() {
                            initViewMap(company.geojson);
                        }, 100);
                    }
                })
                .catch(function(error) {
                    $('#company-details').html(
                        '<p class="text-center text-red-500">Failed to load company details</p>');
                });
        }

        function initViewMap(geojsonData) {
            mapboxgl.accessToken = "{{ config('services.mapbox.token') }}";
            const viewMap = new mapboxgl.Map({
                container: 'view-map',
                style: 'mapbox://styles/mapbox/streets-v12',
                center: [108.4, 2.5], // Malaysia center (covers West + East Malaysia)
                zoom: 4.3,
                projection: 'mercator' // Use flat mercator projection, not globe
            });

            viewMap.on('load', function() {
                const geojson = typeof geojsonData === 'string' ? JSON.parse(geojsonData) : geojsonData;

                if (geojson.features && geojson.features.length > 0) {
                    geojson.features.forEach(function(feature) {
                        viewMap.addLayer({
                            id: 'area-' + Math.random(),
                            type: 'fill',
                            source: {
                                type: 'geojson',
                                data: feature
                            },
                            paint: {
                                'fill-color': '#3b82f6',
                                'fill-opacity': 0.4,
                                'fill-outline-color': '#1e40af'
                            }
                        });
                    });

                    // Fit bounds to show all features
                    const bounds = new mapboxgl.LngLatBounds();
                    geojson.features.forEach(function(feature) {
                        feature.geometry.coordinates.forEach(function(coord) {
                            if (feature.geometry.type === 'Polygon') {
                                coord.forEach(function(point) {
                                    bounds.extend(point);
                                });
                            }
                        });
                    });

                    if (!bounds.isEmpty()) {
                        viewMap.fitBounds(bounds, { padding: 50 });
                    }
                }
            });
        }

        function editCompany(id) {
            currentCompanyId = id;
            $('#modal-title').text('Edit Company');
            $('.text-red-500').addClass('hidden').text('');
            $('#password').val('');
            $('#password_confirmation').val('');

            // Reset input method to map
            currentInputMethod = 'map';
            $('#map-mode').removeClass('hidden');
            $('#manual-mode').addClass('hidden');
            $('#btn-map-mode').removeClass('btn-ghost').addClass('btn-primary');
            $('#btn-manual-mode').removeClass('btn-primary').addClass('btn-ghost');

            // Clear manual coordinates
            $('#coordinates-container').empty();
            coordinateCounter = 0;

            window.authHelper.apiRequest(`/api/companies/${id}`, {
                    method: 'GET'
                })
                .then(function(response) {
                    const company = response.data.data;
                    $('#company-id').val(company.id);
                    $('#no_company').val(company.no_company);
                    $('#name').val(company.name);
                    $('#address').val(company.address);
                    $('#email').val(company.user ? company.user.email : '');

                    // Show logo preview if exists
                    if (company.logo_company) {
                        $('#preview-img').attr('src', `/storage/${company.logo_company}`);
                        $('#logo-preview').removeClass('hidden');
                    } else {
                        $('#logo-preview').addClass('hidden');
                    }

                    document.getElementById('company-modal').showModal();

                    setTimeout(function() {
                        initMap();

                        window.map.on('load', function() {
                            if (company.geojson) {
                                const geojson = typeof company.geojson === 'string' ? JSON.parse(company
                                    .geojson) : company.geojson;
                                window.draw.add(geojson);
                                const bounds = new mapboxgl.LngLatBounds();
                                geojson.features.forEach(function(feature) {
                                    feature.geometry.coordinates.forEach(function(coord) {
                                        if (feature.geometry.type === 'Polygon') {
                                            coord.forEach(function(point) {
                                                bounds.extend(point);
                                            });
                                        } else {
                                            bounds.extend(coord);
                                        }
                                    });
                                });
                                if (!bounds.isEmpty()) {
                                    window.map.fitBounds(bounds, {
                                        padding: 50
                                    });
                                }
                                $('#geojson').val(JSON.stringify(geojson));

                                // Also populate manual coordinates for easy editing
                                syncMapToManualInput(geojson);
                            }
                        });
                    }, 150);
                })
                .catch(function(error) {
                    alert('Failed to load company data');
                });
        }

        function saveCompany() {
            $('.text-red-500').addClass('hidden').text('');
            $('#btn-submit').prop('disabled', true);
            $('#btn-text').text('Saving...');
            $('#btn-loading').removeClass('hidden');

            const formData = new FormData();
            formData.append('no_company', $('#no_company').val());
            formData.append('name', $('#name').val()); // Ensure name is always sent
            formData.append('email', $('#email').val()); // Add email

            // Only append password fields if they are not empty
            const password = $('#password').val();
            const passwordSahkanation = $('#password_confirmation').val();
            if (password) {
                formData.append('password', password);
                formData.append('password_confirmation', passwordSahkanation);
            }

            formData.append('address', $('#address').val());

            // Handle geojson - only send if not empty
            const geojsonValue = $('#geojson').val();
            if (geojsonValue && geojsonValue.trim() !== '') {
                formData.append('geojson', geojsonValue);
            }

            // Append file if selected
            const logoFile = $('#logo_company')[0].files[0];
            if (logoFile) {
                formData.append('logo_company', logoFile);
            }

            const url = currentCompanyId ?
                `/api/companies/${currentCompanyId}` :
                '/api/companies';

            const method = currentCompanyId ? 'POST' : 'POST';

            // Add _method for PUT request if updating
            if (currentCompanyId) {
                formData.append('_method', 'PUT');
            }

            const token = window.authHelper.getToken();

            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    closeModal();
                    loadCompanies(currentPage);
                    alert(response.message || 'Company saved successfully');
                },
                error: function(xhr) {
                    if (xhr.status === 400) {
                        const errors = xhr.responseJSON.data;
                        Object.keys(errors).forEach(function(key) {
                            $(`#error-${key}`).removeClass('hidden').text(errors[key][0]);
                        });
                    } else {
                        alert('Failed to save company');
                    }
                },
                complete: function() {
                    $('#btn-submit').prop('disabled', false);
                    $('#btn-text').text('Save');
                    $('#btn-loading').addClass('hidden');
                }
            });
        }

        function deleteCompany(id, name) {
            if (!confirm(`Are you sure you want to delete "${name}"?`)) {
                return;
            }

            window.authHelper.apiRequest(`/api/companies/${id}`, {
                    method: 'DELETE'
                })
                .then(function(response) {
                    loadCompanies(currentPage);
                    alert(response.data.message || 'Company deleted successfully');
                })
                .catch(function(error) {
                    if (error.xhr && error.xhr.status === 400) {
                        alert(error.xhr.responseJSON.message);
                    } else {
                        alert('Failed to delete company');
                    }
                });
        }

        function closeModal() {
            document.getElementById('company-modal').close();
        }

        function closeViewModal() {
            document.getElementById('view-modal').close();
        }
    </script>
@endpush