@extends('admin.layouts.app')

@section('title', 'FILE APP PORTAL - Create Module')

@section('breadcrumbs')
    <i class="fa-solid fa-chevron-right mx-3 text-[8px]"></i>
    <span class="text-slate-900">Modules</span>
    <i class="fa-solid fa-chevron-right mx-3 text-[8px]"></i>
    <span class="text-slate-900">Create</span>
@endsection

@section('content')

<div class="space-y-6">
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-bold" style="color: #43B9B2;">Create New Module</h1>
        <a href="{{ route('admin.modules.index') }}" 
           class="rounded-lg px-4 py-2 border-2 transition-colors hover:bg-gray-50" 
           style="border-color: #43B9B2; color: #43B9B2;">
            <i class="fas fa-arrow-left mr-2"></i>Back
        </a>
    </div>

    <div class="rounded-lg bg-white p-6 shadow-md">
        <form action="{{ route('admin.modules.store') }}" method="POST">
            @csrf

            <div class="space-y-4">
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700">Name <span class="text-red-500">*</span></label>
                    <input type="text" 
                           name="name" 
                           id="name" 
                           value="{{ old('name') }}"
                           required
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                           style="border-color: #43B9B2;">
                    @error('name')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="slug" class="block text-sm font-medium text-gray-700">Slug</label>
                    <input type="text" 
                           name="slug" 
                           id="slug" 
                           value="{{ old('slug') }}"
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                           style="border-color: #43B9B2;">
                    <p class="mt-1 text-xs text-gray-500">Leave empty to auto-generate from name</p>
                    @error('slug')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                    <textarea name="description" 
                              id="description" 
                              rows="3"
                              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                              style="border-color: #43B9B2;">{{ old('description') }}</textarea>
                    @error('description')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="version" class="block text-sm font-medium text-gray-700">Version</label>
                    <input type="text" 
                           name="version" 
                           id="version" 
                           value="{{ old('version', '1.0.0') }}"
                           placeholder="1.0.0"
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                           style="border-color: #43B9B2;">
                    @error('version')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="flex items-center">
                        <input type="checkbox" 
                               name="is_active" 
                               value="1"
                               {{ old('is_active', true) ? 'checked' : '' }}
                               class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                        <span class="ml-2 text-sm text-gray-700">Active</span>
                    </label>
                </div>

                <div class="flex justify-end gap-4">
                    <a href="{{ route('admin.modules.index') }}" 
                       class="rounded-lg px-4 py-2 border-2 transition-colors hover:bg-gray-50" 
                       style="border-color: #43B9B2; color: #43B9B2;">
                        Cancel
                    </a>
                    <button type="submit" 
                            class="rounded-lg px-4 py-2 text-white transition-colors hover:opacity-90" 
                            style="background-color: #43B9B2;">
                        Create Module
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection