@extends('app')

@section('title', 'Tetapan 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;
    }

    #logo-preview-img {
        max-height: 150px;
        object-fit: contain;
    }
</style>
@endpush

@section('content')
    <!-- Page Header -->
    <div class="mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Tetapan Syarikat</h1>
            <p class="mt-1 text-sm text-gray-600">Manage your company information and location settings</p>
        </div>
    </div>

    <!-- Company Information Form -->
    <div class="bg-white rounded-lg shadow p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">Company Information</h2>
        <form id="company-form">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Company Number -->
                <div class="space-y-2">
                    <label for="no_company" class="label">Company Number <span class="text-red-500">*</span></label>
                    <input type="text" id="no_company" class="input w-full" required>
                    <span id="error-no_company" class="text-red-500 text-sm hidden"></span>
                </div>

                <!-- Nama Syarikat -->
                <div class="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>

                <!-- Alamat -->
                <div class="space-y-2 md:col-span-2">
                    <label for="address" class="label">Alamat <span class="text-red-500">*</span></label>
                    <textarea id="address" class="textarea w-full" rows="3" required></textarea>
                    <span id="error-address" class="text-red-500 text-sm hidden"></span>
                </div>

                <!-- Logo Upload -->
                <div class="space-y-2 md:col-span-2">
                    <label for="logo_company" class="label">Company Logo</label>
                    <input type="file" id="logo_company" class="file-input file-input-bordered w-full"
                        accept="image/*">
                    <p class="text-xs text-gray-500 mt-1">Accepted formats: JPEG, PNG, JPG, GIF, WEBP (Max: 5MB)</p>
                    <span id="error-logo_company" class="text-red-500 text-sm hidden"></span>

                    <!-- Logo Preview -->
                    <div id="logo-preview" class="mt-3 hidden">
                        <p class="text-sm font-medium text-gray-700 mb-2">Current Logo:</p>
                        <img id="logo-preview-img" src="" alt="Company Logo" class="rounded-lg border">
                    </div>
                </div>
            </div>

            <div class="mt-6 flex justify-end">
                <button type="submit" id="btn-submit" class="btn btn-primary">
                    <span id="btn-text">Save Tukars</span>
                    <span id="btn-loading" class="loading loading-spinner loading-sm hidden"></span>
                </button>
            </div>
        </form>
    </div>

    <!-- Location Settings -->
    <div class="bg-white rounded-lg shadow p-6">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">Company Area Location</h2>

        <div class="space-y-6">
            <div class="space-y-2">
                <label class="label">Company Area (Draw on Map)</label>

                <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" class="w-full h-96 rounded-lg border"></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">Draw the company area boundary where employees can clock in/out</p>
            </div>

            <div class="flex justify-end">
                <button type="button" onclick="saveLocation()" id="btn-submit-location" class="btn btn-primary">
                    <span id="btn-text-location">Save Location</span>
                    <span id="btn-loading-location" class="loading loading-spinner loading-sm hidden"></span>
                </button>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        let map;
        let draw;
        let currentCompany = null;

        $(document).ready(function() {
            loadCompanyData();
            initializeMap();

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

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

        function loadCompanyData() {
            apiRequest('/api/me', {
                    method: 'GET'
                })
                .then(function(response) {
                    const user = response.data;
                    if (!user.id_company) {
                        alert('No company associated with your account');
                        return;
                    }

                    // Load company details
                    return apiRequest(`/api/companies/${user.id_company}`, {
                        method: 'GET'
                    });
                })
                .then(function(response) {
                    if (!response) return;

                    currentCompany = response.data;
                    populateForm(currentCompany);
                })
                .catch(function(error) {
                    console.error('Error loading company data:', error);
                    alert('Failed to load company data');
                });
        }

        function populateForm(company) {
            $('#no_company').val(company.no_company || '');
            $('#name').val(company.name || '');
            $('#address').val(company.address || '');

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

            // Load geojson to map if exists
            if (company.geojson) {
                const geojson = typeof company.geojson === 'string' ? JSON.parse(company.geojson) : company.geojson;
                $('#geojson').val(JSON.stringify(geojson));

                if (draw && geojson.features && geojson.features.length > 0) {
                    draw.deleteAll();
                    draw.add(geojson);

                    // Fit bounds to show the polygon
                    const bounds = new mapboxgl.LngLatBounds();
                    geojson.features.forEach(feature => {
                        if (feature.geometry.type === 'Polygon') {
                            feature.geometry.coordinates[0].forEach(coord => {
                                bounds.extend(coord);
                            });
                        }
                    });
                    if (!bounds.isEmpty()) {
                        map.fitBounds(bounds, { padding: 50 });
                    }
                }
            }
        }

        function initializeMap() {
            mapboxgl.accessToken = "{{ config('services.mapbox.token') }}";

            map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/streets-v12',
                center: [108.4, 2.5], // Malaysia center
                zoom: 4.3,
                projection: 'mercator'
            });

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

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

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

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

            map.addControl(draw);

            // Listen to draw events
            map.on('draw.create', updateArea);
            map.on('draw.delete', updateArea);
            map.on('draw.update', updateArea);
        }

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

            // Minimize geojson
            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);
        }

        // 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))
                    ])
                );
            }
            return coords;
        }

        function saveCompanyInfo() {
            $('.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());
            formData.append('address', $('#address').val());

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

            apiRequest(`/api/companies/${currentCompany.id}`, {
                    method: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    headers: {
                        'X-HTTP-Method-Override': 'PUT'
                    }
                })
                .then(function(response) {
                    alert(response.message || 'Company information updated successfully');
                    loadCompanyData();
                })
                .catch(function(error) {
                    if (error.xhr && error.xhr.status === 400) {
                        const errors = error.xhr.responseJSON.data;
                        Object.keys(errors).forEach(function(key) {
                            $(`#error-${key}`).removeClass('hidden').text(errors[key][0]);
                        });
                    } else {
                        alert('Failed to update company information');
                    }
                })
                .finally(function() {
                    $('#btn-submit').prop('disabled', false);
                    $('#btn-text').text('Save Tukars');
                    $('#btn-loading').addClass('hidden');
                });
        }

        function saveLocation() {
            const geojsonValue = $('#geojson').val();

            if (!geojsonValue) {
                alert('Please draw a company area on the map');
                return;
            }

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

            const data = {
                geojson: geojsonValue
            };

            apiRequest(`/api/companies/${currentCompany.id}`, {
                    method: 'PUT',
                    data: JSON.stringify(data)
                })
                .then(function(response) {
                    alert(response.message || 'Company area updated successfully');
                    loadCompanyData();
                })
                .catch(function(error) {
                    if (error.xhr && error.xhr.status === 400) {
                        const errors = error.xhr.responseJSON.data;
                        Object.keys(errors).forEach(function(key) {
                            $(`#error-${key}`).removeClass('hidden').text(errors[key][0]);
                        });
                    } else {
                        alert('Failed to update company area');
                    }
                })
                .finally(function() {
                    $('#btn-submit-location').prop('disabled', false);
                    $('#btn-text-location').text('Save Location');
                    $('#btn-loading-location').addClass('hidden');
                });
        }
    </script>
@endpush