@extends('admin.layouts.admin')

@section('title', 'Create Module')
@section('page_title', 'Create New Module')

@section('content')
    <div class="max-w-4xl mx-auto">
        <form action="{{ route('admin.modules.store') }}" method="POST" class="space-y-6">
            @csrf

            <!-- Header & Info -->
            <div class="bg-white p-6 rounded-lg shadow-sm border border-slate-200 flex items-center justify-between">
                <div>
                    <h2 class="text-xl font-bold text-[#404e67]">Initialize New Module</h2>
                    <p class="text-xs text-slate-400 mt-1">Define the type and identity of this reusable section.</p>
                </div>
                <div class="flex items-center space-x-3">
                    <a href="{{ route('admin.modules.index') }}"
                        class="text-slate-400 hover:text-slate-600 font-bold text-xs transition">Discard</a>
                    <button type="submit"
                        class="bg-primary text-white px-6 py-2.5 rounded-md font-bold text-xs shadow-lg shadow-blue-500/20 hover:bg-primary-hover transition-all">
                        Create Module
                    </button>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
                    <h3 class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Base Identity</h3>
                </div>

                <div class="p-6 space-y-6">
                    <div class="space-y-2">
                        <label class="text-[10px] font-bold text-slate-500 uppercase tracking-wider pl-1">Module Title
                            (Internal Only)</label>
                        <input type="text" name="title" placeholder="e.g., Home Page Hero Section" required
                            class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-2.5 font-bold text-slate-800 transition-all focus:ring-4 focus:ring-blue-500/10 border text-sm">
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label class="text-[10px] font-bold text-slate-500 uppercase tracking-wider pl-1">Unique
                                Key</label>
                            <input type="text" name="key" placeholder="e.g., main_hero_v1" required
                                class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-2.5 font-bold text-slate-800 transition-all focus:ring-4 focus:ring-blue-500/10 border text-sm">
                        </div>
                        <div class="space-y-2">
                            <label class="text-[10px] font-bold text-slate-500 uppercase tracking-wider pl-1">Module
                                Type</label>
                            <select name="type" required
                                class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-2.5 font-bold text-slate-800 appearance-none border text-sm focus:ring-4 focus:ring-blue-500/10">
                                <option value="hero">Hero Section</option>
                                <option value="services">Services Header</option>
                                <option value="shared_hosting">Shared Hosting Promo</option>
                                <option value="web_design">Web Design Section</option>
                                <option value="help_center">Help Center Section</option>
                                <option value="server_locations">Server Locations Section</option>
                                <option value="hosting_groups">Hosting Groups</option>
                                <option value="hosting_plans">Hosting Plans Grid</option>
                                <option value="domain_search">Domain Search</option>
                                <option value="domain_pricing">Domain Pricing Table</option>
                                <option value="blog">Recent Blog Posts</option>
                                <option value="faq">FAQ Section</option>
                                <option value="testimonials">Testimonials Section</option>
                                <option value="partners">Partners Slider</option>
                                <option value="portfolio">Portfolio Grid</option>
                                <option value="best_features">Best Features Grid</option>
                                <option value="plans_include">Plans Included Features</option>
                                <option value="rich_text">Rich Text / Custom HTML</option>
                                <option value="section">Universal Section Builder</option>
                                <option value="image">Single Image / Banner</option>
                                <option value="title">Section Title / Header</option>
                                <option value="progress_bar_circle">Progress Circle</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection