@extends('admin.master')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold text-gray-800">Add Blog Category</h2>
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.blog-categories.index') }}" class="text-gray-600 border border-gray-300 px-4 py-2 rounded bg-white font-semibold flex items-center gap-2">
                &larr; Back
            </a>
            <button type="submit" form="category-form" class="bg-green-600 text-white font-bold py-2 px-6 rounded shadow flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Publish
            </button>
        </div>
    </div>

    @if ($errors->any())
        <div class="bg-red-100 text-red-700 px-4 py-3 rounded mb-4">
            <ul class="list-disc pl-5">@foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach</ul>
        </div>
    @endif

    <form id="category-form" action="{{ route('admin.blog-categories.store') }}" method="POST" enctype="multipart/form-data" class="bg-white rounded-lg border border-gray-200">
        @csrf
        
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 font-bold text-gray-700">
            Category Details
        </div>
        
        <div class="p-6">
            <div class="mb-6">
                <label class="block text-sm font-bold text-gray-700 mb-2">Name <span class="text-red-500">*</span></label>
                <input type="text" name="name" value="{{ old('name') }}" placeholder="category name" class="w-full border rounded px-3 py-2 outline-none focus:border-green-500" required>
            </div>
            
            <div class="flex items-center justify-between gap-6">
                <label class="block text-sm font-bold text-gray-700 w-1/4">Category <span class="text-gray-400 font-normal">(size 600/600)</span></label>
                <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:bg-gray-50 relative flex-1">
                    <input type="file" name="image" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
                    <div class="text-yellow-600 font-bold text-sm flex items-center justify-center gap-2">
                        <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
                        Click or Drag & Drop Your Image Here
                    </div>
                </div>
                <div class="w-1/4 flex flex-col items-center justify-center text-gray-400">
                    <svg class="w-8 h-8 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                    <span class="text-xs">No file uploaded</span>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection