@extends('layouts.modern')

@section('page-title', 'Create Data Type')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
    <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.index') }}">Data Management</a></li>
    <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.index') }}">Data Types</a></li>
    <li class="breadcrumb-item active">Create</li>
@endsection

@section('action-buttons')
    <a href="{{ route('data-management.data-types.index') }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left"></i>
        Back to List
    </a>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-plus-circle me-2" style="color: var(--primary-color);"></i>
                        <h5 class="mb-0">Create New Data Type</h5>
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{ route('data-management.data-types.store') }}" method="POST">
                        @csrf
                        
                        <!-- Basic Information Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="border-bottom pb-2 mb-3" style="color: var(--text-primary);">
                                    <i class="fas fa-info-circle me-1"></i>
                                    Basic Information
                                </h6>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="name" class="form-label">
                                    Name <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                    id="name" name="name" value="{{ old('name') }}" 
                                    placeholder="e.g., Products, Assets, Countries" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Display name for this data type</div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="slug" class="form-label">Slug</label>
                                <input type="text" class="form-control @error('slug') is-invalid @enderror" 
                                    id="slug" name="slug" value="{{ old('slug') }}" 
                                    placeholder="auto-generated from name">
                                @error('slug')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">URL-friendly identifier (auto-generated if left empty)</div>
                            </div>
                            
                            <div class="col-12 mb-3">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control @error('description') is-invalid @enderror" 
                                    id="description" name="description" rows="3" 
                                    placeholder="Describe what this data type is used for...">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="icon" class="form-label">Icon</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-cube" id="icon-preview"></i>
                                    </span>
                                    <input type="text" class="form-control @error('icon') is-invalid @enderror" 
                                        id="icon" name="icon" value="{{ old('icon') }}" 
                                        placeholder="fas fa-cube">
                                </div>
                                @error('icon')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">FontAwesome icon class (e.g., fas fa-cube)</div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="business_id" class="form-label">Business Scope</label>
                                <select class="form-select @error('business_id') is-invalid @enderror" 
                                    id="business_id" name="business_id">
                                    <option value="">Global (All Businesses)</option>
                                    @foreach($businesses as $business)
                                        <option value="{{ $business->id }}" {{ old('business_id') == $business->id ? 'selected' : '' }}>
                                            {{ $business->company_name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('business_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Choose whether this data type is global or business-specific</div>
                            </div>
                        </div>

                        <!-- Menu Configuration Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="border-bottom pb-2 mb-3" style="color: var(--text-primary);">
                                    <i class="fas fa-bars me-1"></i>
                                    Menu Configuration
                                </h6>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="menu_visible" 
                                        name="menu_visible" value="1" {{ old('menu_visible', true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="menu_visible">
                                        Show in Navigation Menu
                                    </label>
                                </div>
                                <div class="form-text">When enabled, this data type will appear in the navigation menu</div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="menu_order" class="form-label">Menu Order</label>
                                <input type="number" class="form-control @error('menu_order') is-invalid @enderror" 
                                    id="menu_order" name="menu_order" value="{{ old('menu_order', 0) }}" 
                                    min="0" step="1">
                                @error('menu_order')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Lower numbers appear first in the menu</div>
                            </div>
                        </div>

                        <!-- Advanced Settings Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="border-bottom pb-2 mb-3" style="color: var(--text-primary);">
                                    <i class="fas fa-cog me-1"></i>
                                    Advanced Settings
                                </h6>
                            </div>
                            
                            <div class="col-12 mb-3">
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <strong>Automatic Configuration:</strong> 
                                    Database table name and permission prefix will be automatically generated based on the name/slug. 
                                    You can configure fields and sections after creating the data type.
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('data-management.data-types.index') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-times"></i>
                                Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i>
                                Create Data Type
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-generate slug from name
    const nameInput = document.getElementById('name');
    const slugInput = document.getElementById('slug');
    
    nameInput.addEventListener('input', function() {
        if (!slugInput.value || slugInput.hasAttribute('data-auto-generated')) {
            const slug = this.value
                .toLowerCase()
                .replace(/[^a-z0-9\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-')
                .trim('-');
            slugInput.value = slug;
            slugInput.setAttribute('data-auto-generated', 'true');
        }
    });
    
    // Remove auto-generated attribute when manually edited
    slugInput.addEventListener('input', function() {
        this.removeAttribute('data-auto-generated');
    });
    
    // Icon preview
    const iconInput = document.getElementById('icon');
    const iconPreview = document.getElementById('icon-preview');
    
    iconInput.addEventListener('input', function() {
        if (this.value) {
            iconPreview.className = this.value;
        } else {
            iconPreview.className = 'fas fa-cube';
        }
    });
});
</script>
@endpush