@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>Adicionar Nova Notícia</h1>

        <form action="{{ route('admin.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="mb-3">
                <label for="title" class="form-label">Título</label>
                <input type="text" class="form-control" id="title" name="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></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">
            </div>
            <button type="submit" class="btn btn-primary">Salvar</button>
        </form>

    </div>
@endsection