@extends('layouts.app')

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

@section('page-title', 'Route Assignment Details')

@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-eye me-2"></i>
                                Route Assignment Details
                            </h3>
                            <p class="mb-0 opacity-75">View route assignment information</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('route-assigns.edit', $routeAssign) }}" class="btn btn-primary btn-custom">
                                <i class="fas fa-edit me-2"></i>Edit
                            </a>
                            <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 Details -->
    <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-info-circle me-2"></i>
                        Route Assignment Information
                    </h4>
                </div>
                <div class="custom-card-body">
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h6 class="text-muted mb-2">
                                <i class="fas fa-route me-2"></i>Route
                            </h6>
                            <p class="mb-3">
                                <code class="text-primary fs-5">{{ $routeAssign->route }}</code>
                            </p>
                        </div>
                        
                        <div class="col-md-6">
                            <h6 class="text-muted mb-2">
                                <i class="fas fa-sort-numeric-down me-2"></i>Sort Order
                            </h6>
                            <p class="mb-3">
                                <span class="badge bg-secondary fs-6">{{ $routeAssign->sort_order ?? 'N/A' }}</span>
                            </p>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h6 class="text-muted mb-2">
                                <i class="fas fa-bars me-2"></i>Menu
                            </h6>
                            <p class="mb-3">
                                @if($routeAssign->menu)
                                    <span class="badge bg-info custom-badge fs-6">
                                        <i class="fas fa-bars me-1"></i>
                                        {{ $routeAssign->menu->name }}
                                    </span>
                                    @if($routeAssign->menu->route)
                                        <br>
                                        <small class="text-muted">Route: <code>{{ $routeAssign->menu->route }}</code></small>
                                    @endif
                                @else
                                    <span class="text-muted">
                                        <i class="fas fa-minus-circle me-1"></i>
                                        No Menu Assigned
                                    </span>
                                @endif
                            </p>
                        </div>
                        
                        <div class="col-md-6">
                            <h6 class="text-muted mb-2">
                                <i class="fas fa-shield-alt me-2"></i>Permission
                            </h6>
                            <p class="mb-3">
                                @if($routeAssign->permission)
                                    <div>
                                        <strong class="d-block mb-1">{{ $routeAssign->permission->description }}</strong>
                                        <code class="text-primary">{{ $routeAssign->permission->permission_key }}</code>
                                    </div>
                                @else
                                    <span class="text-muted">No Permission Assigned</span>
                                @endif
                            </p>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h6 class="text-muted mb-2">
                                <i class="fas fa-check-circle me-2"></i>Status
                            </h6>
                            <p class="mb-3">
                                @if($routeAssign->is_active)
                                    <span class="badge bg-success custom-badge fs-6">
                                        <i class="fas fa-check-circle me-1"></i>
                                        Active
                                    </span>
                                @else
                                    <span class="badge bg-warning custom-badge fs-6">
                                        <i class="fas fa-exclamation-triangle me-1"></i>
                                        Inactive
                                    </span>
                                @endif
                            </p>
                        </div>
                    </div>

                    <hr>

                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-muted mb-2">
                                <i class="fas fa-calendar-plus me-2"></i>Created At
                            </h6>
                            <p class="mb-0">
                                <small class="text-muted">{{ $routeAssign->created_at->format('F d, Y h:i A') }}</small>
                            </p>
                        </div>
                        
                        <div class="col-md-6">
                            <h6 class="text-muted mb-2">
                                <i class="fas fa-calendar-edit me-2"></i>Updated At
                            </h6>
                            <p class="mb-0">
                                <small class="text-muted">{{ $routeAssign->updated_at->format('F d, Y h:i A') }}</small>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <!-- Quick Actions -->
            <div class="custom-card mb-4">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-bolt me-2"></i>
                        Quick Actions
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('route-assigns.edit', $routeAssign) }}" class="btn btn-primary btn-custom">
                            <i class="fas fa-edit me-2"></i>Edit Route Assignment
                        </a>
                        <button class="btn btn-danger btn-custom" onclick="deleteRouteAssign({{ $routeAssign->id }})">
                            <i class="fas fa-trash me-2"></i>Delete Route Assignment
                        </button>
                        <a href="{{ route('route-assigns.index') }}" class="btn btn-light btn-custom">
                            <i class="fas fa-list me-2"></i>View All Route Assignments
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger" id="deleteModalLabel">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Confirm Deletion
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this route assignment?</p>
                <p class="text-muted">This action cannot be undone and may affect user access.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete Route Assignment</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function deleteRouteAssign(routeAssignId) {
    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    const form = document.getElementById('deleteForm');
    
    form.action = `{{ route('route-assigns.index') }}/${routeAssignId}`;
    modal.show();
}
</script>
@endsection