<?php $__env->startSection('title', 'Kontak'); ?>

<?php $__env->startPush('scripts'); ?>
<script>
window.addEventListener('load', function() {
    if (typeof L === 'undefined') return;
    const lat = <?php echo e($contact->latitude ?? -3.85); ?>;
    const lng = <?php echo e($contact->longitude ?? 101.90); ?>;

    const map = L.map('contact-map', { center: [lat, lng], zoom: 15 });
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© <a href="https://openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors'
    }).addTo(map);

    const icon = L.divIcon({
        className: '',
        html: `<div style="width:36px;height:36px;border-radius:50%;background:#1E3A8A;border:3px solid white;box-shadow:0 2px 8px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;">
            <svg width="16" height="16" fill="white" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
        </div>`,
        iconSize: [36, 36],
        iconAnchor: [18, 36],
        popupAnchor: [0, -38],
    });

    L.marker([lat, lng], { icon })
     .addTo(map)
     .bindPopup('<strong style="color:#1E3A8A"><?php echo e($contact->nama_kantor); ?></strong>')
     .openPopup();

    setTimeout(function() { map.invalidateSize(); }, 200);
});
</script>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
<div class="bg-primary py-10">
    <div class="max-w-7xl mx-auto px-4">
        <h1 class="text-3xl font-bold text-white">Kontak & Lokasi</h1>
        <p class="text-blue-200 mt-2">Informasi kontak dan lokasi Kantor Desa Suka Baru</p>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
        
        <div>
            <h2 class="section-title"><?php echo e($contact->nama_kantor); ?></h2>
            <div class="section-divider"></div>

            <div class="space-y-4 mt-6">
                <?php if($contact->alamat): ?>
                <div class="flex items-start gap-4">
                    <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
                        <svg class="w-5 h-5 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/></svg>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-500 mb-0.5">Alamat</p>
                        <p class="text-gray-700"><?php echo e($contact->alamat); ?></p>
                    </div>
                </div>
                <?php endif; ?>

                <?php if($contact->telepon && !str_contains($contact->telepon, 'Belum')): ?>
                <div class="flex items-center gap-4">
                    <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
                        <svg class="w-5 h-5 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-500 mb-0.5">Telepon</p>
                        <a href="tel:<?php echo e($contact->telepon); ?>" class="text-secondary hover:underline"><?php echo e($contact->telepon); ?></a>
                    </div>
                </div>
                <?php endif; ?>

                <?php if($contact->whatsapp && !str_contains($contact->whatsapp, 'Belum')): ?>
                <div class="flex items-center gap-4">
                    <div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0">
                        <svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884z"/></svg>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-500 mb-0.5">WhatsApp</p>
                        <a href="<?php echo e($contact->whatsapp_url); ?>" target="_blank" class="text-green-600 hover:underline font-medium"><?php echo e($contact->whatsapp); ?> — Hubungi via WA</a>
                    </div>
                </div>
                <?php endif; ?>

                <?php if($contact->email && !str_contains($contact->email, 'Belum')): ?>
                <div class="flex items-center gap-4">
                    <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
                        <svg class="w-5 h-5 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-500 mb-0.5">Email</p>
                        <a href="mailto:<?php echo e($contact->email); ?>" class="text-secondary hover:underline"><?php echo e($contact->email); ?></a>
                    </div>
                </div>
                <?php endif; ?>

                <?php if($contact->jam_pelayanan): ?>
                <div class="flex items-center gap-4">
                    <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
                        <svg class="w-5 h-5 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-500 mb-0.5">Jam Pelayanan</p>
                        <p class="text-gray-700"><?php echo e($contact->jam_pelayanan); ?></p>
                    </div>
                </div>
                <?php endif; ?>
            </div>

            
            <?php if($contact->maps_url): ?>
            <div class="mt-8">
                <a href="<?php echo e($contact->maps_url); ?>" target="_blank" class="btn-primary">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/></svg>
                    Lihat Lokasi di Google Maps
                </a>
            </div>
            <?php endif; ?>
        </div>

        
        <div>
            <div class="shadow-lg border border-gray-200 rounded-2xl h-[280px] sm:h-[340px] relative">
                <div id="contact-map" class="h-full w-full rounded-2xl"></div>
            </div>
        </div>
    </div>
</div>


<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH F:\web Desa Suka Baru\website-desa-suka-baru\resources\views/public/kontak.blade.php ENDPATH**/ ?>