@extends('backend.layout.layouts')

@section('content')
    <div class="container mx-auto">
        <div class="container">
            <div class="flex justify-between my-10">
                <h2 class="text-2xl ">Blogs</h2>

            </div>

            @if (session('success'))
                <div class="px-4 py-2 mb-4 text-green-800 bg-green-200 border border-green-600 rounded">
                    {{ session('success') }}
                </div>
            @endif

            <form id="addBlogForm" action="{{ route('cms_blogs.store') }}" method="POST" enctype="multipart/form-data"
                class="p-4">
                @csrf
                <div class="mb-4 space-y-4">
                    <!-- Category Field -->
                    <div class="form-group">
                        <label for="category" class="block text-sm font-medium text-gray-700">Category</label>
                        <select id="category" name="category"
                            class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('category') border-red-500 @enderror"
                            required>
                            <option value="" disabled {{ old('category') === '' ? 'selected' : '' }}>Select a
                                category</option>
                            <option value="All Products" {{ old('category') === 'All Products' ? 'selected' : '' }}>All
                                Products</option>
                            <option value="Beauty" {{ old('category') === 'Beauty' ? 'selected' : '' }}>Beauty</option>
                            <option value="Family Care" {{ old('category') === 'Family Care' ? 'selected' : '' }}>Family
                                Care</option>
                            <option value="Home Care" {{ old('category') === 'Home Care' ? 'selected' : '' }}>Home Care
                            </option>
                            <option value="Health & Wellness"
                                {{ old('category') === 'Health & Wellness' ? 'selected' : '' }}>
                                Health & Wellness
                            </option>
                        </select>
                        @error('category')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Title Field -->
                    <div class="form-group">
                        <label for="title" class="block text-sm font-medium text-gray-700">Title</label>
                        <input type="text" id="title" name="title"
                            class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('title') border-red-500 @enderror"
                            value="{{ old('title') }}" required>
                        @error('title')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Picture Field -->
                    <div class="form-group">
                        <label for="picture" class="block text-sm font-medium text-gray-700">Picture</label>
                        <input type="file" id="picture" name="picture"
                            class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('picture') border-red-500 @enderror">
                        @error('picture')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Description Field -->
                    <div class="form-group">
                        <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                        <textarea id="description" name="description" rows="3"
                            class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('description') border-red-500 @enderror"
                            required>{{ old('description') }}</textarea>
                        @error('description')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="flex justify-center p-4 bg-gray-200 border-t">

                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>


        </div>
    @endsection