<?php $__env->startSection('title', 'Marka & Logo'); ?>
<?php $__env->startSection('page_title', 'Marka & Logo'); ?>

<?php $__env->startPush('styles'); ?>
<link rel="stylesheet" href="<?php echo e(asset('assets/agency/css/site-studio.css')); ?>?v=<?php echo e(filemtime(public_path('assets/agency/css/site-studio.css'))); ?>">
<?php $__env->stopPush(); ?>

<?php
    $primary = $agency->brand_colors['primary'] ?? '#0F4C81';
    $accent = $agency->brand_colors['accent'] ?? '#F2A33C';
    $presets = [
        ['Deniz', '#0F4C81', '#F2A33C'],
        ['Zeytin', '#20573F', '#D08C3B'],
        ['Bordo', '#7A1F3D', '#E0A458'],
        ['Gece', '#1F2937', '#3B82F6'],
        ['Turkuaz', '#0E7490', '#F97316'],
    ];
?>

<?php $__env->startSection('content'); ?>
<?php if (isset($component)) { $__componentOriginale052c64c7b3c9f790a2bfbf386a651ac = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginale052c64c7b3c9f790a2bfbf386a651ac = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.site-studio','data' => ['active' => 'branding']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('site-studio'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['active' => 'branding']); ?>
    <form id="sxBrandForm" enctype="multipart/form-data">
        <div class="sx-grid sx-grid--64">
            
            <div class="sx-stack">
                <div class="sx-card">
                    <div class="sx-card__top">
                        <span class="sx-card__t"><i class="fas fa-image"></i> Logo</span>
                        <span class="sx-card__hint">PNG / SVG · en fazla 4 MB</span>
                    </div>
                    <div class="sx-card__body">
                        <div class="sx-grid sx-grid--2">
                            <div class="sx-field">
                                <span>Açık zemin</span>
                                <label class="sx-drop" data-slot="logo">
                                    <input type="file" name="logo" accept="image/*">
                                    <div class="sx-drop__view">
                                        <?php if($agency->logo): ?>
                                            <img src="<?php echo e(asset('storage/' . $agency->logo)); ?>" alt="Logo">
                                        <?php else: ?>
                                            <span class="sx-drop__ph">
                                                <i class="fas fa-arrow-up-from-bracket"></i>
                                                <span>Logo yükleyin</span>
                                                <small>Sürükleyip bırakın veya tıklayın</small>
                                            </span>
                                        <?php endif; ?>
                                    </div>
                                </label>
                                <span class="sx-help">Üst menüde (beyaz zeminde) kullanılır.</span>
                            </div>

                            <div class="sx-field">
                                <span>Koyu zemin</span>
                                <label class="sx-drop sx-drop--dark" data-slot="logo_dark">
                                    <input type="file" name="logo_dark" accept="image/*">
                                    <div class="sx-drop__view">
                                        <?php if($agency->logo_dark_path): ?>
                                            <img src="<?php echo e(asset('storage/' . $agency->logo_dark_path)); ?>" alt="Koyu zemin logo">
                                        <?php else: ?>
                                            <span class="sx-drop__ph">
                                                <i class="fas fa-arrow-up-from-bracket"></i>
                                                <span>İsteğe bağlı</span>
                                                <small>Yüklenmezse açık zemin logosu kullanılır</small>
                                            </span>
                                        <?php endif; ?>
                                    </div>
                                </label>
                                <span class="sx-help d-flex align-items-center gap-2">
                                    Footer gibi koyu alanlarda kullanılır.
                                    <?php if($agency->logo_dark_path): ?>
                                        <button type="button" class="sx-chip sx-chip--danger" data-clear="logo_dark">
                                            <i class="fas fa-trash"></i> Kaldır
                                        </button>
                                    <?php endif; ?>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="sx-card">
                    <div class="sx-card__top">
                        <span class="sx-card__t"><i class="fas fa-bookmark"></i> Favicon</span>
                        <span class="sx-card__hint">PNG / ICO / SVG · 1 MB</span>
                    </div>
                    <div class="sx-card__body d-flex gap-3 align-items-start flex-wrap">
                        <label class="sx-drop sx-drop--sq" data-slot="favicon" style="width:120px;flex:none">
                            <input type="file" name="favicon" accept=".png,.ico,.svg">
                            <div class="sx-drop__view">
                                <?php if($agency->favicon_path): ?>
                                    <img src="<?php echo e(asset('storage/' . $agency->favicon_path)); ?>" alt="Favicon" style="max-height:40px">
                                <?php else: ?>
                                    <span class="sx-drop__ph"><i class="fas fa-star"></i><small>32×32</small></span>
                                <?php endif; ?>
                            </div>
                        </label>
                        <div class="sx-field" style="flex:1;min-width:220px">
                            <span>Nerede görünür?</span>
                            <span class="sx-help">
                                Tarayıcı sekmesinde, yer imlerinde ve telefon ana ekranına eklendiğinde sitenizin simgesi olur.
                                Kare, sade ve küçük boyutta okunaklı bir görsel seçin.
                            </span>
                            <?php if($agency->favicon_path): ?>
                                <div class="mt-2">
                                    <button type="button" class="sx-chip sx-chip--danger" data-clear="favicon">
                                        <i class="fas fa-trash"></i> Kaldır
                                    </button>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>

                <div class="sx-card">
                    <div class="sx-card__top">
                        <span class="sx-card__t"><i class="fas fa-palette"></i> Marka Renkleri</span>
                    </div>
                    <div class="sx-card__body">
                        <div class="sx-grid sx-grid--2">
                            <div class="sx-field">
                                <span>Ana renk</span>
                                <div class="sx-color">
                                    <input type="color" id="sxPrimaryPick" value="<?php echo e($primary); ?>">
                                    <input type="text" name="brand_primary" id="sxPrimaryHex" class="sx-input sx-input--mono"
                                           value="<?php echo e($primary); ?>" pattern="^#[0-9A-Fa-f]{6}$" maxlength="7">
                                </div>
                                <span class="sx-help">Başlıklar, arama bandı ve bağlantılar.</span>
                            </div>
                            <div class="sx-field">
                                <span>Vurgu rengi</span>
                                <div class="sx-color">
                                    <input type="color" id="sxAccentPick" value="<?php echo e($accent); ?>">
                                    <input type="text" name="brand_accent" id="sxAccentHex" class="sx-input sx-input--mono"
                                           value="<?php echo e($accent); ?>" pattern="^#[0-9A-Fa-f]{6}$" maxlength="7">
                                </div>
                                <span class="sx-help">Rozetler, fiyat vurguları ve düğmeler.</span>
                            </div>
                        </div>

                        <div class="sx-sec-h" style="padding-left:0">
                            <i class="fas fa-swatchbook"></i><span>Hazır paletler</span>
                        </div>
                        <div class="d-flex flex-wrap gap-1">
                            <?php $__currentLoopData = $presets; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as [$name, $presetPrimary, $presetAccent]): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <button type="button" class="sx-chip" data-preset="<?php echo e($presetPrimary); ?>|<?php echo e($presetAccent); ?>">
                                    <span class="sx-swatch" style="background:<?php echo e($presetPrimary); ?>;width:12px;height:12px;pointer-events:none"></span>
                                    <span class="sx-swatch" style="background:<?php echo e($presetAccent); ?>;width:12px;height:12px;pointer-events:none"></span>
                                    <?php echo e($name); ?>

                                </button>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>
                </div>
            </div>

            
            <div class="sx-stack" style="position:sticky;top:1rem">
                <div class="sx-card">
                    <div class="sx-card__top">
                        <span class="sx-card__t"><i class="fas fa-eye"></i> Önizleme</span>
                        <span class="sx-card__hint">canlı</span>
                    </div>
                    <div class="sx-card__body">
                        <div class="sx-mock" id="sxMock" style="--p:<?php echo e($primary); ?>;--a:<?php echo e($accent); ?>">
                            <div class="sx-mock__bar">
                                <span id="sxMockLogo">
                                    <?php if($agency->logo): ?>
                                        <img src="<?php echo e(asset('storage/' . $agency->logo)); ?>" class="sx-mock__logo" alt="">
                                    <?php else: ?>
                                        <b style="font-size:.72rem;font-weight:800;color:var(--p)"><?php echo e(Str::limit($agency->name, 18)); ?></b>
                                    <?php endif; ?>
                                </span>
                                <span class="sx-mock__nav"><i></i><i></i><i></i></span>
                            </div>
                            <div class="sx-mock__hero" style="background:linear-gradient(160deg, color-mix(in srgb, var(--p) 10%, #fff), #fff)">
                                <span class="sx-mock__h" style="background:var(--p)"></span>
                                <span class="sx-mock__p"></span>
                                <span class="sx-mock__p" style="width:56%"></span>
                                <span class="sx-mock__cta" style="background:var(--a)">Turları İncele</span>
                            </div>
                            <div class="sx-mock__foot" style="background:var(--p)">
                                <span id="sxMockLogoDark">
                                    <?php if($agency->logo_dark_path): ?>
                                        <img src="<?php echo e(asset('storage/' . $agency->logo_dark_path)); ?>" alt="">
                                    <?php elseif($agency->logo): ?>
                                        <img src="<?php echo e(asset('storage/' . $agency->logo)); ?>" alt="">
                                    <?php else: ?>
                                        <b style="font-size:.66rem;color:#fff"><?php echo e(Str::limit($agency->name, 16)); ?></b>
                                    <?php endif; ?>
                                </span>
                                <i></i><i></i>
                            </div>
                        </div>
                    </div>
                    <div class="sx-card__note">
                        <i class="fas fa-circle-info"></i>
                        <span>Renkler yalnızca web sitenizi etkiler; yönetim paneli teması değişmez.</span>
                    </div>
                </div>

                <div class="sx-card">
                    <div class="sx-card__body d-flex align-items-center gap-2 flex-wrap">
                        <button type="submit" class="sx-btn">
                            <i class="fas fa-floppy-disk"></i> Değişiklikleri Kaydet
                        </button>
                        <span class="sx-help" style="flex:1;min-width:160px">
                            Kaydettikten sonra sitede görünmesi için yayınlamanız gerekir.
                        </span>
                    </div>
                </div>
            </div>
        </div>

        
        <input type="hidden" name="remove_logo_dark" id="sxRemoveLogoDark" value="0">
        <input type="hidden" name="remove_favicon" id="sxRemoveFavicon" value="0">
    </form>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginale052c64c7b3c9f790a2bfbf386a651ac)): ?>
