@extends('layouts.admin.app')

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

    {{-- HEADER --}}
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
        <h4 class="fw-bold text-info mb-0"><i class="fas fa-image"></i> Banner: {{ $banner->title ?? 'Sem título' }}</h4>
        <div class="d-flex gap-2 flex-wrap">
            <a href="{{ route('dashboard.admin.configuracoes.banner.edit', $banner) }}" class="btn btn-warning">
                <i class="fas fa-edit"></i> Editar
            </a>
            <form action="{{ route('dashboard.admin.configuracoes.banner.toggle-status', $banner) }}" method="POST">
                @csrf
                @method('PATCH')
                <button class="btn {{ $banner->is_active ? 'btn-secondary' : 'btn-success' }}">
                    <i class="fas fa-power-off"></i> 
                    {{ $banner->is_active ? 'Desativar' : 'Ativar' }}
                </button>
            </form>
        </div>
    </div>

    {{-- BANNER PREVIEW --}}
    <div class="card shadow-lg border-0 rounded-4 overflow-hidden mb-4">
        <div class="banner-container position-relative">
            {{-- Imagem de fundo inteira --}}
            <img src="{{ asset('storage/'.$banner->image) }}" class="banner-image w-100" alt="Banner Image">

            {{-- Conteúdo do banner --}}
            <div class="banner-content text-center text-white">
                @if($banner->title)
                    <h2 class="fw-bold mb-2">{{ $banner->title }}</h2>
                @endif
                @if($banner->subtitle)
                    <p class="lead mb-0">{{ $banner->subtitle }}</p>
                @endif
            </div>
        </div>

        {{-- Informações do banner --}}
        <div class="card-body">
            <p><strong>Status:</strong> 
                @if($banner->is_active)
                    <span class="badge bg-success">Ativo</span>
                @else
                    <span class="badge bg-secondary">Inativo</span>
                @endif
            </p>
            <p><strong>Ordem na página inicial:</strong> {{ $banner->order }}</p>
        </div>
    </div>

</div>

{{-- CSS --}}
<style>
.banner-container {
    width: 100%;
    position: relative;
    background-color: #000; /* fallback */
}

/* Imagem inteira, sem corte */
.banner-image {
    width: 100%;
    height: auto; /* altura proporcional à largura */
    object-fit: contain; /* garante que toda a imagem apareça */
    display: block;
}

/* Conteúdo sobre a imagem */
.banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.45);
    padding: 20px 30px;
    border-radius: 1rem;
    max-width: 80%;
}

/* Texto responsivo */
.banner-content h2, .banner-content p {
    margin: 0;
    word-break: break-word;
    color: #fff;
}

@media (max-width: 768px) {
    .banner-content {
        padding: 15px 20px;
    }
    .banner-content h2 {
        font-size: 1.25rem;
    }
    .banner-content p {
        font-size: 0.95rem;
    }
}
</style>

@endsection