@extends('layouts.main')

@section('main-container')
<div class="container">
    <section class="content-header">
        <div class="container-fluid">
            <h3>Map View</h3>
        </div>
    </section>

    <!-- Map directly visible -->
    <div class="card mt-3 shadow-sm">
        <div class="card-body">
            <div id="map"
                 style="height: 500px; width: 100%; border: 1px solid #ccc; border-radius: 8px;">
            </div>
        </div>
    </div>
</div>

@php
    $lat = isset($lat) && is_numeric($lat) ? $lat : 23.3441;
    $lng = isset($lng) && is_numeric($lng) ? $lng : 85.3096;
@endphp

<script>
function initMap() {
    const location = { lat: {{ $lat }}, lng: {{ $lng }} };

    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 13,
        center: location,
        mapTypeId: 'terrain'
    });

    new google.maps.Marker({
        position: location,
        map: map,
        title: "Attendance Location"
    });
}
</script>

<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCu38ZTPcRp2NPk3uvRcagQA-mY-3SXlWE&callback=initMap"
    async defer>
</script>
@endsection