<?php $__env->startSection('title', 'Pengaturan Toko'); ?>
<?php $__env->startSection('page_title', 'Konfigurasi Sistem'); ?>

<?php $__env->startSection('content'); ?>
<div class="row justify-content-center">
    <div class="col-lg-10">
        
        <div class="text-center mb-5 animate-pro">
            <h2 class="fw-800 text-dark mb-2">Pusat Konfigurasi Toko</h2>
            <p class="text-muted fs-14">Kelola identitas, kontak, dan alamat operasional toko dari satu tempat.</p>
        </div>

        
        <div class="row g-4 mb-5">
            <div class="col-md-6">
                <div class="card border-0 shadow-sm p-4 d-flex flex-row align-items-center gap-4" style="border-radius: 30px; background: #fff;">
                    <div class="icon-square bg-warning bg-opacity-10 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px; border-radius: 20px;">
                        <i class="ti ti-alarm fs-1 text-warning"></i>
                    </div>
                    <div>
                        <span class="text-muted small fw-800 letter-spacing-1 text-uppercase">Jam Operasional</span>
                        <h4 class="fw-800 text-dark mb-0 mt-1"><?php echo e($settings['shop_hours'] ?? 'Senin - Sabtu: 09:00 - 17:00'); ?></h4>
                        <span class="text-muted fs-14"><?php echo e($settings['shop_hours_note'] ?? 'Waktu Indonesia Barat'); ?></span>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card border-0 shadow-sm p-4 d-flex flex-row align-items-center gap-4" style="border-radius: 30px; background: #fff;">
                    <div class="icon-square bg-primary bg-opacity-10 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px; border-radius: 20px;">
                        <i class="ti ti-map-pin fs-1 text-primary"></i>
                    </div>
                    <div>
                        <span class="text-muted small fw-800 letter-spacing-1 text-uppercase">Lokasi Workshop</span>
                        <h4 class="fw-800 text-dark mb-0 mt-1"><?php echo e($settings['shop_address_city'] ?? 'Depok, Jawa Barat'); ?></h4>
                        <span class="text-muted fs-14"><?php echo e($settings['shop_address_country'] ?? 'Indonesia'); ?></span>
                    </div>
                </div>
            </div>
        </div>

        <form action="<?php echo e(route('settings.update')); ?>" method="POST">
            <?php echo csrf_field(); ?>
            
            <div class="row g-4">
                
                <input type="hidden" name="shop_lat" id="shop_lat" value="<?php echo e($settings['shop_lat'] ?? -6.200000); ?>">
                <input type="hidden" name="shop_lng" id="shop_lng" value="<?php echo e($settings['shop_lng'] ?? 106.816666); ?>">

                
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm h-100" style="border-radius: 24px;">
                        <div class="card-header bg-white border-0 pt-4 px-4 d-flex align-items-center">
                            <div class="p-2 bg-primary bg-opacity-10 text-primary rounded-3 me-3">
                                <i class="ti ti-building-store fs-5"></i>
                            </div>
                            <h6 class="fw-800 mb-0">Identitas Toko</h6>
                        </div>
                        <div class="card-body p-4">
                            <div class="mb-4">
                                <label class="form-label small fw-800 text-muted">NAMA TOKO</label>
                                <div class="input-group bg-light rounded-3 px-3 border-0">
                                    <span class="input-group-text bg-transparent border-0 text-muted"><i class="ti ti-signature fs-5"></i></span>
                                    <input type="text" name="shop_name" class="form-control bg-transparent border-0 py-3 fs-14 fw-700" 
                                           value="<?php echo e($settings['shop_name'] ?? 'PrintPro'); ?>" placeholder="Contoh: Jasa Printer Depok">
                                </div>
                            </div>

                            <div class="mb-0">
                                <label class="form-label small fw-800 text-muted">EMAIL OPERASIONAL</label>
                                <div class="input-group bg-light rounded-3 px-3 border-0">
                                    <span class="input-group-text bg-transparent border-0 text-muted"><i class="ti ti-mail-opened fs-5"></i></span>
                                    <input type="email" name="shop_email" class="form-control bg-transparent border-0 py-3 fs-14 fw-700" 
                                           value="<?php echo e($settings['shop_email'] ?? 'admin@gmail.com'); ?>" placeholder="email@toko.com">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm h-100" style="border-radius: 24px;">
                        <div class="card-header bg-white border-0 pt-4 px-4 d-flex align-items-center">
                            <div class="p-2 bg-warning bg-opacity-10 text-warning rounded-3 me-3">
                                <i class="ti ti-alarm fs-5"></i>
                            </div>
                            <h6 class="fw-800 mb-0">Waktu Operasional</h6>
                        </div>
                        <div class="card-body p-4">
                            <div class="mb-4">
                                <label class="form-label small fw-800 text-muted">JADWAL HARI (CO: SENIN - SABTU)</label>
                                <div class="input-group bg-light rounded-3 px-3 border-0 mb-3">
                                    <span class="input-group-text bg-transparent border-0 text-muted"><i class="ti ti-calendar-event fs-5"></i></span>
                                    <input type="text" id="shop_days" name="shop_days" class="form-control bg-transparent border-0 py-3 fs-14 fw-700" 
                                           value="<?php echo e(explode(':', $settings['shop_hours'] ?? 'Senin - Sabtu: 09:00 - 17:00')[0] ?? 'Senin - Sabtu'); ?>" placeholder="Senin - Sabtu">
                                </div>
                                
                                <div class="row g-3">
                                    <div class="col-6">
                                        <label class="form-label small fw-800 text-muted">JAM BUKA</label>
                                        <div class="input-group bg-light rounded-3 px-3 border-0">
                                            <input type="time" id="shop_open_time" name="shop_open_time" class="form-control bg-transparent border-0 py-3 fs-14 fw-700" 
                                                   value="<?php echo e($settings['shop_open_time'] ?? '09:00'); ?>">
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label small fw-800 text-muted">JAM TUTUP</label>
                                        <div class="input-group bg-light rounded-3 px-3 border-0">
                                            <input type="time" id="shop_close_time" name="shop_close_time" class="form-control bg-transparent border-0 py-3 fs-14 fw-700" 
                                                   value="<?php echo e($settings['shop_close_time'] ?? '17:00'); ?>">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <label class="form-label small fw-800 text-muted">PREVIEW TEKS TAMPILAN (OTOMATIS)</label>
                                <div class="input-group bg-soft-light rounded-3 px-3 border border-warning border-opacity-25">
                                    <span class="input-group-text bg-transparent border-0 text-warning"><i class="ti ti-eye fs-5"></i></span>
                                    <input type="text" id="shop_hours" name="shop_hours" class="form-control bg-transparent border-0 py-3 fs-14 fw-800 text-warning" 
                                           value="<?php echo e($settings['shop_hours'] ?? 'Senin - Sabtu: 09:00 - 17:00'); ?>" readonly>
                                </div>
                            </div>

                            <div class="mb-0">
                                <label class="form-label small fw-800 text-muted">KETERANGAN ZONA WAKTU</label>
                                <div class="input-group bg-light rounded-3 px-3 border-0">
                                    <span class="input-group-text bg-transparent border-0 text-muted"><i class="ti ti-world fs-5"></i></span>
                                    <input type="text" name="shop_hours_note" class="form-control bg-transparent border-0 py-3 fs-14 fw-700" 
                                           value="<?php echo e($settings['shop_hours_note'] ?? 'Waktu Indonesia Barat'); ?>" placeholder="Contoh: Waktu Indonesia Barat">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm h-100" style="border-radius: 24px;">
                        <div class="card-header bg-white border-0 pt-4 px-4 d-flex align-items-center">
                            <div class="p-2 bg-success bg-opacity-10 text-success rounded-3 me-3">
                                <i class="ti ti-brand-whatsapp fs-5"></i>
                            </div>
                            <h6 class="fw-800 mb-0">Kontak & WhatsApp</h6>
                        </div>
                        <div class="card-body p-4">
                            <div class="mb-4">
                                <label class="form-label small fw-800 text-muted">NOMOR WA (TANPA 0, MULAI 8...)</label>
                                <div class="input-group bg-light rounded-3 px-3 border-0">
                                    <span class="input-group-text bg-transparent border-0 text-muted fw-800">+62</span>
                                    <input type="text" name="shop_wa_number" class="form-control bg-transparent border-0 py-3 fs-14 fw-700" 
                                           value="<?php echo e($settings['shop_wa_number'] ?? '81234567890'); ?>" placeholder="81234567890">
                                </div>
                            </div>

                            <div class="mb-0">
                                <label class="form-label small fw-800 text-muted">TELEPON KANTOR / TOKO</label>
                                <div class="input-group bg-light rounded-3 px-3 border-0">
                                    <span class="input-group-text bg-transparent border-0 text-muted"><i class="ti ti-phone fs-5"></i></span>
                                    <input type="text" name="shop_phone" class="form-control bg-transparent border-0 py-3 fs-14 fw-700" 
                                           value="<?php echo e($settings['shop_phone'] ?? '(021) 1234567'); ?>" placeholder="(021) 1234567">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm h-100" style="border-radius: 24px;">
                        <div class="card-header bg-white border-0 pt-4 px-4 d-flex align-items-center">
                            <div class="p-2 bg-danger bg-opacity-10 text-danger rounded-3 me-3">
                                <i class="ti ti-brand-instagram fs-5"></i>
                            </div>
                            <h6 class="fw-800 mb-0">Koneksi Media Sosial</h6>
                        </div>
                        <div class="card-body p-4">
                            <div class="mb-4">
                                <label class="form-label small fw-800 text-muted">USERNAME INSTAGRAM</label>
                                <div class="input-group bg-light rounded-3 px-3 border-0">
                                    <span class="input-group-text bg-transparent border-0 text-muted"><i class="ti ti-brand-instagram fs-5"></i></span>
                                    <input type="text" name="shop_ig" class="form-control bg-transparent border-0 py-3 fs-14 fw-700" 
                                           value="<?php echo e($settings['shop_ig'] ?? '@jasa_printer_id'); ?>" placeholder="@username">
                                </div>
                            </div>

                            <div class="mb-0">
                                <label class="form-label small fw-800 text-muted">USERNAME TIKTOK</label>
                                <div class="input-group bg-light rounded-3 px-3 border-0">
                                    <span class="input-group-text bg-transparent border-0 text-muted"><i class="ti ti-brand-tiktok fs-5"></i></span>
                                    <input type="text" name="shop_tiktok" class="form-control bg-transparent border-0 py-3 fs-14 fw-700" 
                                           value="<?php echo e($settings['shop_tiktok'] ?? '@jasa_printer.official'); ?>" placeholder="@username">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                
                <div class="col-md-12">
                    <div class="card border-0 shadow-sm" style="border-radius: 24px;">
                        <div class="card-header bg-white border-0 pt-4 px-4 d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <div class="p-2 bg-primary bg-opacity-10 text-primary rounded-3 me-3">
                                    <i class="ti ti-map-2 fs-5"></i>
                                </div>
                                <h6 class="fw-800 mb-0">Lokasi Workshop & Alamat</h6>
                            </div>
                        </div>
                        <div class="card-body p-4">
                            <div class="row g-4">
                                <div class="col-md-7">
                                    <div class="input-group mb-3 border rounded-4 overflow-hidden shadow-sm bg-white">
                                        <span class="input-group-text bg-transparent border-0 px-3"><i class="ti ti-search opacity-50"></i></span>
                                        <input type="text" id="map-search" class="form-control border-0 py-3 fs-14 fw-600" placeholder="Tulis nama jalan atau kota...">
                                        <button class="btn btn-warning fw-800 text-dark px-4 ms-2 rounded-3" type="button" id="btn-search-map">Temukan Lokasi</button>
                                    </div>
                                    <div id="settings-map" class="rounded-4 border shadow-sm" style="height: 450px; z-index: 1;"></div>
                                </div>
                                <div class="col-md-5">
                                    <div class="mb-4">
                                        <label class="form-label small fw-800 text-muted">ALAMAT LENGKAP DETAIL</label>
                                        <textarea name="shop_address" id="shop_address" class="form-control bg-light border-0 py-3 fs-14 fw-700" 
                                                  rows="5" placeholder="Alamat akan terisi otomatis saat Anda klik di peta..." 
                                                  style="border-radius: 16px;"><?php echo e($settings['shop_address'] ?? ''); ?></textarea>
                                    </div>

                                    <div class="row g-3 mb-4">
                                        <div class="col-6">
                                            <label class="form-label small fw-800 text-muted">KOTA / PROVINSI</label>
                                            <input type="text" name="shop_address_city" class="form-control bg-light border-0 py-3 fs-14 fw-700" 
                                                   value="<?php echo e($settings['shop_address_city'] ?? 'Depok, Jawa Barat'); ?>" placeholder="Depok, Jawa Barat" style="border-radius: 12px;">
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label small fw-800 text-muted">NEGARA</label>
                                            <input type="text" name="shop_address_country" class="form-control bg-light border-0 py-3 fs-14 fw-700" 
                                                   value="<?php echo e($settings['shop_address_country'] ?? 'Indonesia'); ?>" placeholder="Indonesia" style="border-radius: 12px;">
                                        </div>
                                    </div>

                                    <div class="mb-4">
                                        <label class="form-label small fw-800 text-muted">LINK GOOGLE MAPS (SHARE)</label>
                                        <div class="input-group bg-light rounded-3 px-3 border-0">
                                            <span class="input-group-text bg-transparent border-0 text-muted"><i class="ti ti-link fs-5"></i></span>
                                            <input type="text" name="shop_maps_link" id="shop_maps_link" class="form-control bg-transparent border-0 py-3 fs-14 fw-700" 
                                                   value="<?php echo e($settings['shop_maps_link'] ?? ''); ?>" placeholder="https://goo.gl/maps/...">
                                        </div>
                                    </div>

                                    <div class="mb-0">
                                        <label class="form-label small fw-800 text-muted">KODE ARSIP MAPS (EMBED)</label>
                                        <textarea name="shop_maps_embed" class="form-control bg-light border-0 py-3 fs-12 fw-600" 
                                                  rows="3" placeholder="Paste <iframe> dari Google Maps di sini..." 
                                                  style="border-radius: 12px;"><?php echo e($settings['shop_maps_embed'] ?? ''); ?></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            
            <div class="mt-5 d-flex gap-3 pb-5">
                <button type="submit" class="btn btn-primary px-5 py-3 rounded-pill fw-800 shadow-pro">
                    <i class="ti ti-device-floppy me-2"></i> Simpan Konfigurasi
                </button>
                <button type="reset" class="btn btn-light px-5 py-3 rounded-pill fw-800">
                    Batalkan Perubahan
                </button>
            </div>
        </form>
    </div>
