@extends('adminlte::page')
@section('title', 'Kategoriler')

@section('content')
<style>
:root { --primary: #2c3e50; --accent: #8e44ad; --l1: #8e44ad; --l2: #2980b9; --l3: #27ae60; }

.cat-header {
    background: linear-gradient(135deg, var(--primary), #4a235a);
    border-radius: 16px;
    color: white;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
}

/* ── Arama ──────────────────────────────────────────── */
.search-box {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    width: 280px;
    transition: border-color 0.2s;
}
.search-box:focus { border-color: var(--accent); outline: none; box-shadow: none; }

/* ── Kategori Ağacı ─────────────────────────────────── */
.cat-tree { }

.cat-row {
    display: flex;
    align-items: center;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    margin-bottom: 0.3rem;
    background: white;
    border: 2px solid #e9ecef;
    transition: all 0.15s;
    gap: 0.75rem;
}
.cat-row:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(142,68,173,0.1); }

/* Seviye girintileri */
.cat-row.level-1 { margin-left: 0; }
.cat-row.level-2 { margin-left: 2rem; border-color: #dce8f5; }
.cat-row.level-3 { margin-left: 4rem; border-color: #d4efdf; }

/* Sol çizgi bağlantısı */
.cat-row.level-2 { position: relative; }
.cat-row.level-2::before {
    content: '';
    position: absolute;
    left: -1.2rem;
    top: 50%;
    width: 1rem;
    height: 2px;
    background: #adb5bd;
}
.cat-row.level-3::before {
    content: '';
    position: absolute;
    left: -1.2rem;
    top: 50%;
    width: 1rem;
    height: 2px;
    background: #adb5bd;
}

/* Seviye rozeti */
.level-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    flex-shrink: 0;
    color: white;
    letter-spacing: 0.02em;
}
.level-dot.l1 { background: var(--l1); }
.level-dot.l2 { background: var(--l2); }
.level-dot.l3 { background: var(--l3); }

.cat-name {
    flex: 1;
    font-weight: 600;
    font-size: 0.95rem;
    color: #2c3e50;
}
.cat-row.level-2 .cat-name { font-weight: 500; color: #34495e; }
.cat-row.level-3 .cat-name { font-weight: 400; color: #555; font-size: 0.9rem; }

.cat-parent-label {
    font-size: 0.75rem;
    color: #adb5bd;
    font-style: italic;
}

.cat-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.15s;
}
.btn-icon.edit  { background: #eaf2ff; color: #2980b9; }
.btn-icon.edit:hover  { background: #2980b9; color: white; }
.btn-icon.del   { background: #fdecea; color: #e74c3c; }
.btn-icon.del:hover   { background: #e74c3c; color: white; }

/* ── Boş durum ───────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: #adb5bd;
}

/* ── Modal ───────────────────────────────────────────── */
.modal-card {
    border-radius: 16px;
    overflow: hidden;
    border: none;
}
.modal-header-custom {
    background: linear-gradient(135deg, var(--primary), #4a235a);
    color: white;
    padding: 1.2rem 1.5rem;
    border: none;
}
.form-label-c { font-weight: 600; font-size: 0.85rem; color: #2c3e50; margin-bottom: 0.4rem; }
.form-ctrl {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 0.55rem 0.9rem;
    transition: border-color 0.2s;
    width: 100%;
}
.form-ctrl:focus { border-color: var(--accent); outline: none; box-shadow: none; }

/* ── Toast ───────────────────────────────────────────── */
.toast-wrap { position: fixed; top: 1.2rem; right: 1.2rem; z-index: 9999; }
.toast-item {
    background: white;
    border-radius: 10px;
    padding: 0.75rem 1.1rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    border-left: 4px solid #27ae60;
    animation: toastIn 0.3s ease;
}
.toast-item.err { border-left-color: #e74c3c; }
@keyframes toastIn { from { transform: translateX(80px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Level rozet renkleri inline için */
.badge-l1 { background: #f4e8fd; color: #8e44ad; border-radius: 20px; padding: 0.15rem 0.6rem; font-size: 0.75rem; font-weight: 700; }
.badge-l2 { background: #e8f4fd; color: #2980b9; border-radius: 20px; padding: 0.15rem 0.6rem; font-size: 0.75rem; font-weight: 700; }
.badge-l3 { background: #e8f8f0; color: #27ae60; border-radius: 20px; padding: 0.15rem 0.6rem; font-size: 0.75rem; font-weight: 700; }
</style>

<div class="container-fluid pt-3" style="max-width: 860px;">

    {{-- Toast --}}
    <div class="toast-wrap" id="toastWrap"></div>

    {{-- Session --}}
    @if(session('success'))
        <div class="alert alert-success text-dark mb-3" style="border-radius:10px;">
            <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger text-dark mb-3" style="border-radius:10px;">
            <i class="fas fa-times-circle mr-2"></i>{{ session('error') }}
        </div>
    @endif

    {{-- Başlık --}}
    <div class="cat-header d-flex align-items-center justify-content-between">
        <div>
            <div class="fw-bold" style="font-size:1.4rem;">
                <i class="fas fa-tags mr-2"></i> Kategoriler
            </div>
            <small style="opacity:0.8;">
                {{ $categories->count() }} kategori &nbsp;·&nbsp;
                <span class="badge-l1 ml-1">Ana</span>
                <span class="badge-l2 ml-1">Alt</span>
                <span class="badge-l3 ml-1">En Alt</span>
            </small>
        </div>
        @can('product.create')
        <button class="btn btn-sm fw-bold"
                style="background:rgba(255,255,255,0.2);color:white;border:2px solid rgba(255,255,255,0.4);border-radius:10px;padding:0.5rem 1.2rem;"
                onclick="openCreate()">
            <i class="fas fa-plus mr-1"></i> Yeni Kategori
        </button>
        @endcan
    </div>

    {{-- Arama --}}
    <div class="mb-3">
        <input type="text" id="catSearch" class="search-box form-control"
               placeholder="Kategori ara..." style="max-width:280px;">
    </div>

    {{-- Ağaç --}}
    <div class="cat-tree" id="catTree">
        @forelse($categories as $cat)
        <div class="cat-row level-{{ $cat->level }}" data-name="{{ strtolower($cat->name) }}">

            {{-- Seviye göstergesi --}}
            <div class="level-dot l{{ $cat->level }}">
                @if($cat->level === 1) ANA
                @elseif($cat->level === 2) ALT
                @else EN
                @endif
            </div>

            {{-- İsim + üst kategori --}}
            <div style="flex:1;">
                <div class="cat-name">
                    @if($cat->level > 1)
                        <span style="color:#adb5bd;font-weight:400;">
                            {{ optional($cat->parent)->name }}
                            @if($cat->level === 3 && $cat->parent?->parent)
                                › {{ $cat->parent->parent->name }}
                            @endif
                            &rsaquo;
                        </span>
                    @endif
                    {{ $cat->name }}
                </div>
            </div>

            {{-- Ürün sayısı --}}
            @php $productCount = $cat->products()->count(); @endphp
            @if($productCount > 0)
            <span style="font-size:0.78rem;color:#adb5bd;flex-shrink:0;">
                <i class="fas fa-box mr-1"></i>{{ $productCount }} ürün
            </span>
            @endif

            {{-- Aksiyonlar --}}
            <div class="cat-actions">
                @can('product.update')
                <button class="btn-icon edit" title="Düzenle"
                        onclick="openEdit({{ $cat->id }}, '{{ addslashes($cat->name) }}', {{ $cat->parent_id ?? 'null' }})">
                    <i class="fas fa-pen"></i>
                </button>
                @endcan
                @can('product.delete')
                <button class="btn-icon del" title="Sil"
                        onclick="deleteCategory({{ $cat->id }}, '{{ addslashes($cat->name) }}')">
                    <i class="fas fa-trash"></i>
                </button>
                @endcan
            </div>
        </div>
        @empty
        <div class="empty-state">
            <i class="fas fa-tags" style="font-size:3rem;margin-bottom:1rem;display:block;opacity:0.3;"></i>
            Henüz kategori eklenmemiş.
        </div>
        @endforelse
    </div>
</div>

{{-- ── OLUŞTUR MODAL ───────────────────────────────────── --}}
<div class="modal fade" id="createModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content modal-card">
            <div class="modal-header-custom d-flex align-items-center justify-content-between">
                <span class="fw-bold" style="font-size:1.1rem;">
                    <i class="fas fa-plus mr-2"></i> Yeni Kategori
                </span>
                <button type="button" class="btn btn-sm text-white"
                        style="background:rgba(255,255,255,0.2);border:none;border-radius:8px;"
                        data-dismiss="modal"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body p-4">
                <form id="createForm" onsubmit="submitCreate(event)">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label-c">Kategori Adı <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="createName" class="form-ctrl"
                               placeholder="örn. Çikolata">
                    </div>
                    <div class="mb-4">
                        <label class="form-label-c">Üst Kategori <small class="text-muted fw-normal">(boş = ana kategori)</small></label>
                        <select name="parent_id" id="createParent" class="form-ctrl">
                            <option value="">— Ana Kategori —</option>
                            @foreach($parentCategories->sortBy('level') as $pc)
                                <option value="{{ $pc->id }}" data-level="{{ $pc->level }}">
                                    {{ str_repeat('　', $pc->level - 1) }}
                                    {{ $pc->level === 1 ? '🟣' : '🔵' }}
                                    {{ $pc->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-outline-secondary mr-2"
                                data-dismiss="modal">İptal</button>
                        <button type="submit" class="btn fw-bold"
                                style="background:var(--accent);color:white;border:none;border-radius:8px;padding:0.45rem 1.4rem;">
                            <i class="fas fa-save mr-1"></i> Kaydet
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- ── DÜZENLE MODAL ───────────────────────────────────── --}}
<div class="modal fade" id="editModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content modal-card">
            <div class="modal-header-custom d-flex align-items-center justify-content-between">
                <span class="fw-bold" style="font-size:1.1rem;">
                    <i class="fas fa-pen mr-2"></i> Kategori Düzenle
                </span>
                <button type="button" class="btn btn-sm text-white"
                        style="background:rgba(255,255,255,0.2);border:none;border-radius:8px;"
                        data-dismiss="modal"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body p-4">
                <form id="editForm" onsubmit="submitEdit(event)">
                    @csrf @method('PUT')
                    <input type="hidden" id="editId">
                    <div class="mb-3">
                        <label class="form-label-c">Kategori Adı <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="editName" class="form-ctrl">
                    </div>
                    <div class="mb-4">
                        <label class="form-label-c">Üst Kategori <small class="text-muted fw-normal">(boş = ana kategori)</small></label>
                        <select name="parent_id" id="editParent" class="form-ctrl">
                            <option value="">— Ana Kategori —</option>
                            @foreach($parentCategories->sortBy('level') as $pc)
                                <option value="{{ $pc->id }}" data-level="{{ $pc->level }}">
                                    {{ str_repeat('　', $pc->level - 1) }}
                                    {{ $pc->level === 1 ? '🟣' : '🔵' }}
                                    {{ $pc->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-outline-secondary mr-2"
                                data-dismiss="modal">İptal</button>
                        <button type="submit" class="btn fw-bold"
                                style="background:var(--accent);color:white;border:none;border-radius:8px;padding:0.45rem 1.4rem;">
                            <i class="fas fa-save mr-1"></i> Güncelle
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')
<script>
const BASE  = '{{ url("categories") }}';
const CSRF  = '{{ csrf_token() }}';

// ── Modal Aç ────────────────────────────────────────
function openCreate() {
    document.getElementById('createName').value   = '';
    document.getElementById('createParent').value = '';
    $('#createModal').modal('show');
}

function openEdit(id, name, parentId) {
    document.getElementById('editId').value     = id;
    document.getElementById('editName').value   = name;
    document.getElementById('editParent').value = parentId ?? '';
    $('#editModal').modal('show');
}

// ── Oluştur ──────────────────────────────────────────
async function submitCreate(e) {
    e.preventDefault();
    const name     = document.getElementById('createName').value.trim();
    const parentId = document.getElementById('createParent').value;

    if (!name) { toast('Kategori adı gerekli.', 'err'); return; }

    const res  = await fetch(BASE, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF,'Accept': 'application/json' },
        body: JSON.stringify({ name, parent_id: parentId || null }),
    });
    const json = await res.json();

    if (res.ok) {
        toast(json.message ?? 'Kategori oluşturuldu.');
        $('#createModal').modal('hide');
        setTimeout(() => location.reload(), 800);
    } else {
        toast(json.message ?? 'Hata oluştu.', 'err');
    }
}

// ── Güncelle ────────────────────────────────────────
async function submitEdit(e) {
    e.preventDefault();
    const id       = document.getElementById('editId').value;
    const name     = document.getElementById('editName').value.trim();
    const parentId = document.getElementById('editParent').value;

    if (!name) { toast('Kategori adı gerekli.', 'err'); return; }

    const res  = await fetch(`${BASE}/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF,'Accept': 'application/json' },
        body: JSON.stringify({ name, parent_id: parentId || null }),
    });
    const json = await res.json();

    if (res.ok) {
        toast(json.message ?? 'Kategori güncellendi.');
        $('#editModal').modal('hide');
        setTimeout(() => location.reload(), 800);
    } else {
        toast(json.message ?? 'Hata oluştu.', 'err');
    }
}

// ── Sil ─────────────────────────────────────────────
async function deleteCategory(id, name) {
    if (!confirm(`"${name}" silinsin mi?`)) return;

    const res  = await fetch(`${BASE}/${id}`, {
        method: 'DELETE',
        headers: { 'X-CSRF-TOKEN': CSRF,'Accept': 'application/json', },
    });
    const json = await res.json();

    if (res.ok) {
        toast(json.message ?? 'Silindi.');
        setTimeout(() => location.reload(), 800);
    } else {
        toast(json.message ?? 'Silinemedi.', 'err');
    }
}

// ── Arama ────────────────────────────────────────────
document.getElementById('catSearch').addEventListener('input', function () {
    const q = this.value.toLowerCase();
    document.querySelectorAll('.cat-row').forEach(row => {
        row.style.display = row.dataset.name.includes(q) ? '' : 'none';
    });
});

// ── Toast ─────────────────────────────────────────────
function toast(msg, type = 'ok') {
    const wrap = document.getElementById('toastWrap');
    const el   = document.createElement('div');
    el.className = `toast-item ${type === 'err' ? 'err' : ''}`;
    el.innerHTML = `<i class="fas fa-${type === 'ok' ? 'check-circle text-success' : 'times-circle text-danger'}"></i> ${msg}`;
    wrap.appendChild(el);
    setTimeout(() => el.remove(), 3200);
}
</script>
@endsection