@extends('layouts.modern')

@section('page-title', 'Edit 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"><a href="{{ route('data-management.data-types.show', $dataType) }}">{{ $dataType->name }}</a></li>
    <li class="breadcrumb-item active">Edit</li>
@endsection

@section('action-buttons')
    <div class="btn-group">
        <a href="{{ route('data-management.data-types.show', $dataType) }}" class="btn btn-outline-secondary">
            <i class="fas fa-eye"></i>
            View Details
        </a>
        <a href="{{ route('data-management.data-types.index') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left"></i>
            Back to List
        </a>
    </div>
@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">
                        @if($dataType->icon)
                            <i class="{{ $dataType->icon }} me-2" style="color: var(--primary-color);"></i>
                        @endif
                        <h5 class="mb-0">Edit Data Type: {{ $dataType->name }}</h5>
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{ route('data-management.data-types.update', $dataType) }}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <!-- 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', $dataType->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', $dataType->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>
                                @if($dataType->fields->count() > 0 || $dataType->sections->count() > 0)
                                    <div class="alert alert-warning mt-2">
                                        <i class="fas fa-exclamation-triangle me-1"></i>
                                        <small><strong>Note:</strong> Changing the slug may affect existing data and permissions.</small>
                                    </div>
                                @endif
                            </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', $dataType->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="{{ $dataType->icon ?: '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', $dataType->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', $dataType->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', $dataType->menu_visible) ? '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', $dataType->menu_order) }}" 
                                    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 class="col-md-6 mb-3">
                                <label for="menu_parent_id" class="form-label">Parent Menu Item</label>
                                <select class="form-select @error('menu_parent_id') is-invalid @enderror" 
                                    id="menu_parent_id" name="menu_parent_id">
                                    <option value="">No Parent (Top Level)</option>
                                    @foreach($dataTypes as $dt)
                                        <option value="{{ $dt->id }}" 
                                            {{ old('menu_parent_id', $dataType->menu_parent_id) == $dt->id ? 'selected' : '' }}>
                                            {{ $dt->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('menu_parent_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Optional: Group this data type under another menu item</div>
                            </div>
                        </div>

                        <!-- Status 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-toggle-on me-1"></i>
                                    Status & Visibility
                                </h6>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="is_active" 
                                        name="is_active" value="1" 
                                        {{ old('is_active', $dataType->is_active) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_active">
                                        Active Status
                                    </label>
                                </div>
                                <div class="form-text">When disabled, this data type will be hidden and inaccessible</div>
                            </div>
                        </div>

                        <!-- System Information -->
                        <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>
                                    System Information
                                </h6>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label class="form-label small text-muted">Database Table Name</label>
                                <div class="font-monospace">{{ $dataType->table_name }}</div>
                                <div class="form-text">Cannot be changed after creation</div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label class="form-label small text-muted">Permissions Prefix</label>
                                <div class="font-monospace">{{ $dataType->permissions_prefix }}</div>
                                <div class="form-text">Used for auto-generated permissions</div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label small text-muted">Created</label>
                                <div>{{ $dataType->created_at->format('M j, Y g:i A') }}</div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label class="form-label small text-muted">Last Updated</label>
                                <div>{{ $dataType->updated_at->format('M j, Y g:i A') }}</div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('data-management.data-types.show', $dataType) }}" 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>
                                Update Data Type
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-generate slug from name (only if it's currently matching the original pattern)
    const nameInput = document.getElementById('name');
    const slugInput = document.getElementById('slug');
    const originalSlug = '{{ $dataType->slug }}';
    
    nameInput.addEventListener('input', function() {
        // Only auto-generate if the current slug matches what would be generated from the original name
        const currentGeneratedSlug = this.value
            .toLowerCase()
            .replace(/[^a-z0-9\s-]/g, '')
            .replace(/\s+/g, '-')
            .replace(/-+/g, '-')
            .trim('-');
            
        if (slugInput.value === originalSlug || slugInput.hasAttribute('data-auto-generated')) {
            slugInput.value = currentGeneratedSlug;
            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