@extends('admin/layouts/default')

@section('title')
    Maintenance Requests List
    @parent
@stop

@section('content')
    <section class="content-header">
        <h1>Requests Management</h1>
        <ol class="breadcrumb">
            <li>
                <a href="{{ route('dashboard') }}">
                    <i class="livicon" data-name="home" data-size="16" data-color="#000"></i>
                    Dashboard
                </a>
            </li>
            <li>Requests</li>
            <li class="active">Requests List</li>
        </ol>
    </section>

    <section class="content paddingleft_right15">
        <div class="row">
            <div class="panel panel-primary">
                <div class="panel-heading clearfix">
                    <h4 class="panel-title pull-left">
                        <i class="livicon" data-name="list-ul" data-size="16" data-loop="true" data-c="#fff" data-hc="white"></i>
                        Requests List
                    </h4>
                </div>
                <br />

                <div class="panel-body">

                    {{-- Statistics Cards for Two-Week Overview --}}
                    <div class="row" style="margin-bottom: 20px;">
                        <div class="col-md-3">
                            <div class="small-box bg-aqua">
                                <div class="inner">
                                    <h3 id="todayRequests">0</h3>
                                    <p>Today's Requests</p>
                                </div>
                                <div class="icon">
                                    <i class="fa fa-calendar-day"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="small-box bg-green">
                                <div class="inner">
                                    <h3 id="weekRequests">0</h3>
                                    <p>This Week (7 days)</p>
                                </div>
                                <div class="icon">
                                    <i class="fa fa-calendar-week"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="small-box bg-yellow">
                                <div class="inner">
                                    <h3 id="twoWeekRequests">0</h3>
                                    <p>Last 2 Weeks (14 days)</p>
                                </div>
                                <div class="icon">
                                    <i class="fa fa-calendar-alt"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="small-box bg-red">
                                <div class="inner">
                                    <h3 id="overdueRequests">0</h3>
                                    <p>Overdue (>4 hours)</p>
                                </div>
                                <div class="icon">
                                    <i class="fa fa-exclamation-triangle"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Tabs --}}
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#maintenance" role="tab" data-toggle="tab">Maintenance</a></li>
                        <li><a href="#network" role="tab" data-toggle="tab">Network</a></li>
                        <li><a href="#systemadmin" role="tab" data-toggle="tab">System Admin</a></li>
                        <li><a href="#teachinglearning" role="tab" data-toggle="tab">Teaching & Learning</a></li>
                        <li><a href="#softwaredevelopment" role="tab" data-toggle="tab">Software Development</a></li>
                        <li><a href="#infrastructure" role="tab" data-toggle="tab">Infrastructure</a></li>
                    </ul>

                    <div class="tab-content" style="margin-top:20px;">

                        @php
                            use Carbon\Carbon;

                            $categories = [
                                'maintenance' => 'maintenance',
                                'network' => 'network',
                                'systemadmin' => 'systemadmin',
                                'teachinglearning' => 'Teaching & Learning',
                                'softwaredevelopment' => 'Software Development',
                                'infrastructure' => 'infrastructure',
                            ];

                            $first = true;

                            // Get current page for each category from request
                            $activeTab = request()->get('active_tab', 'maintenance');

                            // Calculate date ranges
                            $today = Carbon::today();
                            $weekAgo = Carbon::today()->subDays(7);
                            $twoWeeksAgo = Carbon::today()->subDays(14);

                            // Get all requests as collection
                            $allRequests = DB::table('staffrequests')->where('status','0')->get();

                            // Ensure it's a collection
                            if (!is_object($allRequests) || !method_exists($allRequests, 'filter')) {
                                $allRequests = collect($allRequests);
                            }

                            // Calculate statistics using collection methods
                            $todayCount = $allRequests->filter(function($req) use ($today) {
                                return Carbon::parse($req->created_at)->isToday();
                            })->count();

                            $weekCount = $allRequests->filter(function($req) use ($weekAgo) {
                                return Carbon::parse($req->created_at)->gte($weekAgo);
                            })->count();

                            $twoWeekCount = $allRequests->filter(function($req) use ($twoWeeksAgo) {
                                return Carbon::parse($req->created_at)->gte($twoWeeksAgo);
                            })->count();

                            $overdueCount = $allRequests->filter(function($req) {
                                $hoursDiff = Carbon::parse($req->created_at)->diffInHours(Carbon::now());
                                return $hoursDiff > 4;
                            })->count();
                        @endphp

                        @foreach($categories as $key => $label)
                            @php
                                // Get search term for this category
                                $searchTerm = request()->get('search_' . $key, '');

                                // Get date filter for this category
                                $dateFilter = request()->get('date_filter_' . $key, 'all');

                                // Build query for paginated results
                                $query = DB::table('staffrequests')->where('requestcategory', $label)->where('status','0');

                                // Apply search filter
                                if (!empty($searchTerm)) {
                                    $query->where(function($q) use ($searchTerm) {
                                        $q->where('firstname', 'like', '%' . $searchTerm . '%')
                                          ->orWhere('lastname', 'like', '%' . $searchTerm . '%')
                                          ->orWhere('phone', 'like', '%' . $searchTerm . '%')
                                          ->orWhere('idnumber', 'like', '%' . $searchTerm . '%')
                                          ->orWhere('college', 'like', '%' . $searchTerm . '%')
                                          ->orWhere('department', 'like', '%' . $searchTerm . '%')
                                          ->orWhere('buildingno', 'like', '%' . $searchTerm . '%')
                                          ->orWhere('office', 'like', '%' . $searchTerm . '%')
                                          ->orWhere('description', 'like', '%' . $searchTerm . '%');
                                    });
                                }

                                // Apply date filter - FIXED: Proper whereDate syntax
                                switch($dateFilter) {
                                    case 'today':
                                        $query->whereDate('created_at', '=', $today);
                                        break;
                                    case 'week':
                                        $query->where('created_at', '>=', $weekAgo);
                                        break;
                                    case 'twoweeks':
                                        $query->where('created_at', '>=', $twoWeeksAgo);
                                        break;
                                    case 'overdue':
                                        $query->whereRaw('TIMESTAMPDIFF(HOUR, created_at, NOW()) > 4');
                                        break;
                                }

                                $paginatedResults = $query->orderBy('created_at', 'desc')->paginate(10, ['*'], 'page_' . $key, request()->get('page_' . $key, 1));

                                // Calculate category-specific statistics
                                $categoryRequests = DB::table('staffrequests')->where('requestcategory', $label)->where('status','1')->get();

                                // Ensure it's a collection
                                if (!is_object($categoryRequests) || !method_exists($categoryRequests, 'filter')) {
                                    $categoryRequests = collect($categoryRequests);
                                }

                                $catTodayCount = $categoryRequests->filter(function($req) use ($today) {
                                    return Carbon::parse($req->created_at)->isToday();
                                })->count();

                                $catWeekCount = $categoryRequests->filter(function($req) use ($weekAgo) {
                                    return Carbon::parse($req->created_at)->gte($weekAgo);
                                })->count();

                                $catTwoWeekCount = $categoryRequests->filter(function($req) use ($twoWeeksAgo) {
                                    return Carbon::parse($req->created_at)->gte($twoWeeksAgo);
                                })->count();
                            @endphp

                            <div role="tabpanel" class="tab-pane fade {{ $first ? 'in active' : '' }}" id="{{ $key }}">

                                {{-- Category Statistics --}}
                                <div class="row" style="margin-bottom: 15px;">
                                    <div class="col-md-12">
                                        <div class="alert alert-info">
                                            <strong><i class="fa fa-chart-bar"></i> {{ ucfirst($label) }} Statistics:</strong>
                                            Today: <span class="badge badge-info">{{ $catTodayCount }}</span> |
                                            This Week: <span class="badge badge-success">{{ $catWeekCount }}</span> |
                                            Last 2 Weeks: <span class="badge badge-warning">{{ $catTwoWeekCount }}</span>
                                        </div>
                                    </div>
                                </div>

                                {{-- Search and Filter Section --}}
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="pull-right" style="display: flex; gap: 10px; flex-wrap: wrap;">
                                            <select id="dateFilter_{{ $key }}" class="form-control" style="width: auto;" onchange="applyDateFilter('{{ $key }}')">
                                                <option value="all" {{ $dateFilter == 'all' ? 'selected' : '' }}>All Time</option>
                                                <option value="today" {{ $dateFilter == 'today' ? 'selected' : '' }}>Today</option>
                                                <option value="week" {{ $dateFilter == 'week' ? 'selected' : '' }}>Last 7 Days</option>
                                                <option value="twoweeks" {{ $dateFilter == 'twoweeks' ? 'selected' : '' }}>Last 14 Days</option>
                                                <option value="overdue" {{ $dateFilter == 'overdue' ? 'selected' : '' }}>Overdue (>4 hours)</option>
                                            </select>

                                            <div style="position: relative; display: inline-block;">
                                                <input type="text"
                                                       id="searchInput_{{ $key }}"
                                                       name="search_{{ $key }}"
                                                       placeholder="Search by name, ID, department..."
                                                       class="form-control"
                                                       value="{{ $searchTerm }}"
                                                       style="width:250px; padding-right: 30px;">
                                                <span style="position: absolute; right: 10px; top: 10px;">
                                                    <i class="fa fa-search"></i>
                                                </span>
                                            </div>

                                            <button type="button" class="btn btn-default" onclick="clearSearch('{{ $key }}')">
                                                <i class="fa fa-times"></i> Clear
                                            </button>

                                            <span id="searchResultCount_{{ $key }}" class="badge" style="padding: 8px 12px; margin-top: 5px;">
                                                {{ $paginatedResults->total() }} results
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <br />

                                <div style="overflow-x:auto;">
                                    <table class="table table-bordered table-hover" id="table_{{ $key }}">
                                        <thead>
                                        <tr class="filters">
                                            <th>ID</th>
                                            <th>Firstname</th>
                                            <th>Lastname</th>
                                            <th>Phone</th>
                                            <th>Idnumber</th>
                                            {{--<th>College</th>--}}
                                            <th>Department</th>
                                            {{--<th>Buildingno</th>--}}
                                            {{--<th>Office</th>--}}
                                            <th>Requestcategory</th>
                                            <th>Description</th>
                                            <th>Request Date</th>
                                            <th>Time Status</th>
                                            <th>Assign Expert</th>
                                        <tr>
                                        </thead>
                                        <tbody>
                                        @forelse ($paginatedResults as $req)
                                            @php
                                                $created = Carbon::parse($req->created_at);
                                                $now = Carbon::now();
                                                $hoursDiff = $created->diffInHours($now);
                                                $daysDiff = $created->diffInDays($now);
                                                $diffHuman = $created->diffForHumans($now, ['parts' => 2]);

                                                // Determine row color based on age
                                                $rowClass = '';
                                                if ($hoursDiff > 4 && $hoursDiff <= 24) {
                                                    $rowClass = 'warning-row';
                                                } elseif ($hoursDiff > 24 && $hoursDiff <= 48) {
                                                    $rowClass = 'danger-row';
                                                } elseif ($hoursDiff > 48) {
                                                    $rowClass = 'critical-row';
                                                }

                                                // Determine status badge
                                                if ($hoursDiff <= 4) {
                                                    $statusBadge = '<span class="badge bg-success">✓ Within SLA (' . $diffHuman . ')</span>';
                                                } elseif ($hoursDiff <= 24) {
                                                    $statusBadge = '<span class="badge bg-warning">⚠ Overdue (' . $diffHuman . ')</span>';
                                                } elseif ($hoursDiff <= 48) {
                                                    $statusBadge = '<span class="badge bg-orange">!! Urgent (' . $diffHuman . ')</span>';
                                                } else {
                                                    $statusBadge = '<span class="badge bg-danger">!!! Critical (' . $diffHuman . ')</span>';
                                                }

                                                // Check if within 2 weeks
                                                $isWithinTwoWeeks = $created->gte($twoWeeksAgo);
                                                $twoWeekBadge = '';
                                                if ($isWithinTwoWeeks) {
                                                    $twoWeekBadge = '<span class="label label-info" style="margin-left: 5px;" title="Within last 14 days"><i class="fa fa-calendar-check"></i> Recent</span>';
                                                }
                                            @endphp

                                            <tr class="{{ $rowClass }}" @if($hoursDiff > 4) title="Request is overdue by {{ $diffHuman }}" @endif>
                                                <td>{{ $req->id }} {!! $twoWeekBadge !!}</td>
                                                <td>{{ $req->firstname }}</td>
                                                <td>{{ $req->lastname }}</td>
                                                <td>{{ $req->phone }}</td>
                                                <td>{{ $req->idnumber }}</td>
                                                {{--<td>{{ $req->college }}</td>--}}
                                                <td>{{ $req->department }}</td>
                                                {{--<td>{{ $req->buildingno }}</td>--}}
                                                {{--<td>{{ $req->office }}</td>--}}
                                                <td>{{ $req->requestcategory }}</td>
                                                <td>
                                                    <button type="button" class="btn btn-info btn-xs"
                                                            data-toggle="modal"
                                                            data-target="#descriptionModal"
                                                            data-description="{{ $req->description }}">
                                                        <i class="fa fa-eye"></i> View
                                                    </button>
                                                </td>
                                                <td>
                                                    <strong>{{ $created->format('Y-m-d H:i') }}</strong><br>
                                                    <small class="text-muted">{{ $created->diffForHumans() }}</small>
                                                </td>
                                                <td>
                                                    {!! $statusBadge !!}
                                                    @if($daysDiff >= 14)
                                                        <br><small class="text-danger"><i class="fa fa-exclamation-circle"></i> 14+ days old</small>
                                                    @elseif($daysDiff >= 7)
                                                        <br><small class="text-warning"><i class="fa fa-clock"></i> 7-14 days old</small>
                                                    @endif
                                                </td>
                                                <td>
                                                    <form action="{{ route('requests.assignExpert', $req->id) }}"
                                                          method="POST" style="display:inline-block;">

                                                        <button type="submit" class="btn btn-primary btn-sm">
                                                            <i class="fa fa-user-plus"></i> Assign Expert
                                                        </button>
                                                    </form>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="14" class="text-center">
                                                    <div class="alert alert-info">
                                                        <i class="fa fa-info-circle"></i> No requests found for this category
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforelse
                                        </tbody>
                                    </table>
                                </div>

                                {{-- Pagination for this tab --}}
                                @if($paginatedResults->total() > 0)
                                    <div class="text-center">
                                        {{ $paginatedResults->appends([
                                            'active_tab' => $key,
                                            'page_' . $key => $paginatedResults->currentPage(),
                                            'search_' . $key => $searchTerm,
                                            'date_filter_' . $key => $dateFilter
                                        ])->links() }}
                                    </div>
                                @endif
                            </div>

                            @php $first = false; @endphp
                        @endforeach

                    </div>

                </div>
            </div>
        </div>
    </section>

    {{-- Description Modal --}}
    <div class="modal fade" id="descriptionModal" tabindex="-1" role="dialog"
         aria-labelledby="descriptionModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Request Description</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="modalDescriptionText"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                            data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

