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

<?= $this->section('title') ?>Detail Data Pesaing - <?= 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 Pesaing</li>
    <li class="breadcrumb-item">Detail Data Pesaing</li>
    <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
</ol>

<!-- Row 1: Data dan Peta -->
<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 Data Pesaing</h2>
                <div class="panel-toolbar pr-3">
                    
                </div>
            </div>

            <div class="panel-container show">
                <div class="panel-content">
                    <div class="row">
                        <!-- Kolom Kiri: Data Pesaing -->
                        <div class="col-12 col-sm-6">
                            <?= form_open("", 'id="datapesaing_form"', ['id' => $id]) ?>
                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Nama Pesaing:</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_pesaing ?>" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Alamat:</label>
                                    <div class="col-9 col-sm-9">
                                        <textarea class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" rows="3" disabled><?= $alamat ?></textarea>
                                    </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">Phone:</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="<?= $phone ?>" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Website:</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="<?= $website ?>" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Rating:</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="<?= $rating ?>" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Direkam oleh:</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_user ?>" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Waktu Rekam:</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="<?= date('d/m/Y H:i:s', strtotime($wkt_rekam)) ?>" disabled>
                                    </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>

                        <!-- Kolom Kanan: Peta -->
                        <div class="col-12 col-sm-6">
                            <div class="card">
                                <div class="card-header">Lokasi Pesaing dan Kantor</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-12 -->
</div><!-- end row 1 -->

<!-- Row 2: Data SWOT -->
<div class="row">
    <div class="col-xl-12">
        <div id="panel-2" class="panel">
            <div class="panel-hdr border-faded border-top-1 border-right-0 border-left-0 shadow-0">
                <h2>Data SWOT Pesaing</h2>
            </div>

            <div class="panel-container show">
                <div class="panel-content">
                    <?php if (!empty($swot_data)) { ?>
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>Kekuatan</th>
                                    <th>Kelemahan</th>
                                    <th>Kesempatan</th>
                                    <th>Ancaman</th>
                                    <th>Direkam oleh</th>
                                    <th>Waktu Rekam</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($swot_data as $swot) { ?>
                                <tr>
                                    <td><?= $swot->kekuatan ?></td>
                                    <td><?= $swot->kelemahan ?></td>
                                    <td><?= $swot->kesempatan ?></td>
                                    <td><?= $swot->ancaman ?></td>
                                    <td><?= $swot->username ?></td>
                                    <td><?= date('d/m/Y H:i:s', strtotime($swot->wkt_rek)) ?></td>
                                </tr>
                                <?php } ?>
                            </tbody>
                        </table>
                    </div>
                    <?php } else { ?>
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i> Belum ada data SWOT untuk pesaing ini.
                    </div>
                    <?php } ?>
                </div>
            </div>
        </div><!-- end panel 2 -->
    </div><!-- end col-xl-12 -->
</div><!-- end row 2 -->

<?= $this->endSection() ?>
<!-- main section end-->

