<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['title' => 'Tambah Instansi']); ?>
<?php $__env->startPush('styles'); ?>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
    :root {
        --primary: #4f46e5;
        --primary-l: #eef2ff;
        --border: #e2e8f0;
        --text: #1e293b;
        --muted: #64748b;
        --muted2: #94a3b8;
        --white: #ffffff;
    }
    .form-wrap{max-width:620px;margin:0 auto;}
    .form-card{background:var(--white);border:1px solid var(--border);border-radius:20px;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1);overflow:hidden;}
    .form-card-hd{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;}
    .form-card-ico{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--primary),#7c3aed);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .form-card-ico svg{width:20px;height:20px;stroke:white;}
    .form-card-title{font-size:1rem;font-weight:800;color:var(--text);}
    .form-card-sub{font-size:12px;color:var(--muted);font-weight:500;margin-top:2px;}
    .form-card-body{padding:24px;}
    .form-card-ft{padding:16px 24px;border-top:1px solid var(--border);background:#f8fafc;display:flex;justify-content:flex-end;gap:10px;border-radius:0 0 20px 20px;}

    .sec-divider{font-size:10.5px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:.1em;padding:8px 0 12px;border-bottom:1px solid var(--border);margin-bottom:18px;}

    .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
    .fg{display:flex;flex-direction:column;margin-bottom:16px;}
    .fg label{font-size:11px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px;}
    .fg input,.fg textarea{
        padding:11px 14px;border:1.5px solid var(--border);border-radius:11px;
        font-family:inherit;font-size:13.5px;font-weight:600;
        color:var(--text);background:#f0f4ff;outline:none;transition:all .15s;
    }
    .fg input:focus,.fg textarea:focus{border-color:var(--primary);background:white;box-shadow:0 0 0 3px rgba(79,70,229,.1);}
    
    /* Map Container */
    .map-container { position: relative; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--border); margin-bottom: 16px; background: #eee; }
    #map { height: 380px; width: 100%; z-index: 1; }
    
    /* Search Box on Map */
    .map-search-box {
        position: absolute; top: 12px; left: 12px; right: 12px; z-index: 1000;
        display: flex; gap: 8px;
    }
    .map-search-input {
        flex: 1; padding: 12px 15px; border-radius: 10px; border: 1px solid var(--border);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-size: 13px; font-weight: 600; background: white !important;
    }
    .map-search-btn {
        padding: 0 20px; background: var(--primary); color: white; border: none; 
        border-radius: 10px; cursor: pointer; font-weight: 700; box-shadow: 0 4px 12px rgba(79,70,229,0.3);
    }

    .get-loc-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;background:#e0f2fe;color:#0284c7;border:1.5px solid #bae6fd;border-radius:9px;font-size:12.5px;font-weight:700;cursor:pointer;margin-bottom:10px;transition: 0.2s;}
    .get-loc-btn:hover { background: #bae6fd; }
    
    .radius-preview{display:flex;align-items:center;gap:10px;background:var(--primary-l);border-radius:9px;padding:10px 14px;margin-bottom:10px;}
    .radius-val{font-size:1.1rem;font-weight:900;color:var(--primary);}
    .hint{font-size:11px;color:var(--muted2);font-weight:500;margin-top: 4px;}

    @keyframes spin{to{transform:rotate(360deg);}}
    @media(max-width:560px){.frow{grid-template-columns:1fr;}}
</style>
<?php $__env->stopPush(); ?>

<div class="form-wrap">
    <a href="<?php echo e(route('admin.instansi.index')); ?>" style="margin-bottom:18px;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:9px;background:white;color:var(--muted);border:1.5px solid var(--border);font-size:13px;font-weight:700;text-decoration:none;">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="width:13px;height:13px;"><polyline points="15 18 9 12 15 6"/></svg>
        Kembali
    </a>

    <div class="form-card">
        <div class="form-card-hd">
            <div class="form-card-ico">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
            </div>
            <div>
                <div class="form-card-title">Tambah Instansi</div>
                <div class="form-card-sub">Cari lokasi atau klik langsung pada peta untuk menentukan titik presisi</div>
            </div>
        </div>

        <div class="form-card-body">
            <form method="POST" action="<?php echo e(route('admin.instansi.store')); ?>" id="form-instansi">
                <?php echo csrf_field(); ?>

                <div class="sec-divider">Data Instansi</div>

                <div class="fg">
                    <label>Nama Instansi</label>
                    <input type="text" name="nama_instansi" value="<?php echo e(old('nama_instansi')); ?>" placeholder="Contoh: PT. Maju Bersama" required>
                </div>

                <div class="fg">
                    <label>Alamat Lengkap (Otomatis)</label>
                    <textarea name="alamat" id="inp-alamat" rows="2" placeholder="Pilih lokasi di peta untuk mengisi alamat ini secara otomatis..."><?php echo e(old('alamat')); ?></textarea>
                </div>

                <div class="sec-divider">Lokasi Kantor (Peta Gratis)</div>

                <button type="button" class="get-loc-btn" id="btn-gps" onclick="getCurrentGPS()">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg>
                    Dapatkan Lokasi GPS Saya
                </button>

                <div class="map-container">
                    <div class="map-search-box">
                        <input type="text" id="map-search-input" class="map-search-input" placeholder="Ketik Nama Jalan atau Bangunan (Contoh: SMAN 9 Cinere)...">
                        <button type="button" class="map-search-btn" onclick="searchLocation()">Cari</button>
                    </div>
                    <div id="map"></div>
                </div>
                <div class="hint" style="margin-bottom: 15px;">💡 <b>Tips:</b> Jika pencarian gagal, cari area umumnya saja (misal: "Cinere"), lalu klik/geser pin ke titik gedung yang tepat.</div>

                <div class="frow">
                    <div class="fg">
                        <label>Latitude</label>
                        <input type="number" name="latitude" id="inp-lat" step="any" value="<?php echo e(old('latitude', -6.200000)); ?>" required>
                    </div>
                    <div class="fg">
                        <label>Longitude</label>
                        <input type="number" name="longitude" id="inp-lng" step="any" value="<?php echo e(old('longitude', 106.816666)); ?>" required>
                    </div>
                </div>

                <div class="fg">
                    <label>Radius Absen (Meter)</label>
                    <div class="radius-preview">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:20px;height:20px;stroke:var(--primary);"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/></svg>
                        <div>
                            <div class="radius-val" id="radius-display"><?php echo e(old('radius_meter', 100)); ?> m</div>
                            <div class="hint">Jangkauan maksimal karyawan bisa melakukan absen</div>
                        </div>
                    </div>
                    <input type="range" name="radius_meter" min="10" max="5000" step="10" value="<?php echo e(old('radius_meter', 100)); ?>" oninput="document.getElementById('radius-display').textContent=this.value+' m'" style="width: 100%; cursor: pointer;">
                </div>

                <div class="sec-divider">Akun Login</div>
                <div class="fg">
                    <label>Email Admin</label>
                    <input type="email" name="email" value="<?php echo e(old('email')); ?>" placeholder="admin@instansi.com" required>
                </div>
                <div class="fg">
                    <label>Password</label>
                    <input type="password" name="password" placeholder="Minimal 6 karakter" required>
                </div>
            </form>
        </div>

        <div class="form-card-ft">
            <a href="<?php echo e(route('admin.instansi.index')); ?>" style="text-decoration:none; color:var(--muted); font-size:13px; font-weight:700; padding:10px 20px;">Batal</a>
            <button type="submit" form="form-instansi" style="background:linear-gradient(135deg,var(--primary),#7c3aed); color:white; border:none; padding:10px 25px; border-radius:100px; font-weight:700; cursor:pointer; box-shadow:0 4px 12px rgba(79,70,229,0.3);">
                Simpan Instansi
            </button>
        </div>
    </div>
</div>

<?php $__env->startPush('scripts'); ?>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
    let map, marker;

    function initMap() {
        // Ambil nilai awal dari input (default Jakarta jika kosong)
        const initialLat = parseFloat(document.getElementById('inp-lat').value) || -6.200000;
        const initialLng = parseFloat(document.getElementById('inp-lng').value) || 106.816666;

        // Inisialisasi Peta
        map = L.map('map').setView([initialLat, initialLng], 15);

        // Tambah Gambar Peta (OpenStreetMap)
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        // Tambah Pin (Marker) yang bisa ditarik
        marker = L.marker([initialLat, initialLng], { draggable: true }).addTo(map);

        // Saat Pin digeser manual
        marker.on('dragend', function(e) {
            const pos = marker.getLatLng();
            updateFields(pos.lat, pos.lng);
        });

        // Saat Peta diklik (Pindahkan Pin ke situ)
        map.on('click', function(e) {
            marker.setLatLng(e.latlng);
            updateFields(e.latlng.lat, e.latlng.lng);
        });
    }

    // Fungsi update kolom input
    async function updateFields(lat, lng) {
        document.getElementById('inp-lat').value = lat.toFixed(7);
        document.getElementById('inp-lng').value = lng.toFixed(7);

        // Ambil nama alamat otomatis (Reverse Geocoding)
        try {
            const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&accept-language=id`);
            const data = await response.json();
            if (data.display_name) {
                document.getElementById('inp-alamat').value = data.display_name;
            }
        } catch (error) {
            console.warn("Gagal ambil alamat.");
        }
    }

    // Fungsi Cari Lokasi (Pencarian Pintar)
    async function searchLocation() {
        const query = document.getElementById('map-search-input').value;
        if (!query) return;

        const btn = document.querySelector('.map-search-btn');
        btn.innerText = '...';

        try {
            // Pencarian difokuskan ke Indonesia (countrycodes=id) agar lebih akurat
            const res = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&countrycodes=id&limit=1`);
            const data = await res.json();

            if (data.length > 0) {
                const { lat, lon, display_name } = data[0];
                const newLat = parseFloat(lat);
                const newLon = parseFloat(lon);

                map.setView([newLat, newLon], 16);
                marker.setLatLng([newLat, newLon]);
                
                // Isi form otomatis
                document.getElementById('inp-lat').value = newLat.toFixed(7);
                document.getElementById('inp-lng').value = newLon.toFixed(7);
                document.getElementById('inp-alamat').value = display_name;
            } else {
                alert("Alamat tidak ditemukan. Coba ketik nama tempat yang lebih simpel (misal: SMAN 9 Depok).");
            }
        } catch (e) {
            alert("Koneksi bermasalah.");
        } finally {
            btn.innerText = 'Cari';
        }
    }

    // Fungsi GPS
    function getCurrentGPS() {
        if (!navigator.geolocation) return alert("Browser Anda tidak mendukung GPS");
        
        const btn = document.getElementById('btn-gps');
        btn.innerHTML = 'Sedang mencari posisi...';

        navigator.geolocation.getCurrentPosition(pos => {
            const lat = pos.coords.latitude;
            const lng = pos.coords.longitude;
            
            map.setView([lat, lng], 17);
            marker.setLatLng([lat, lng]);
            updateFields(lat, lng);
            
            btn.innerHTML = 'Dapatkan Lokasi GPS Saya';
        }, err => {
            alert("Gagal akses lokasi. Pastikan izin lokasi aktif di browser.");
            btn.innerHTML = 'Dapatkan Lokasi GPS Saya';
        });
    }

    window.onload = initMap;
</script>
<?php $__env->stopPush(); ?>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?><?php /**PATH C:\laragon\www\absen_gw\resources\views/admin/instansi/create.blade.php ENDPATH**/ ?>