@stop

@section('footer_scripts')
    <script>
        let searchTimeouts = {};

        $(function () {
            $('body').on('hidden.bs.modal', '.modal', function () {
                $(this).removeData('bs.modal');
            });

            // Update statistics counters
            updateStatisticsCounters();

            // Preserve active tab after pagination
            var activeTab = '{{ request()->get('active_tab', 'maintenance') }}';
            if (activeTab) {
                $('.nav-tabs a[href="#' + activeTab + '"]').tab('show');
            }

            // Update URL with active tab when tab changes
            $('.nav-tabs a').on('shown.bs.tab', function (e) {
                var tabId = $(e.target).attr('href').substring(1);
                var url = new URL(window.location.href);
                url.searchParams.set('active_tab', tabId);
                window.history.pushState({}, '', url);
            });

            // Setup auto-search for all tabs
            @foreach($categories as $key => $label)
                setupAutoSearch('{{ $key }}');
            @endforeach
        });

        function updateStatisticsCounters() {
            // Get counts from PHP variables
            document.getElementById('todayRequests').innerHTML = '{{ $todayCount }}';
            document.getElementById('weekRequests').innerHTML = '{{ $weekCount }}';
            document.getElementById('twoWeekRequests').innerHTML = '{{ $twoWeekCount }}';
            document.getElementById('overdueRequests').innerHTML = '{{ $overdueCount }}';

            // Add animation to counters
            $('.small-box .inner h3').each(function() {
                $(this).css('animation', 'pulse 0.5s ease');
                setTimeout(() => {
                    $(this).css('animation', '');
            }, 500);
            });
        }

        function setupAutoSearch(tabKey) {
            const searchInput = document.getElementById('searchInput_' + tabKey);
            if (!searchInput) return;

            searchInput.addEventListener('input', function() {
                if (searchTimeouts[tabKey]) {
                    clearTimeout(searchTimeouts[tabKey]);
                }

                searchTimeouts[tabKey] = setTimeout(function() {
                    performSearch(tabKey);
                }, 500);
            });

            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    if (searchTimeouts[tabKey]) {
                        clearTimeout(searchTimeouts[tabKey]);
                    }
                    performSearch(tabKey);
                }
            });
        }

        function applyDateFilter(tabKey) {
            const dateFilter = document.getElementById('dateFilter_' + tabKey).value;
            const url = new URL(window.location.href);

            if (dateFilter && dateFilter !== 'all') {
                url.searchParams.set('date_filter_' + tabKey, dateFilter);
            } else {
                url.searchParams.delete('date_filter_' + tabKey);
            }

            url.searchParams.set('page_' + tabKey, 1);
            url.searchParams.set('active_tab', tabKey);
            window.location.href = url.toString();
        }

        function performSearch(tabKey) {
            const searchInput = document.getElementById('searchInput_' + tabKey);
            const searchTerm = searchInput.value;
            const dateFilter = document.getElementById('dateFilter_' + tabKey).value;
            const url = new URL(window.location.href);

            if (searchTerm) {
                url.searchParams.set('search_' + tabKey, searchTerm);
            } else {
                url.searchParams.delete('search_' + tabKey);
            }

            if (dateFilter && dateFilter !== 'all') {
                url.searchParams.set('date_filter_' + tabKey, dateFilter);
            }

            url.searchParams.set('page_' + tabKey, 1);
            url.searchParams.set('active_tab', tabKey);
            window.location.href = url.toString();
        }

        function clearSearch(tabKey) {
            const searchInput = document.getElementById('searchInput_' + tabKey);
            if (searchInput) {
                searchInput.value = '';
                performSearch(tabKey);
            }
        }

        $('#descriptionModal').on('show.bs.modal', function (event) {
            const button = $(event.relatedTarget);
            const description = button.data('description');
            $('#modalDescriptionText').text(description);
        });
    </script>

    <style>
        /* Statistics Cards Styling */
        .small-box {
            border-radius: 10px;
            position: relative;
            display: block;
            margin-bottom: 20px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .small-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .small-box > .inner {
            padding: 10px;
        }

        .small-box h3 {
            font-size: 38px;
            font-weight: bold;
            margin: 0 0 10px 0;
            white-space: nowrap;
            padding: 0;
        }

        .small-box p {
            font-size: 15px;
            margin-bottom: 0;
        }

        .small-box .icon {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 0;
            font-size: 70px;
            color: rgba(0,0,0,0.15);
        }

        .bg-aqua {
            background-color: #00c0ef !important;
            color: #fff;
        }

        .bg-green {
            background-color: #00a65a !important;
            color: #fff;
        }

        .bg-yellow {
            background-color: #f39c12 !important;
            color: #fff;
        }

        .bg-red {
            background-color: #dd4b39 !important;
            color: #fff;
        }

        .bg-orange {
            background-color: #ff851b !important;
            color: #fff;
        }

        /* Row color coding for request age */
        .warning-row {
            background-color: #fff3cd !important;
        }

        .danger-row {
            background-color: #ffe5e5 !important;
        }

        .critical-row {
            background-color: #ffcccc !important;
        }

        /* Badge styling */
        .badge {
            padding: 6px 12px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
        }

        .bg-success {
            background-color: #28a745;
            color: white;
        }

        .bg-warning {
            background-color: #ffc107;
            color: #333;
        }

        .bg-danger {
            background-color: #dc3545;
            color: white;
        }

        .bg-orange {
            background-color: #fd7e14;
            color: white;
        }

        .label-info {
            background-color: #17a2b8;
            color: white;
            padding: 3px 6px;
            border-radius: 4px;
            font-size: 10px;
        }

        /* Animation */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        /* Table hover effect */
        .table-hover tbody tr:hover {
            background-color: #f5f5f5;
            cursor: pointer;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .small-box h3 {
                font-size: 25px;
            }

            .small-box .icon {
                font-size: 50px;
            }

            .pull-right {
                float: none !important;
                margin-bottom: 15px;
            }

            .pull-right > div,
            .pull-right > select,
            .pull-right > button {
                width: 100% !important;
                margin-bottom: 10px;
            }

            #searchInput_maintenance,
            #searchInput_network,
            #searchInput_systemadmin,
            #searchInput_teachinglearning,
            #searchInput_softwaredevelopment,
            #searchInput_infrastructure {
                width: 100% !important;
            }
        }

        /* Print styles */
        @media print {
            .small-box {
                break-inside: avoid;
            }

            .btn,
            .pagination,
            .form-control,
            .pull-right {
                display: none !important;
            }
        }
    </style>
@stop