@extends('layouts.app')

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

@section('page-title', 'Route Assignments Management')

@section('styles')
<style>
    /* Make everything bigger */
    h3 {
        font-size: 1.4rem !important;
    }
    h4 {
        font-size: 1.3rem !important;
    }
    h5 {
        font-size: 1.15rem !important;
    }
    p, span, small {
        font-size: 1rem !important;
    }
    
    /* Reduce font size in header row */
    .container-fluid > .row:first-child h3 {
        font-size: 1.1rem !important;
    }
    
    .container-fluid > .row:first-child p {
        font-size: 0.8rem !important;
    }
    
    /* Reduce font size in statistics cards row */
    .container-fluid > .row:nth-child(2) h3,
    .container-fluid > .row:nth-child(2) .fs-4 {
        font-size: 1.1rem !important;
    }
    
    .container-fluid > .row:nth-child(2) p,
    .container-fluid > .row:nth-child(2) .small {
        font-size: 0.75rem !important;
    }
    
    /* Reduce font size in filters row */
    .container-fluid > .row:nth-child(3) h4 {
        font-size: 1rem !important;
    }
    
    .container-fluid > .row:nth-child(3) p,
    .container-fluid > .row:nth-child(3) span,
    .container-fluid > .row:nth-child(3) label {
        font-size: 0.85rem !important;
    }
    
    /* Reduce icon sizes in header row */
    .container-fluid > .row:first-child .fa-route,
    .container-fluid > .row:first-child i {
        font-size: 1rem !important;
    }
    
    /* Reduce icon sizes in statistics cards */
    .container-fluid > .row:nth-child(2) .fa-lg {
        font-size: 1rem !important;
    }
    
    /* Reduce icon sizes in filters row */
    .container-fluid > .row:nth-child(3) i {
        font-size: 0.85rem !important;
    }
    
    /* Card padding and margins bigger */
    .custom-card {
        margin-bottom: 1rem !important;
    }
    .custom-card-header {
        padding: 0.75rem 1rem !important;
    }
    .custom-card-body {
        padding: 0.85rem 1rem !important;
    }
    
    /* Reduce height of header row */
    .container-fluid > .row:first-child .custom-card-header {
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }
    
    /* Reduce height of statistics cards row */
    .container-fluid > .row:nth-child(2) .custom-card-body.py-3 {
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
    }
    
    /* Reduce height of filters row */
    .container-fluid > .row:nth-child(3) .custom-card-header {
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }
    
    .container-fluid > .row:nth-child(3) .custom-card-body {
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }
    
    /* Reduce line height and margins in header row */
    .container-fluid > .row:first-child h3 {
        margin-bottom: 0.1rem !important;
        line-height: 1.2 !important;
    }
    
    .container-fluid > .row:first-child p {
        margin-bottom: 0 !important;
        line-height: 1.2 !important;
    }
    
    /* Reduce margins in statistics cards */
    .container-fluid > .row:nth-child(2) .mb-2 {
        margin-bottom: 0.1rem !important;
    }
    
    /* Reduce margins in filters row */
    .container-fluid > .row:nth-child(3) h4 {
        margin-bottom: 0 !important;
        line-height: 1.2 !important;
    }
    
    /* Table cell padding bigger */
    .table th,
    .table td {
        padding: 0.65rem 0.75rem !important;
        font-size: 1rem !important;
    }
    
    /* Reduce font size in All Route Assignments header section */
    .custom-card-header h4 {
        font-size: 1rem !important;
    }
    
    .custom-card-header .text-white.small {
        font-size: 0.7rem !important;
    }
    
    .custom-card-header #perPageSelect {
        font-size: 0.7rem !important;
    }
    
    /* Reduce height of All Route Assignments header section */
    .custom-card-header {
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }
    
    /* Reduce line height and margins in header */
    .custom-card-header h4 {
        margin-bottom: 0 !important;
        line-height: 1.2 !important;
    }
    
    .custom-card-header .d-flex {
        align-items: center !important;
    }
    
    /* Reduce font size in All Route Assignments table */
    .custom-table th {
        font-size: 0.75rem !important;
    }
    
    .custom-table td {
        font-size: 0.8rem !important;
    }
    
    .custom-table .badge {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    .custom-table code {
        font-size: 0.75rem !important;
    }
    
    .custom-table small {
        font-size: 0.7rem !important;
    }
    
    .custom-table .btn-sm {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    /* Icon sizes bigger */
    .fa-lg {
        font-size: 1.4rem !important;
    }
    .fa-2x {
        font-size: 1.8rem !important;
    }
    .fa-3x {
        font-size: 2.5rem !important;
    }
    
    /* Button sizes bigger */
    .btn {
        padding: 0.5rem 1rem !important;
        font-size: 1rem !important;
    }
    .btn-sm {
        padding: 0.4rem 0.7rem !important;
        font-size: 0.95rem !important;
    }
    
    /* Badge sizes bigger */
    .badge {
        font-size: 0.95rem !important;
        padding: 0.4rem 0.75rem !important;
    }
    
    /* Form control sizes bigger */
    .form-select,
    .form-control {
        padding: 0.6rem 0.8rem !important;
        font-size: 1rem !important;
    }
    
    /* Make Filters & Search select fields smaller */
    .container-fluid > .row:nth-child(3) .form-select,
    .container-fluid > .row:nth-child(3) .form-control {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.85rem !important;
        height: auto !important;
    }
    
    /* Make filter button smaller */
    .container-fluid > .row:nth-child(3) .btn {
        padding: 0.35rem 0.6rem !important;
        font-size: 0.85rem !important;
    }
    
    /* Row margins smaller - reduce gaps between sections */
    .row {
        margin-bottom: 0 !important;
    }
    .mb-4 {
        margin-bottom: 0 !important;
    }
    .mb-3 {
        margin-bottom: 0.1rem !important;
    }
    .mb-2 {
        margin-bottom: 0 !important;
    }
    
    /* Reduce gap between header, statistics, and filters rows */
    .container-fluid > .row.mb-4 {
        margin-bottom: 0 !important;
    }
    
    /* Specifically target the three main rows - no gap */
    .container-fluid > .row:first-child,
    .container-fluid > .row:nth-child(2),
    .container-fluid > .row:nth-child(3) {
        margin-bottom: 0 !important;
    }
    
    /* Remove any additional spacing */
    .container-fluid > .row.mb-4 + .row.mb-4 {
        margin-top: 0 !important;
    }
    
    /* Reduce margin between card columns */
    .col-lg-3.col-md-6.mb-3 {
        margin-bottom: 0.25rem !important;
    }
    
    /* Reduce gap between statistics card columns */
    .row.mb-4 > .col-lg-3.col-md-6 {
        padding-left: 0.15rem !important;
        padding-right: 0.15rem !important;
    }
    
    /* Reduce gutter for statistics cards row */
    .row.mb-4 {
        --bs-gutter-x: 0.3rem !important;
        margin-left: -0.15rem !important;
        margin-right: -0.15rem !important;
    }
    
    .row.mb-4 > * {
        padding-left: 0.15rem !important;
        padding-right: 0.15rem !important;
    }
    
    /* Statistics card padding smaller */
    .custom-card-body.py-3 {
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Gap in flex containers bigger */
    .gap-2 {
        gap: 0.75rem !important;
    }
    
    /* Modal sizes bigger */
    .modal-header {
        padding: 0.85rem 1rem !important;
    }
    .modal-body {
        padding: 0.85rem 1rem !important;
        font-size: 1rem !important;
    }
    .modal-footer {
        padding: 0.75rem 1rem !important;
    }
    
    /* Alert padding bigger */
    .alert {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
    }
    
    /* Empty state padding bigger */
    .py-5 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    
    /* Container padding bigger */
    .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Form padding */
    form {
        padding: 0 !important;
    }
    
    /* Input group padding bigger */
    .input-group-text {
        padding: 0.6rem 0.8rem !important;
    }
    
    /* Pagination size bigger */
    .pagination {
        font-size: 1rem !important;
    }
    .pagination .page-link {
        padding: 0.5rem 0.8rem !important;
    }
    
    /* Statistics card numbers bigger */
    .custom-card-body h3,
    .custom-card-body h2 {
        font-size: 1.5rem !important;
    }
    
    /* Statistics card text bigger */
    .custom-card-body p {
        font-size: 0.95rem !important;
    }
</style>
@endsection

@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-route me-2"></i>
                                Route Assignments
                            </h3>
                            <p class="mb-0 opacity-75">Manage route assignments for menus</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('route-assigns.create') }}" class="btn btn-primary btn-custom">
                                <i class="fas fa-plus me-2"></i>Add Route Assignment
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card">
                <div class="custom-card-body py-3">
                    <div class="d-flex align-items-center mb-2">
                        <i class="fas fa-route text-primary fa-lg me-4"></i>
                        <div class="flex-grow-1 text-center">
                            <h3 class="mb-0 text-primary fs-4">{{ $routeAssigns->total() }}</h3>
                            <p class="mb-0 text-muted small">Total Routes</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card">
                <div class="custom-card-body py-3">
                    <div class="d-flex align-items-center mb-2">
                        <i class="fas fa-check-circle text-success fa-lg me-4"></i>
                        <div class="flex-grow-1 text-center">
                            <h3 class="mb-0 text-success fs-4">{{ $routeAssigns->where('is_active', true)->count() }}</h3>
                            <p class="mb-0 text-muted small">Active Routes</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card">
                <div class="custom-card-body py-3">
                    <div class="d-flex align-items-center mb-2">
                        <i class="fas fa-exclamation-triangle text-warning fa-lg me-4"></i>
                        <div class="flex-grow-1 text-center">
                            <h3 class="mb-0 text-warning fs-4">{{ $routeAssigns->where('is_active', false)->count() }}</h3>
                            <p class="mb-0 text-muted small">Inactive Routes</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card">
                <div class="custom-card-body py-3">
                    <div class="d-flex align-items-center mb-2">
                        <i class="fas fa-bars text-info fa-lg me-4"></i>
                        <div class="flex-grow-1 text-center">
                            <h3 class="mb-0 text-info fs-4">{{ $menus->count() }}</h3>
                            <p class="mb-0 text-muted small">Total Menus</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-filter me-2"></i>
                        Filters & Search
                    </h4>
                </div>
                <div class="custom-card-body">
                    <form method="GET" action="{{ route('route-assigns.index') }}" class="d-flex gap-2 align-items-end">
                        <div class="flex-grow-1">
                            <select class="form-select" id="menu_id" name="menu_id">
                                <option value="">All Menus</option>
                                @foreach($menus as $menu)
                                    <option value="{{ $menu->id }}" {{ request('menu_id') == $menu->id ? 'selected' : '' }}>
                                        {{ $menu->name }}
                                    </option>
                                    @if($menu->children && $menu->children->count() > 0)
                                        @foreach($menu->children as $child)
                                            <option value="{{ $child->id }}" {{ request('menu_id') == $child->id ? 'selected' : '' }}>
                                                &nbsp;&nbsp;&nbsp;└─ {{ $child->name }}
                                            </option>
                                        @endforeach
                                    @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="flex-grow-1">
                            <select class="form-select" id="is_active" name="is_active">
                                <option value="">All Status</option>
                                <option value="1" {{ request('is_active') == '1' ? 'selected' : '' }}>Active</option>
                                <option value="0" {{ request('is_active') == '0' ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
                        <div class="flex-grow-1">
                            <input type="text" class="form-control" id="search" name="search" 
                                   value="{{ request('search') }}" placeholder="Search by route or permission...">
                        </div>
                        <div>
                            <button type="submit" class="btn btn-primary btn-custom">
                                <i class="fas fa-filter me-2"></i>Filter
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Route Assignments List -->
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h4 class="mb-0">
                            <i class="fas fa-list me-2"></i>
                            All Route Assignments
                        </h4>
                        <div class="d-flex align-items-center gap-2">
                            <span class="text-white small">Show</span>
                            <form method="GET" action="{{ route('route-assigns.index') }}" id="perPageForm" class="d-inline">
                                @if(request('menu_id'))
                                    <input type="hidden" name="menu_id" value="{{ request('menu_id') }}">
                                @endif
                                @if(request('is_active'))
                                    <input type="hidden" name="is_active" value="{{ request('is_active') }}">
                                @endif
                                @if(request('search'))
                                    <input type="hidden" name="search" value="{{ request('search') }}">
                                @endif
                                <select name="per_page" id="perPageSelect" class="form-select form-select-sm" style="width: auto; display: inline-block; color: white; background-color: transparent; border-color: rgba(255,255,255,0.5);" onchange="document.getElementById('perPageForm').submit();">
                                    @php
                                        $currentPerPage = request('per_page', 100);
                                        // Check if "all" is selected (9999 or 'all')
                                        $isAllSelected = ($currentPerPage == 9999 || $currentPerPage == 'all' || $currentPerPage == 'All');
                                    @endphp
                                    <option value="10" {{ $currentPerPage == 10 ? 'selected' : '' }} style="color: #000;">10</option>
                                    <option value="15" {{ $currentPerPage == 15 ? 'selected' : '' }} style="color: #000;">15</option>
                                    <option value="25" {{ $currentPerPage == 25 ? 'selected' : '' }} style="color: #000;">25</option>
                                    <option value="50" {{ $currentPerPage == 50 ? 'selected' : '' }} style="color: #000;">50</option>
                                    <option value="100" {{ $currentPerPage == 100 ? 'selected' : '' }} style="color: #000;">100</option>
                                    <option value="200" {{ $currentPerPage == 200 ? 'selected' : '' }} style="color: #000;">200</option>
                                    <option value="300" {{ $currentPerPage == 300 ? 'selected' : '' }} style="color: #000;">300</option>
                                    <option value="all" {{ $isAllSelected ? 'selected' : '' }} style="color: #000;">All</option>
                                </select>
                            </form>
                            <span class="text-white small">entries</span>
                        </div>
                    </div>
                </div>
                <div class="custom-card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @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

                    @if($routeAssigns->count() > 0)
                        <div class="table-responsive">
                            <table class="table custom-table">
                                <thead>
                                    <tr>
                                        <th>SL</th>
                                        <th>Menu</th>
                                        <th>Route</th>
                                        <th>Permission</th>
                                        <th>Status</th>
                                        <th>Sort Order</th>
                                        <th>Created</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($routeAssigns as $routeAssign)
                                        <tr>
                                            <td>
                                                <span class="badge bg-secondary">
                                                    {{ ($routeAssigns->currentPage() - 1) * $routeAssigns->perPage() + $loop->iteration }}
                                                </span>
                                            </td>
                                            <td>
                                                @if($routeAssign->menu)
                                                    @if($routeAssign->menu->parent)
                                                        <div>
                                                            <span class="badge bg-secondary custom-badge">
                                                                <i class="fas fa-folder me-1"></i>
                                                                {{ $routeAssign->menu->parent->name }}
                                                            </span>
                                                            <br>
                                                            <span class="badge bg-info custom-badge mt-1">
                                                                <i class="fas fa-bars me-1"></i>
                                                                └─ {{ $routeAssign->menu->name }}
                                                            </span>
                                                        </div>
                                                    @else
                                                        <span class="badge bg-primary custom-badge">
                                                            <i class="fas fa-bars me-1"></i>
                                                            {{ $routeAssign->menu->name }}
                                                        </span>
                                                    @endif
                                                @else
                                                    <span class="text-muted">
                                                        <i class="fas fa-minus-circle me-1"></i>
                                                        No Menu
                                                    </span>
                                                @endif
                                            </td>
                                            <td>
                                                <code class="text-primary">{{ $routeAssign->route }}</code>
                                            </td>
                                            <td>
                                                @if($routeAssign->permission)
                                                    <div>
                                                        <strong>{{ $routeAssign->permission->description }}</strong>
                                                        <br>
                                                        <small class="text-muted">
                                                            <code>{{ $routeAssign->permission->permission_key }}</code>
                                                        </small>
                                                    </div>
                                                @else
                                                    <span class="text-muted">No Permission</span>
                                                @endif
                                            </td>
                                            <td>
                                                @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
                                            </td>
                                            <td>
                                                <span class="badge bg-secondary">{{ $routeAssign->sort_order ?? 'N/A' }}</span>
                                            </td>
                                            <td>
                                                <small class="text-muted">
                                                    {{ $routeAssign->created_at->format('M d, Y') }}
                                                </small>
                                            </td>
                                            <td>
                                                <div class="d-flex gap-2">
                                                    <a href="{{ route('route-assigns.show', $routeAssign) }}" 
                                                       class="btn btn-sm btn-outline-info" 
                                                       data-bs-toggle="tooltip" title="View Details">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    <a href="{{ route('route-assigns.edit', $routeAssign) }}" 
                                                       class="btn btn-sm btn-outline-primary" 
                                                       data-bs-toggle="tooltip" title="Edit">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    <button class="btn btn-sm btn-outline-danger" 
                                                            onclick="deleteRouteAssign({{ $routeAssign->id }})"
                                                            data-bs-toggle="tooltip" title="Delete">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Pagination -->
                        <div class="d-flex justify-content-center mt-4">
                            {{ $routeAssigns->links() }}
                        </div>
                    @else
                        <div class="text-center py-5">
                            <div class="text-muted mb-3">
                                <i class="fas fa-route fa-3x"></i>
                            </div>
                            <h5 class="text-muted">No route assignments found</h5>
                            <p class="text-muted">Start by creating your first route assignment.</p>
                            <a href="{{ route('route-assigns.create') }}" class="btn btn-primary btn-custom">
                                <i class="fas fa-plus me-2"></i>Create Route Assignment
                            </a>
                        </div>
                    @endif
                </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>
document.addEventListener('DOMContentLoaded', function() {
    initializeTooltips();
});

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();
}

function initializeTooltips() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
}
</script>
@endsection