@extends('layouts.app')

@section('title', 'Create Route Assignment - ISP ERP System')

@section('page-title', 'Create New Route Assignment')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-0">
                                <i class="fas fa-plus-circle me-2"></i>
                                Create New Route Assignment
                            </h3>
                            <p class="mb-0 opacity-75">Add a new route assignment to a menu</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('route-assigns.index') }}" class="btn btn-light btn-custom">
                                <i class="fas fa-arrow-left me-2"></i>Back to Route Assignments
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Route Assignment Form -->
    <div class="row">
        <div class="col-lg-8">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-edit me-2"></i>
                        Route Assignment Details
                    </h4>
                </div>
                <div class="custom-card-body">
                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <form action="{{ route('route-assigns.store') }}" method="POST">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="menu_id" class="form-label">
                                    <i class="fas fa-bars me-1"></i>
                                    Menu <span class="text-danger">*</span>
                                </label>
                                <br>
                                <select class="form-select custom-form-control @error('menu_id') is-invalid @enderror" 
                                        id="menu_id" 
                                        name="menu_id"
                                        style="max-width: 300px;"
                                        required>
                                    <option value="">Select a menu...</option>
                                    @foreach($menus as $menu)
                                        <option value="{{ $menu->id }}" {{ old('menu_id') == $menu->id ? 'selected' : '' }}>
                                            {{ $menu->name }}
                                            @if($menu->route)
                                                ({{ $menu->route }})
                                            @endif
                                        </option>
                                        @if($menu->children && $menu->children->count() > 0)
                                            @foreach($menu->children as $child)
                                                <option value="{{ $child->id }}" {{ old('menu_id') == $child->id ? 'selected' : '' }}>
                                                    &nbsp;&nbsp;&nbsp;└─ {{ $child->name }}
                                                    @if($child->route)
                                                        ({{ $child->route }})
                                                    @endif
                                                </option>
                                            @endforeach
                                        @endif
                                    @endforeach
                                </select>
                                @error('menu_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="permission_id" class="form-label">
                                    <i class="fas fa-shield-alt me-1"></i>
                                    Permission <span class="text-danger">*</span>
                                </label>
                                <br>
                                <select class="form-select custom-form-control @error('permission_id') is-invalid @enderror" 
                                        id="permission_id" 
                                        name="permission_id"
                                        style="max-width: 300px;"
                                        required>
                                    <option value="">Select a permission...</option>
                                    @foreach($permissions as $permission)
                                        <option value="{{ $permission->id }}" {{ old('permission_id') == $permission->id ? 'selected' : '' }}>
                                            {{ $permission->permission_key }} - {{ $permission->menu->name ?? 'No Menu' }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('permission_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">
                                    Type to search permissions
                                </small>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="route" class="form-label">
                                    <i class="fas fa-route me-1"></i>
                                    Route
                                </label>
                                <input type="text" 
                                       class="form-control custom-form-control @error('route') is-invalid @enderror" 
                                       id="route" 
                                       name="route" 
                                       value="{{ old('route') }}" 
                                       placeholder="e.g., reseller.sales-invoices.index"
                                       style="max-width: 300px;">
                                @error('route')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">
                                    Leave empty to use permission key as route
                                </small>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="sort_order" class="form-label">
                                    <i class="fas fa-sort-numeric-down me-1"></i>
                                    Sort Order
                                </label>
                                <input type="number" 
                                       class="form-control custom-form-control @error('sort_order') is-invalid @enderror" 
                                       id="sort_order" 
                                       name="sort_order" 
                                       value="{{ old('sort_order') }}" 
                                       placeholder="Auto"
                                       min="0"
                                       style="max-width: 300px;">
                                @error('sort_order')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">
                                    Leave empty for auto-increment
                                </small>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" 
                                       type="checkbox" 
                                       id="is_active" 
                                       name="is_active" 
                                       value="1" 
                                       {{ old('is_active', true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">
                                    <i class="fas fa-check-circle me-1"></i>
                                    Active Route Assignment
                                </label>
                            </div>
                            <small class="form-text text-muted">
                                Inactive route assignments cannot be assigned to users
                            </small>
                        </div>
                        
                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary btn-custom">
                                <i class="fas fa-save me-2"></i>Create Route Assignment
                            </button>
                            <a href="{{ route('route-assigns.index') }}" class="btn btn-light btn-custom">
                                <i class="fas fa-times me-2"></i>Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <!-- Info Card -->
            <div class="custom-card mb-4">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>
                        Route Assignment Info
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="mb-3">
                        <h6 class="text-primary">What is Route Assignment?</h6>
                        <p class="text-muted small">Route assignments link specific routes to menus and permissions, allowing you to control which routes are available under each menu.</p>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="text-success">Route Format:</h6>
                        <ul class="list-unstyled small">
                            <li><code>reseller.sales-invoices.index</code></li>
                            <li><code>reseller.sales-invoices.create</code></li>
                            <li><code>reseller.sales-invoices.edit</code></li>
                        </ul>
                    </div>
                    
                    <div class="alert alert-info custom-alert">
                        <i class="fas fa-lightbulb me-2"></i>
                        <strong>Tip:</strong> If you leave the route field empty, the system will automatically use the permission key as the route.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
<style>
    /* Form field text alignment */
    .form-control,
    .form-select,
    .custom-form-control {
        text-align: left !important;
        direction: ltr !important;
    }
    
    /* Select2 text alignment */
    .select2-container--bootstrap-5 {
        width: 100% !important;
        max-width: 300px !important;
    }
    .select2-container--bootstrap-5 .select2-selection {
        min-height: 38px;
        border: 1px solid #ced4da;
        text-align: left !important;
        display: flex !important;
        align-items: center !important;
    }
    .select2-container--bootstrap-5 .select2-selection--single {
        height: 38px !important;
    }
    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
        line-height: 36px !important;
        padding-left: 12px !important;
        padding-right: 20px !important;
        text-align: left !important;
        direction: ltr !important;
        width: 100% !important;
        display: block !important;
    }
    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    .select2-container--bootstrap-5 .select2-selection__placeholder {
        color: #6c757d !important;
        text-align: left !important;
    }
    
    /* Select2 dropdown results alignment */
    .select2-results__option {
        text-align: left !important;
        direction: ltr !important;
    }
    
    /* Select2 search box alignment */
    .select2-search--dropdown .select2-search__field {
        text-align: left !important;
        direction: ltr !important;
    }
</style>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Select2 for Permission dropdown with search
    $('#permission_id').select2({
        theme: 'bootstrap-5',
        placeholder: 'Search or select a permission...',
        allowClear: true,
        width: '100%',
        language: {
            noResults: function() {
                return "No permission found";
            },
            searching: function() {
                return "Searching...";
            }
        }
    });
    
    // Auto-fill route from permission when permission is selected
    $('#permission_id').on('change', function() {
        const permissionId = this.value;
        const routeInput = document.getElementById('route');
        
        if (permissionId && !routeInput.value) {
            // Fetch permission details
            fetch(`/permissions/${permissionId}`)
                .then(response => response.json())
                .then(data => {
                    if (data && data.permission_key) {
                        routeInput.value = data.permission_key;
                    }
                })
                .catch(error => {
                    console.error('Error fetching permission:', error);
                });
        }
    });
});
</script>
@endsection