@extends('admin.layout')

@section('title', 'Sidebar Yönetimi')

@push('styles')
<style>
    .sb-page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 28px;
        flex-wrap: wrap;
        gap: 16px;
    }
    .sb-page-header h1 {
        font-size: 24px;
        font-weight: 700;
        color: #0f172a;
        margin: 0;
    }
    .sb-page-header p {
        font-size: 14px;
        color: #64748b;
        margin: 4px 0 0;
    }

    .sb-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 20px;
    }

    .sb-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 24px;
        transition: box-shadow 0.2s;
        position: relative;
        overflow: hidden;
    }
    .sb-card:hover {
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }
    .sb-card.disabled {
        opacity: 0.65;
    }
    .sb-card-accent {
        position: absolute;
        top: 0; left: 0;
        width: 4px; height: 100%;
        background: #3b82f6;
        border-radius: 14px 0 0 14px;
    }
    .sb-card.disabled .sb-card-accent {
        background: #94a3b8;
    }

    .sb-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 16px;
    }
    .sb-module-name {
        font-size: 16px;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 4px;
    }
    .sb-module-key {
        font-size: 12px;
        color: #94a3b8;
        font-family: monospace;
    }

    .sb-status-badge {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }
    .sb-status-badge.on {
        background: #dcfce7;
        color: #166534;
    }
    .sb-status-badge.off {
        background: #f1f5f9;
        color: #64748b;
    }

    .sb-toggles {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 18px;
    }
    .sb-toggle-pill {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 500;
        background: #f1f5f9;
        color: #64748b;
    }
    .sb-toggle-pill.active {
        background: #eff6ff;
        color: #1d4ed8;
    }
    .sb-toggle-pill .dot {
        width: 7px; height: 7px;
        border-radius: 50%;
        background: currentColor;
    }

    .sb-custom-html-indicator {
        font-size: 12px;
        color: #7c3aed;
        background: #f5f3ff;
        border-radius: 6px;
        padding: 4px 10px;
        margin-bottom: 16px;
        display: inline-block;
    }

    .sb-card-footer {
        display: flex;
        gap: 8px;
    }
    .sb-btn {
        padding: 7px 16px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        border: none;
        transition: all 0.15s;
    }
    .sb-btn-primary {
        background: #1d4ed8;
        color: white;
        flex: 1;
        text-align: center;
    }
    .sb-btn-primary:hover { background: #1e40af; color: white; }
    .sb-btn-danger {
        background: #fee2e2;
        color: #991b1b;
    }
    .sb-btn-danger:hover { background: #fecaca; }

    .sb-empty {
        text-align: center;
        padding: 60px 20px;
        color: #94a3b8;
    }
    .sb-empty svg {
        width: 48px; height: 48px;
        margin: 0 auto 16px;
        display: block;
    }

    .sb-alert {
        padding: 12px 18px;
        border-radius: 10px;
        margin-bottom: 24px;
        font-size: 14px;
        font-weight: 500;
    }
    .sb-alert-success {
        background: #dcfce7;
        color: #166534;
        border: 1px solid #bbf7d0;
    }
</style>
@endpush

@section('content')
<div class="sb-page-header">
    <div>
        <h1>📐 Sidebar Yönetimi</h1>
        <p>Sitenin tüm modüllerindeki sidebar widget'larını yönetin.</p>
    </div>
</div>

@if(session('success'))
    <div class="sb-alert sb-alert-success">✅ {{ session('success') }}</div>
@endif

@if($settings->isEmpty())
    <div class="sb-empty">
        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1 1 .03 2.798-1.414 2.798H4.213c-1.444 0-2.414-1.798-1.414-2.798L4.2 15.3"/>
        </svg>
        <p>Henüz sidebar ayarı bulunamadı.</p>
    </div>
@else
    <div class="sb-grid">
        @foreach($settings as $setting)
        <div class="sb-card {{ !$setting->is_enabled ? 'disabled' : '' }}">
            <div class="sb-card-accent"></div>

            <div class="sb-card-header">
                <div>
                    <div class="sb-module-name">{{ $setting->label }}</div>
                    <div class="sb-module-key">module: {{ $setting->module }}</div>
                </div>
                <span class="sb-status-badge {{ $setting->is_enabled ? 'on' : 'off' }}">
                    {{ $setting->is_enabled ? '✓ Aktif' : '✗ Kapalı' }}
                </span>
            </div>

            @if($setting->title)
                <div style="font-size:13px;color:#64748b;margin-bottom:14px;">
                    📌 Başlık: <strong>{{ $setting->title }}</strong>
                </div>
            @endif

            <div class="sb-toggles">
                <span class="sb-toggle-pill {{ $setting->show_search ? 'active' : '' }}">
                    <span class="dot"></span> Arama
                </span>
                <span class="sb-toggle-pill {{ $setting->show_categories ? 'active' : '' }}">
                    <span class="dot"></span> Kategoriler
                </span>
                <span class="sb-toggle-pill {{ $setting->show_user_widget ? 'active' : '' }}">
                    <span class="dot"></span> Kullanıcı
                </span>
                <span class="sb-toggle-pill {{ $setting->show_popular ? 'active' : '' }}">
                    <span class="dot"></span> Popüler
                </span>
            </div>

            @if($setting->custom_html)
                <div class="sb-custom-html-indicator">✏️ Özel HTML içeriği var</div>
            @endif

            <div class="sb-card-footer">
                <a href="{{ route('admin.sidebars.edit', $setting) }}" class="sb-btn sb-btn-primary">
                    ✏️ Düzenle
                </a>
                <form method="POST" action="{{ route('admin.sidebars.reset', $setting) }}"
                      onsubmit="return confirm('Varsayılanlara sıfırlanacak. Emin misiniz?')">
                    @csrf
                    @method('POST')
                    <button type="submit" class="sb-btn sb-btn-danger" title="Sıfırla">
                        ↺
                    </button>
                </form>
            </div>
        </div>
        @endforeach
    </div>
@endif
@endsection
