@extends('super_admin.layouts.master')

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

@section('content')
<div class="max-w-4xl mx-auto">
    <!-- Back Button -->
    <div class="flex items-center gap-4 mb-6">
        <a href="{{ route('super_admin.modules.index') }}" class="text-gray-600 hover:text-gray-800 transition-colors">
            <i class="fas fa-arrow-left text-xl"></i>
        </a>
        <div>
            <p class="text-gray-500 text-sm">Add a new ERP module to the system</p>
        </div>
    </div>

    <!-- Form -->
    <form action="{{ route('super_admin.modules.store') }}" method="POST" class="bg-white rounded-lg shadow p-6">
        @csrf
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Module Name -->
            <div>
                <label class="block text-gray-700 font-medium mb-2">Module Name <span class="text-red-500">*</span></label>
                <input type="text" name="name" value="{{ old('name') }}" required
                       class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:border-blue-500 focus:outline-none"
                       placeholder="e.g., Library Management">
                @error('name')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Module Code -->
            <div>
                <label class="block text-gray-700 font-medium mb-2">Module Code <span class="text-red-500">*</span></label>
                <input type="text" name="code" value="{{ old('code') }}" required
                       class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:border-blue-500 focus:outline-none"
                       placeholder="e.g., library">
                <p class="text-gray-500 text-xs mt-1">Unique identifier, lowercase, no spaces</p>
                @error('code')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Category -->
            <div>
                <label class="block text-gray-700 font-medium mb-2">Category <span class="text-red-500">*</span></label>
                <select name="category" required
                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:border-blue-500 focus:outline-none">
                    @foreach($categories as $value => $label)
                        <option value="{{ $value }}" {{ old('category') == $value ? 'selected' : '' }}>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Icon -->
            <div>
                <label class="block text-gray-700 font-medium mb-2">Icon <span class="text-red-500">*</span></label>
                <select name="icon" required
                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:border-blue-500 focus:outline-none">
                    @foreach($icons as $value => $label)
                        <option value="{{ $value }}" {{ old('icon') == $value ? 'selected' : '' }}>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        <!-- Description -->
        <div class="mt-6">
            <label class="block text-gray-700 font-medium mb-2">Description</label>
            <textarea name="description" rows="3"
                      class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:border-blue-500 focus:outline-none"
                      placeholder="Brief description of what this module does...">{{ old('description') }}</textarea>
        </div>

        <!-- Active Status -->
        <div class="mt-6 flex items-center gap-3">
            <input type="checkbox" name="is_active" id="is_active" value="1" checked
                   class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
            <label for="is_active" class="text-gray-700">Module is active and available</label>
        </div>

        <!-- Buttons -->
        <div class="mt-8 flex items-center gap-4">
            <button type="submit" 
                    class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg font-medium transition-colors">
                <i class="fas fa-save mr-2"></i> Create Module
            </button>
            <a href="{{ route('super_admin.modules.index') }}" 
               class="text-gray-600 hover:text-gray-800 transition-colors">
                Cancel
            </a>
        </div>
    </form>
</div>
@endsection