@extends('layouts.app')

@section('content')
    <section class="pcoded-main-container">
        <div class="pcoded-wrapper">
            <div class="pcoded-content">
                <div class="pcoded-inner-content">
                    <div class="main-body">
                        <div class="page-wrapper">
                            <!-- [ breadcrumb ] start -->
                            <div class="page-header">
                                <div class="page-block">
                                    <div class="row align-items-center">
                                        <div class="col-md-12">
                                            <div class="page-header-title">
                                                <h5 class="m-b-10">JKR Hulu Langat</h5>
                                            </div>
                                            <ul class="breadcrumb">
                                                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i
                                                            class="feather icon-home"></i></a></li>
                                                <li class="breadcrumb-item"><a href="#">Audit Trail</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ breadcrumb ] end -->

                            {{-- auditLog table --}}
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-body">
                                        @if ($message = Session::get('success'))
                                            <div class="alert alert-success" role="alert">
                                                {{ $message }}
                                            </div>
                                        @endif

                                        @if ($message = Session::get('error'))
                                            <div class="alert alert-danger" role="alert">
                                                {{ $message }}
                                            </div>
                                        @endif

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

                                        <div class="dt-responsive table-responsive">
                                            <table id="auditlogTable" class="table table-striped table-bordered nowrap">
                                                <tr>
                                                    <th>Event</th>
                                                    <td>{{$log->event}}</td>
                                                </tr>
                                                <tr>
                                                    <th>Description</th>
                                                    <td>{{$log->description}}</td>
                                                </tr>
                                                <tr>
                                                    <th>Subject</th>
                                                    <td>{{$log->subject_type}}</td>
                                                </tr>
                                                <tr>
                                                    <th>Properties</th>
                                                    <td>{{$log->properties}}</td>
                                                </tr>
                                                <tr>
                                                    <th>Created by</th>
                                                    <td>{{$log->user->name}}</td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{-- End of auditlog table --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Map</title>
        <style>
            #map {
                height: 500px;
                width: 100%;
            }
        </style>
        <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    </head>
    <body>
        <div id="map"></div>

        <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
        <script>
            // Initialize the map
            const map = L.map('map').setView([0, 0], 2);

            // Add a tile layer
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
            }).addTo(map);

            let marker;

            // Function to get address from lat/lng
            function getAddress(lat, lng) {
                fetch(`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json`)
                    .then(response => response.json())
                    .then(data => {
                        const address = data.display_name;
                        saveLocation(lat, lng, address);
                    })
                    .catch(err => console.error(err));
            }

            // Get the user's current location
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition((position) => {
                    const lat = position.coords.latitude;
                    const lng = position.coords.longitude;

                    // Set the view to the user's location and add a marker
                    map.setView([lat, lng], 13);
                    marker = L.marker([lat, lng]).addTo(map)
                        .bindPopup('You are here!')
                        .openPopup();

                    // Get address from lat/lng
                    getAddress(lat, lng);
                }, () => {
                    alert('Could not get your location.');
                });
            } else {
                alert('Geolocation is not supported by this browser.');
            }

            // Function to save location data
            function saveLocation(lat, lng, address) {
                fetch('/locations', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ latitude: lat, longitude: lng, address: address })
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Location saved:', data);
                })
                .catch(err => console.error('Error saving location:', err));
            }
        </script>
    </body>
    </html>


    <script>
        function searchTable() {
            // Declare variables
            var input, filter, table, tr, td, i, txtValue;
            input = document.getElementById("searchInput");
            filter = input.value.toUpperCase();
            table = document.getElementById("auditlogTable");
            tr = table.getElementsByTagName("tr");

            // Loop through all table rows, and hide those who don't match the search query
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[1]; // Index 1 corresponds to Sub-Category name
                if (td) {
                    txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }
    </script>
@endsection