<!-- pageScripts section start-->
<?= $this->section('pageScripts') ?>
<script>
    // Variabel global untuk marker dan map
    let map, pesaingMarker, kantorMarker, circle;
    
    // Fungsi inisialisasi peta
    function initMap() {
        // Koordinat pesaing
        const pesaingLat = parseFloat('<?= $lati ?>');
        const pesaingLng = parseFloat('<?= $longi ?>');
        
        // Koordinat kantor
        const kantorLat = parseFloat('<?= $kantor_lati ?>');
        const kantorLng = parseFloat('<?= $kantor_longi ?>');
        
        const pesaingName = '<?= $nama_pesaing ?>';
        
        // Inisialisasi peta
        if (!isNaN(pesaingLat) && !isNaN(pesaingLng) && pesaingLat !== 0 && pesaingLng !== 0) {
            const pesaingPosition = { lat: pesaingLat, lng: pesaingLng };
            
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 13,
                center: pesaingPosition,
                styles: [
                    {
                        "elementType": "geometry",
                        "stylers": [{"color": "#f5f5f5"}]
                    },
                    {
                        "elementType": "labels.icon",
                        "stylers": [{"visibility": "off"}]
                    },
                    {
                        "elementType": "labels.text.fill",
                        "stylers": [{"color": "#616161"}]
                    },
                    {
                        "elementType": "labels.text.stroke",
                        "stylers": [{"color": "#f5f5f5"}]
                    },
                    {
                        "featureType": "administrative.land_parcel",
                        "elementType": "labels.text.fill",
                        "stylers": [{"color": "#bdbdbd"}]
                    },
                    {
                        "featureType": "poi",
                        "elementType": "geometry",
                        "stylers": [{"color": "#eeeeee"}]
                    },
                    {
                        "featureType": "poi",
                        "elementType": "labels.text.fill",
                        "stylers": [{"color": "#757575"}]
                    },
                    {
                        "featureType": "poi.park",
                        "elementType": "geometry",
                        "stylers": [{"color": "#e5e5e5"}]
                    },
                    {
                        "featureType": "poi.park",
                        "elementType": "labels.text.fill",
                        "stylers": [{"color": "#9e9e9e"}]
                    },
                    {
                        "featureType": "road",
                        "elementType": "geometry",
                        "stylers": [{"color": "#ffffff"}]
                    },
                    {
                        "featureType": "road.arterial",
                        "elementType": "labels.text.fill",
                        "stylers": [{"color": "#757575"}]
                    },
                    {
                        "featureType": "road.highway",
                        "elementType": "geometry",
                        "stylers": [{"color": "#dadada"}]
                    },
                    {
                        "featureType": "road.highway",
                        "elementType": "labels.text.fill",
                        "stylers": [{"color": "#616161"}]
                    },
                    {
                        "featureType": "road.local",
                        "elementType": "labels.text.fill",
                        "stylers": [{"color": "#9e9e9e"}]
                    },
                    {
                        "featureType": "transit.line",
                        "elementType": "geometry",
                        "stylers": [{"color": "#e5e5e5"}]
                    },
                    {
                        "featureType": "transit.station",
                        "elementType": "geometry",
                        "stylers": [{"color": "#eeeeee"}]
                    },
                    {
                        "featureType": "water",
                        "elementType": "geometry",
                        "stylers": [{"color": "#c9c9c9"}]
                    },
                    {
                        "featureType": "water",
                        "elementType": "labels.text.fill",
                        "stylers": [{"color": "#9e9e9e"}]
                    }
                ]
            });
            
            // Marker untuk lokasi pesaing (merah)
            pesaingMarker = new google.maps.Marker({
                position: pesaingPosition,
                map: map,
                title: pesaingName,
                icon: {
                    url: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png'
                }
            });
            
            // Info window untuk pesaing
            const pesaingInfoWindow = new google.maps.InfoWindow({
                content: `
                    <div>
                        <strong>${pesaingName}</strong><br>
                        <small>Pesaing</small><br>
                        Lat: ${pesaingLat}<br>
                        Lng: ${pesaingLng}<br>
                        Rating: <?= $rating ?>
                    </div>
                `
            });
            
            pesaingMarker.addListener('click', function() {
                pesaingInfoWindow.open(map, pesaingMarker);
            });
            
            // Marker untuk kantor (biru) jika ada koordinat kantor
            if (!isNaN(kantorLat) && !isNaN(kantorLng) && kantorLat !== 0 && kantorLng !== 0) {
                const kantorPosition = { lat: kantorLat, lng: kantorLng };
                
                kantorMarker = new google.maps.Marker({
                    position: kantorPosition,
                    map: map,
                    title: 'Kantor',
                    icon: {
                        url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'
                    }
                });
                
                const kantorInfoWindow = new google.maps.InfoWindow({
                    content: `
                        <div>
                            <strong>Kantor</strong><br>
                            Lat: ${kantorLat}<br>
                            Lng: ${kantorLng}
                        </div>
                    `
                });
                
                kantorMarker.addListener('click', function() {
                    kantorInfoWindow.open(map, kantorMarker);
                });
                
                // Hitung bounds untuk menampilkan kedua marker dan radius 5km
                const bounds = new google.maps.LatLngBounds();
                bounds.extend(pesaingPosition);
                bounds.extend(kantorPosition);
                
                // Extend bounds untuk radius 5km dari lokasi pesaing
                const radiusInDegrees = 5000 / 111320; // 5km dalam derajat (approx)
                bounds.extend({
                    lat: pesaingLat + radiusInDegrees,
                    lng: pesaingLng + radiusInDegrees
                });
                bounds.extend({
                    lat: pesaingLat - radiusInDegrees,
                    lng: pesaingLng - radiusInDegrees
                });
                
                map.fitBounds(bounds, {padding: 50});
            } else {
                // Jika tidak ada kantor, zoom untuk menampilkan radius 5km
                map.setZoom(12);
                map.setCenter(pesaingPosition);
            }
            
            // Lingkaran radius 5 km di sekitar lokasi pesaing
            circle = new google.maps.Circle({
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.15,
                map: map,
                center: pesaingPosition,
                radius: 5000 // 5 km dalam meter
            });
            
            // Otomatis buka info window pesaing
            pesaingInfoWindow.open(map, pesaingMarker);
            
        } 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-->
