@extends('layouts.app')

<style>
    form {
        background-color: #fff; /* Fundo branco para o formulário */
        border-radius: 8px; /* Bordas arredondadas */
        padding: 20px; /* Espaçamento interno */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra leve */
        max-width: 600px; /* Largura máxima */
        margin: auto; /* Centraliza o formulário */
    }

    .mb-3 {
        margin-bottom: 1.5rem; /* Espaçamento entre os campos */
    }

    .form-label {
        font-weight: bold; /* Fonte em negrito para os rótulos */
        display: block; /* Faz com que os rótulos ocupem toda a largura */
        margin-bottom: 0.5rem; /* Espaçamento abaixo do rótulo */
    }

    .form-control {
        width: 100%; /* Largura total para campos de entrada */
        padding: 10px; /* Espaçamento interno */
        border: 1px solid #ccc; /* Borda cinza clara */
        border-radius: 5px; /* Bordas arredondadas */
        transition: border-color 0.3s; /* Efeito de transição para a borda */
    }

    .form-control:focus {
        border-color: #007bff; /* Borda azul ao focar */
        outline: none; /* Remove o contorno padrão */
    }

    .btn-primary {
        padding: 10px 15px; /* Espaçamento do botão */
        background-color: #007bff; /* Cor de fundo azul */
        color: #fff; /* Cor do texto */
        border: none; /* Remove bordas */
        border-radius: 5px; /* Bordas arredondadas */
        font-size: 16px; /* Tamanho da fonte */
        cursor: pointer; /* Muda o cursor para mãozinha */
        transition: background-color 0.3s; /* Efeito de transição */
    }

    .btn-primary:hover {
        background-color: #0056b3; /* Cor de fundo ao passar o mouse */
    }
</style>

@section('content')
    <div class="container">
        <h1>Editar Notícia</h1>

        <form action="{{ route('admin.update', $news->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="mb-3">
                <label for="title" class="form-label">Título</label>
                <input type="text" class="form-control" id="title" name="title" value="{{ old('title', $news->title) }}" required>
            </div>
            <div class="mb-3">
                <label for="content" class="form-label">Conteúdo</label>
                <textarea class="form-control" id="content" name="content" rows="5" required>{{ old('content', $news->content) }}</textarea>
            </div>
            <div class="mb-3">
                <label for="image" class="form-label">Imagem (Opcional)</label>
                <input type="file" class="form-control" id="image" name="image">
                @if ($news->image)
                    <small>Imagem atual: <img src="{{ asset('storage/' . $news->image) }}" alt="Imagem" style="max-width: 100px;"></small>
                @endif
            </div>
            <button type="submit" class="btn btn-primary">Atualizar</button>
        </form>
    </div>
@endsection