@extends('agency.layouts.app')

@section('title', 'Marka & Logo')
@section('page_title', 'Marka & Logo')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/agency/css/site-studio.css') }}?v={{ filemtime(public_path('assets/agency/css/site-studio.css')) }}">
@endpush

@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'],
    ];
@endphp

@section('content')
<x-site-studio active="branding">
    <form id="sxBrandForm" enctype="multipart/form-data">
        <div class="sx-grid sx-grid--64">
            {{-- ── Sol: kimlik dosyaları ── --}}
            <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">
                                        @if($agency->logo)
                                            <img src="{{ asset('storage/' . $agency->logo) }}" alt="Logo">
                                        @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>
                                        @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">
                                        @if($agency->logo_dark_path)
                                            <img src="{{ asset('storage/' . $agency->logo_dark_path) }}" alt="Koyu zemin logo">
                                        @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>
                                        @endif
                                    </div>
                                </label>
                                <span class="sx-help d-flex align-items-center gap-2">
                                    Footer gibi koyu alanlarda kullanılır.
                                    @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>
                                    @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">
                                @if($agency->favicon_path)
                                    <img src="{{ asset('storage/' . $agency->favicon_path) }}" alt="Favicon" style="max-height:40px">
                                @else
                                    <span class="sx-drop__ph"><i class="fas fa-star"></i><small>32×32</small></span>
                                @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>
                            @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>
                            @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="{{ $primary }}">
                                    <input type="text" name="brand_primary" id="sxPrimaryHex" class="sx-input sx-input--mono"
                                           value="{{ $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="{{ $accent }}">
                                    <input type="text" name="brand_accent" id="sxAccentHex" class="sx-input sx-input--mono"
                                           value="{{ $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">
                            @foreach($presets as [$name, $presetPrimary, $presetAccent])
                                <button type="button" class="sx-chip" data-preset="{{ $presetPrimary }}|{{ $presetAccent }}">
                                    <span class="sx-swatch" style="background:{{ $presetPrimary }};width:12px;height:12px;pointer-events:none"></span>
                                    <span class="sx-swatch" style="background:{{ $presetAccent }};width:12px;height:12px;pointer-events:none"></span>
                                    {{ $name }}
                                </button>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Sağ: canlı önizleme ── --}}
            <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:{{ $primary }};--a:{{ $accent }}">
                            <div class="sx-mock__bar">
                                <span id="sxMockLogo">
                                    @if($agency->logo)
                                        <img src="{{ asset('storage/' . $agency->logo) }}" class="sx-mock__logo" alt="">
                                    @else
                                        <b style="font-size:.72rem;font-weight:800;color:var(--p)">{{ Str::limit($agency->name, 18) }}</b>
                                    @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">
                                    @if($agency->logo_dark_path)
                                        <img src="{{ asset('storage/' . $agency->logo_dark_path) }}" alt="">
                                    @elseif($agency->logo)
                                        <img src="{{ asset('storage/' . $agency->logo) }}" alt="">
                                    @else
                                        <b style="font-size:.66rem;color:#fff">{{ Str::limit($agency->name, 16) }}</b>
                                    @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>

        {{-- Silme bayrakları: dosya alanı boş bırakıldığında sunucuya niyet iletir --}}
        <input type="hidden" name="remove_logo_dark" id="sxRemoveLogoDark" value="0">
        <input type="hidden" name="remove_favicon" id="sxRemoveFavicon" value="0">
    </form>
</x-site-studio>
@endsection

@push('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', '{{ 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>
@endpush