@extends('layouts.app')

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

@section('page-title', 'Edit 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-edit me-2"></i>
                                Edit Route Assignment
                            </h3>
                            <p class="mb-0 opacity-75">Update route assignment details</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.update', $routeAssign) }}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <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>
                                <select class="form-select custom-form-control @error('menu_id') is-invalid @enderror" 
                                        id="menu_id" 
                                        name="menu_id"
                                        required>
                                    <option value="">Select a menu...</option>
                                    @foreach($menus as $menu)
                                        <option value="{{ $menu->id }}" {{ old('menu_id', $routeAssign->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', $routeAssign->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>
                                <select class="form-select custom-form-control @error('permission_id') is-invalid @enderror" 
                                        id="permission_id" 
                                        name="permission_id"
                                        required>
                                    <option value="">Select a permission...</option>
                                    @foreach($permissions as $permission)
                                        <option value="{{ $permission->id }}" {{ old('permission_id', $routeAssign->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', $routeAssign->route) }}" 
                                       placeholder="e.g., reseller.sales-invoices.index">
                                @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', $routeAssign->sort_order) }}" 
                                       placeholder="Auto"
                                       min="0">
                                @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', $routeAssign->is_active) ? '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>Update 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">
            <!-- Current Route Assignment Info -->
            <div class="custom-card mb-4">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>
                        Current Route Assignment Info
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="mb-3">
                        <h6 class="text-primary">Route</h6>
                        <code class="text-primary">{{ $routeAssign->route }}</code>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="text-success">Menu</h6>
                        <p class="mb-0">
                            @if($routeAssign->menu)
                                <span class="badge bg-info">{{ $routeAssign->menu->name }}</span>
                            @else
                                <span class="text-muted">No Menu</span>
                            @endif
                        </p>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="text-info">Permission</h6>
                        @if($routeAssign->permission)
                            <p class="mb-0">
                                <strong>{{ $routeAssign->permission->description }}</strong><br>
                                <small class="text-muted"><code>{{ $routeAssign->permission->permission_key }}</code></small>
                            </p>
                        @else
                            <span class="text-muted">No Permission</span>
                        @endif
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="text-warning">Status</h6>
                        @if($routeAssign->is_active)
                            <span class="badge bg-success custom-badge">
                                <i class="fas fa-check-circle me-1"></i>Active
                            </span>
                        @else
                            <span class="badge bg-warning custom-badge">
                                <i class="fas fa-exclamation-triangle me-1"></i>Inactive
                            </span>
                        @endif
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="text-warning">Created</h6>
                        <small class="text-muted">{{ $routeAssign->created_at->format('M d, Y H:i') }}</small>
                    </div>
                    
                    @if($routeAssign->updated_at != $routeAssign->created_at)
                        <div class="mb-3">
                            <h6 class="text-warning">Last Updated</h6>
                            <small class="text-muted">{{ $routeAssign->updated_at->format('M d, Y H:i') }}</small>
                        </div>
                    @endif
                </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;
    }
    .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...";
            }
        }
    });
});
</script>
@endsection