</div>


<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var defaultLat = <?php echo e($settings['shop_lat'] ?? -6.200000); ?>;
    var defaultLng = <?php echo e($settings['shop_lng'] ?? 106.816666); ?>;
    
    var map = L.map('settings-map').setView([defaultLat, defaultLng], 13);
    
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    var marker = L.marker([defaultLat, defaultLng], {draggable: true}).addTo(map);

    function updateAddress(lat, lng) {
        // Update hidden inputs
        document.getElementById('shop_lat').value = lat;
        document.getElementById('shop_lng').value = lng;

        fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`)
            .then(res => res.json())
            .then(data => {
                if (data.display_name) {
                    document.getElementById('shop_address').value = data.display_name;
                    
                    let addr = data.address;
                    let city = addr.city || addr.town || addr.regency || addr.municipality || addr.suburb || addr.village || '';
                    let state = addr.state || addr.region || '';
                    let country = addr.country || 'Indonesia';
                    
                    let cityProvince = "";
                    if (city && state) {
                        cityProvince = city + ', ' + state;
                    } else {
                        cityProvince = city || state || '';
                    }

                    document.getElementsByName('shop_address_city')[0].value = cityProvince;
                    document.getElementsByName('shop_address_country')[0].value = country;
                    
                    // Update Google Maps link
                    document.getElementById('shop_maps_link').value = `https://www.google.com/maps?q=${lat},${lng}`;
                }
            });
    }

    map.on('click', function(e) {
        var lat = e.latlng.lat;
        var lng = e.latlng.lng;
        marker.setLatLng([lat, lng]);
        updateAddress(lat, lng);
    });

    marker.on('dragend', function(e) {
        var lat = marker.getLatLng().lat;
        var lng = marker.getLatLng().lng;
        updateAddress(lat, lng);
    });

    document.getElementById('btn-search-map').addEventListener('click', function() {
        var query = document.getElementById('map-search').value;
        if (!query) return;
        fetch(`https://nominatim.openstreetmap.org/search?format=json&addressdetails=1&q=${query}`)
            .then(res => res.json())
            .then(data => {
                if (data.length > 0) {
                    var lat = data[0].lat;
                    var lon = data[0].lon;
                    map.setView([lat, lon], 16);
                    marker.setLatLng([lat, lon]);
                    
                    // Trigger manual update
                    updateAddress(lat, lon);
                } else {
                    alert("Lokasi tidak ditemukan!");
                }
            });
    });

    // 6. Sinkronisasi Jam Operasional
    const shopDays = document.getElementById('shop_days');
    const shopOpen = document.getElementById('shop_open_time');
    const shopClose = document.getElementById('shop_close_time');
    const shopHoursPreview = document.getElementById('shop_hours');

    function syncHours() {
        let days = shopDays.value || 'Setiap Hari';
        let open = shopOpen.value || '09:00';
        let close = shopClose.value || '17:00';
        shopHoursPreview.value = `${days}: ${open} - ${close}`;
    }

    [shopDays, shopOpen, shopClose].forEach(el => {
        el.addEventListener('input', syncHours);
    });
});
</script>

<style>
    .micro-label { font-size: 10px; font-weight: 800; color: #94a3b8; letter-spacing: 1px; margin-bottom: 4px; }
    .shadow-pro { box-shadow: 0 10px 25px var(--pro-primary-glow); }
    .input-group:focus-within { background: #fff !important; box-shadow: 0 0 0 2px var(--pro-primary-glow); }
    .form-control:focus { color: var(--pro-primary); }
</style>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layout.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\jasa_printer\resources\views/admin/settings/index.blade.php ENDPATH**/ ?>