@extends('layouts.app')

@section('title', 'Upload Photo Album - Admin Portal')

@section('content')
<div class="bg-black text-white py-8 border-b border-neutral-800">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="font-serif-heading font-extrabold text-2xl">Upload Photo Album Entry</h1>
    </div>
</div>

<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="border border-gray-200 p-8 bg-white shadow-xl">
        
        <form action="{{ route('admin.gallery.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf

            <div>
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Album Title</label>
                <input type="text" name="title" required placeholder="e.g. Katampe Extension Title Verification" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs">
            </div>

            <div>
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Category</label>
                <select name="category" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs">
                    <option value="Site Inspection">Site Inspection</option>
                    <option value="Team Operations">Team Operations</option>
                    <option value="Title Handover">Title Handover</option>
                    <option value="Project Milestone">Project Milestone</option>
                    <option value="Landmark Development">Landmark Development</option>
                </select>
            </div>

            <div>
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Upload Photo</label>
                <input type="file" name="image" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs">
            </div>

            <div>
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Description</label>
                <textarea name="description" rows="3" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs"></textarea>
            </div>

            <button type="submit" class="w-full py-4 bg-brand-blue text-white text-xs font-bold uppercase tracking-[0.2em] hover:bg-brand-darkblue shadow-lg">
                Publish Album Entry
            </button>
        </form>

    </div>
</div>
@endsection
