<?= $this->extend('template/layout') ?>

<?= $this->section('title') ?>Detail Data Promosi - <?= env('app.name') ?><?= $this->endSection() ?>

<!-- main section start-->
<?= $this->section('main') ?>
<?php
    $uri      = current_url(true);
    $segment1 = $uri->setSilent()->getSegment(1);
    $segment2 = $uri->setSilent()->getSegment(2);
    $segment3 = $uri->setSilent()->getSegment(3);
?>
<!-- Breadcumb -->
<ol class="breadcrumb page-breadcrumb">
    <li class="breadcrumb-item"><a href="javascript:void(0);"><?= env('app.name') ?></a></li>
    <li class="breadcrumb-item"><?= ucfirst($segment1) ?></li>
    <li class="breadcrumb-item">Data Promosi</li>
    <li class="breadcrumb-item">Detail Data Promosi</li>
    <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
</ol>
<div class="row">
    <div class="col-xl-12">
        <div id="panel-1" class="panel">
            <div class="panel-hdr border-faded border-top-1 border-right-0 border-left-0 shadow-0">
                <h2>Detail</h2>
                <div class="panel-toolbar pr-3">
                    
                </div>
            </div>

            <div class="panel-container show">
                <div class="panel-content">
                    <div class="row">
                        <div class="col-12 col-sm-6">
                            
                            <?= form_open("", 'id="datapromosi_form"', ['id' => $id]) ?>
                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Jenis Promosi:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" value="<?= $nama_kegiatan ?>" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Kategori Lokasi:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" value="<?= $nama_kat ?>" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Lokasi:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" value="<?= $nama_lokasi ?>" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Koordinat:</label>
                                    <div class="col-4 col-sm-4">
                                        <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" value="<?= $lati ?>" placeholder="Latitude" disabled>
                                    </div>
                                    <div class="col-1 col-sm-1 text-center">
                                        <label class="col-form-label">,</label>
                                    </div>
                                    <div class="col-4 col-sm-4">
                                        <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" value="<?= $longi ?>" placeholder="Longitude" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Nama Kegiatan:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" value="<?= $nama_giat ?>" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">PIC Lokasi:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" value="<?= $piclok_nama ?>" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Kontak PIC:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" value="<?= $piclok_kontak ?>" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Periode:</label>
                                    <div class="col-4 col-sm-4">
                                        <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" value="<?= date('d/m/Y', strtotime($tgl_1)) ?>" disabled>
                                    </div>
                                    <div class="col-1 col-sm-1 text-center">
                                        <label class="col-form-label">s/d</label>
                                    </div>
                                    <div class="col-4 col-sm-4">
                                        <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" value="<?= date('d/m/Y', strtotime($tgl_2)) ?>" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Status:</label>
                                    <div class="col-9 col-sm-9">
                                        <?php if ($status == 1) { ?>
                                            <span class="badge badge-success">Selesai</span>
                                        <?php } else { ?>
                                            <span class="badge badge-warning">Aktif</span>
                                        <?php } ?>
                                    </div>
                                </div>
   
                                <hr>
                                <div class="clearfix">
                                    <a href="<?= $back ?>" class="btn btn-secondary">
                                        <i class="fal fa-arrow-left"></i> KEMBALI
                                    </a>
                                </div>
                            </form>

                        </div>
                        <div class="col-12 col-sm-6">
                            <div class="card">
                                <div class="card-header">Lokasi Peta</div>
                                <div class="card-body">
                                    <div id="map" style="height: 400px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- end panel 1 -->
    </div><!-- end col-xl-6 -->
</div><!-- end row -->
<?= $this->endSection() ?>
<!-- main section end-->

<!-- pageScripts section start-->
<?= $this->section('pageScripts') ?>
<script>
    // Variabel global untuk marker dan map
    let map, marker;
    
    // Fungsi inisialisasi peta
    function initMap() {
        // Koordinat dari data
        const lat = parseFloat('<?= $lati ?>');
        const lng = parseFloat('<?= $longi ?>');
        const locationName = '<?= $nama_lokasi ?>';
        
        // Inisialisasi peta
        if (!isNaN(lat) && !isNaN(lng) && lat !== 0 && lng !== 0) {
            const position = { lat: lat, lng: lng };
            
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 15,
                center: position
            });
            
            // Marker untuk lokasi
            marker = new google.maps.Marker({
                position: position,
                map: map,
                title: locationName
            });
            
            // Info window
            const infoWindow = new google.maps.InfoWindow({
                content: `
                    <div>
                        <strong>${locationName}</strong><br>
                        Lat: ${lat}<br>
                        Lng: ${lng}<br>
                        <small>Kegiatan: <?= $nama_giat ?></small>
                    </div>
                `
            });
            
            marker.addListener('click', function() {
                infoWindow.open(map, marker);
            });
            
            // Otomatis buka info window
            infoWindow.open(map, marker);
            
        } else {
            // Jika tidak ada koordinat, tampilkan peta Indonesia
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 5,
                center: { lat: -2.5489, lng: 118.0149 }
            });
            
            // Tampilkan pesan tidak ada koordinat
            const infoDiv = document.createElement('div');
            infoDiv.innerHTML = '<div class="alert alert-warning">Koordinat lokasi tidak tersedia</div>';
            map.controls[google.maps.ControlPosition.TOP_CENTER].push(infoDiv);
        }
    }
</script>

<!-- Load Google Maps API -->
<script src="https://maps.googleapis.com/maps/api/js?key=<?= $map_api ?>&callback=initMap&libraries=geometry,places" async defer></script>

<style>
    #map {
        height: 400px;
        width: 100%;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
</style>
<?= $this->endSection() ?>
<!-- pageScripts section end-->