<?php $attributes = $__attributesOriginale052c64c7b3c9f790a2bfbf386a651ac; ?>
<?php unset($__attributesOriginale052c64c7b3c9f790a2bfbf386a651ac); ?>
<?php endif; ?>
<?php if (isset($__componentOriginale052c64c7b3c9f790a2bfbf386a651ac)): ?>
<?php $component = $__componentOriginale052c64c7b3c9f790a2bfbf386a651ac; ?>
<?php unset($__componentOriginale052c64c7b3c9f790a2bfbf386a651ac); ?>
<?php endif; ?>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
(function () {
    'use strict';

    const mock = document.getElementById('sxMock');

    /* ── Dosya seçimi: anlık önizleme + maket güncelleme ── */
    document.querySelectorAll('.sx-drop').forEach((drop) => {
        const input = drop.querySelector('input[type="file"]');
        const view = drop.querySelector('.sx-drop__view');

        const paint = (file) => {
            const url = URL.createObjectURL(file);
            view.innerHTML = '<img src="' + url + '" alt="">';
            if (drop.dataset.slot === 'logo') {
                document.getElementById('sxMockLogo').innerHTML = '<img src="' + url + '" class="sx-mock__logo" alt="">';
                document.getElementById('sxRemoveLogoDark').value = '0';
            }
            if (drop.dataset.slot === 'logo_dark') {
                document.getElementById('sxMockLogoDark').innerHTML = '<img src="' + url + '" alt="">';
                document.getElementById('sxRemoveLogoDark').value = '0';
            }
            if (drop.dataset.slot === 'favicon') document.getElementById('sxRemoveFavicon').value = '0';
        };

        input.addEventListener('change', () => { if (input.files[0]) paint(input.files[0]); });

        ['dragenter', 'dragover'].forEach((type) => drop.addEventListener(type, (e) => {
            e.preventDefault(); drop.classList.add('over');
        }));
        ['dragleave', 'drop'].forEach((type) => drop.addEventListener(type, () => drop.classList.remove('over')));
        drop.addEventListener('drop', (e) => {
            e.preventDefault();
            const file = e.dataTransfer.files[0];
            if (!file) return;
            const transfer = new DataTransfer();
            transfer.items.add(file);
            input.files = transfer.files;
            paint(file);
        });
    });

    /* ── Kaldır: dosyayı temizler, sunucuya silme bayrağı gönderir ── */
    document.querySelectorAll('[data-clear]').forEach((button) => {
        button.addEventListener('click', () => {
            const slot = button.dataset.clear;
            const drop = document.querySelector('.sx-drop[data-slot="' + slot + '"]');
            drop.querySelector('input[type="file"]').value = '';
            drop.querySelector('.sx-drop__view').innerHTML =
                '<span class="sx-drop__ph"><i class="fas fa-trash-can"></i><small>Kaydedince silinecek</small></span>';
            if (slot === 'logo_dark') {
                document.getElementById('sxRemoveLogoDark').value = '1';
                const fallback = document.querySelector('.sx-drop[data-slot="logo"] img');
                document.getElementById('sxMockLogoDark').innerHTML = fallback ? '<img src="' + fallback.src + '" alt="">' : '';
            }
            if (slot === 'favicon') document.getElementById('sxRemoveFavicon').value = '1';
            button.remove();
        });
    });

    /* ── Renkler: seçici ↔ hex ↔ maket üçlü senkron ── */
    function bindColor(pickId, hexId, cssVar) {
        const pick = document.getElementById(pickId);
        const hex = document.getElementById(hexId);
        const apply = (value) => mock.style.setProperty(cssVar, value);

        pick.addEventListener('input', () => { hex.value = pick.value.toUpperCase(); apply(pick.value); });
        hex.addEventListener('input', () => {
            if (/^#[0-9A-Fa-f]{6}$/.test(hex.value)) { pick.value = hex.value; apply(hex.value); }
        });
        return (value) => { pick.value = value; hex.value = value.toUpperCase(); apply(value); };
    }
    const setPrimary = bindColor('sxPrimaryPick', 'sxPrimaryHex', '--p');
    const setAccent = bindColor('sxAccentPick', 'sxAccentHex', '--a');

    document.querySelectorAll('[data-preset]').forEach((button) => {
        button.addEventListener('click', () => {
            const [primary, accent] = button.dataset.preset.split('|');
            setPrimary(primary);
            setAccent(accent);
        });
    });

    /* ── Kaydet ── */
    document.getElementById('sxBrandForm').addEventListener('submit', async (event) => {
        event.preventDefault();
        const button = event.submitter;
        const original = button ? button.innerHTML : '';
        if (button) { button.disabled = true; button.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> Kaydediliyor'; }
        try {
            const data = await sxApi('POST', '<?php echo e(route('agency.site.branding.update')); ?>', new FormData(event.target));
            appToast({ icon: 'success', title: data.message });
            setTimeout(() => window.location.reload(), 700);
        } catch (error) {
            appToast({ icon: 'error', title: error.message });
            if (button) { button.disabled = false; button.innerHTML = original; }
        }
    });
})();
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('agency.layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\acente\resources\views/agency/site/branding.blade.php ENDPATH**/ ?>