@extends('layouts.admin.app')

@section('content')
<div class="container-fluid py-4">

{{-- HEADER --}}
<div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">

    <div>
        <h4 class="fw-bold text-gold mb-1">
            <i class="fas fa-tags me-2"></i>
            Categorias
        </h4>
        <small class="text-muted">
            Gerencie e visualize todas as categorias do sistema
        </small>
    </div>

</div>

{{-- GRID --}}
<div class="row g-4">

@forelse($categories as $categoria)

    <div class="col-xl-3 col-lg-4 col-md-6">

        <a href="{{ route('dashboard.admin.categorias.show',$categoria) }}"
           class="text-decoration-none">

            <div class="category-card h-100">

                {{-- TOP BAR --}}
                <div class="card-top">

                    <div class="category-icon">
                        <i class="fas fa-box-open"></i>
                    </div>

                    <span class="badge-count">
                        {{ $categoria->products()->count() }}
                    </span>

                </div>

                {{-- BODY --}}
                <div class="card-body-custom">

                    <h5 class="category-title">
                        {{ $categoria->name }}
                    </h5>

                    <p class="category-desc">
                        {{ Str::limit($categoria->description, 90, '...') }}
                    </p>

                </div>

                {{-- FOOTER --}}
                <div class="card-footer-custom">
                    <span>Ver detalhes</span>
                    <i class="fas fa-arrow-right"></i>
                </div>

            </div>

        </a>

    </div>

@empty

    <div class="col-12">
        <div class="empty-state text-center">

            <i class="fas fa-layer-group"></i>

            <h5>Nenhuma categoria encontrada</h5>

            <p>
                Comece criando categorias para organizar os seus produtos.
            </p>

        </div>
    </div>

@endforelse

</div>

</div>

{{-- ================= STYLE ================= --}}
<style>

/* BACKGROUND */
body{
    background:#0b0f1a;
}

/* GOLD */
.text-gold{
    color:#d4af37;
}

/* CARD */
.category-card{
    background: linear-gradient(145deg,#0f172a,#020617);
    border-radius:18px;
    padding:16px;
    border:1px solid #1f2937;

    transition:.35s ease;
    position:relative;
    overflow:hidden;
}

/* HOVER PREMIUM */
.category-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(212,175,55,.15);
    border-color:#d4af37;
}

/* TOP */
.card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* ICON */
.category-icon{
    width:42px;
    height:42px;
    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    background: linear-gradient(135deg,#d4af37,#b8860b);
    color:#000;
    font-size:18px;
}

/* BADGE COUNT */
.badge-count{
    background:#dc2626;
    color:#fff;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

/* BODY */
.card-body-custom{
    margin-top:15px;
}

.category-title{
    color:#fff;
    font-weight:600;
    font-size:16px;
    margin-bottom:6px;
}

.category-desc{
    color:#9ca3af;
    font-size:13px;
    line-height:1.4;
}

/* FOOTER */
.card-footer-custom{
    margin-top:15px;
    padding-top:10px;

    border-top:1px solid #1f2937;

    display:flex;
    justify-content:space-between;
    align-items:center;

    font-size:13px;
    color:#d4af37;

    transition:.3s;
}

.category-card:hover .card-footer-custom{
    color:#fff;
}

/* EMPTY STATE */
.empty-state{
    background:#0f172a;
    border:1px solid #1f2937;
    border-radius:18px;
    padding:50px;
    color:#9ca3af;
}

.empty-state i{
    font-size:40px;
    margin-bottom:15px;
    color:#d4af37;
}

.empty-state h5{
    color:#fff;
    margin-bottom:8px;
}

/* RESPONSIVO */
@media(max-width:768px){
    .category-title{
        font-size:15px;
    }
}

</style>

@endsection