@extends('layouts.admin.app')

@section('content')
<div class="container py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3>Marcas</h3>
        <a href="{{ route('dashboard.admin.configuracoes.marcas.create') }}" class="btn btn-success">Nova Marca</a>
    </div>

    {{-- MENSAGEM DE SUCESSO --}}
    @if(session('success'))
        <div id="success-alert" class="alert alert-success">{{ session('success') }}</div>
    @endif

    <div class="row g-4">
        @forelse($marcas as $marca)
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                <div class="card h-100 text-center p-3 shadow-sm">
                    @if($marca->logo)
                        <img src="{{ asset('storage/'.$marca->logo) }}" class="img-fluid mb-2" style="max-height:100px;" alt="{{ $marca->name }}">
                    @endif
                    <h6 class="fw-bold">{{ $marca->name }}</h6>
                    <div class="mt-2 d-flex justify-content-center gap-2">
                        <a href="{{ route('dashboard.admin.configuracoes.marcas.edit', $marca->id) }}" class="btn btn-primary btn-sm">Editar</a>
                        <form action="{{ route('dashboard.admin.configuracoes.marcas.destroy', $marca->id) }}" method="POST" onsubmit="return confirm('Deseja realmente excluir?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-sm">Excluir</button>
                        </form>
                    </div>
                </div>
            </div>
        @empty
            <p>Nenhuma marca cadastrada.</p>
        @endforelse
    </div>

    <div class="mt-4">{{ $marcas->links() }}</div>
</div>

<style>
.card img{ object-fit: contain; }
.card:hover{ transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.25); transition: all 0.3s; }
</style>

{{-- SCRIPT PARA REMOVER ALERTA AUTOMATICAMENTE --}}
<script>
document.addEventListener('DOMContentLoaded', () => {
    const alert = document.getElementById('success-alert');
    if(alert){
        setTimeout(() => {
            alert.style.transition = "opacity 0.5s ease-out";
            alert.style.opacity = 0;
            setTimeout(() => alert.remove(), 500); // remove do DOM
        }, 3000); // 3 segundos
    }
});
</script>
@endsection