@extends('layouts.app')
@section('page-pretitle', __('Management'))
@section('page-title', __('Dashboard'))

@section('content')

<!-- Flash Messages -->
@if ($errors->any())
    <div id="validation-alert" class="alert alert-danger alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-red text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
        <div class="flex-grow-1">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if (session('success'))
    <div id="success-alert" class="alert alert-success alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-green text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
        <div class="flex-grow-1">
            {{ session('success') }}
        </div>
        <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<!-- Responsive Styles -->
<style>
    @media (max-width: 768px) {
        #validation-alert, #success-alert {
            width: 90% !important; /* Adjust the width for small screens */
            left: 5% !important; /* Center it horizontally */
        }
    }

    @media (max-width: 576px) {
        #validation-alert, #success-alert {
            width: 95% !important; /* Make the alert almost full width on very small screens */
            left: 2.5% !important; /* Slightly adjust for better centering */
        }
    }
</style>

<div class="row row-cards">
    <div class="col-12">
        
        @if($announcements->count() > 0)
            <div id="announcementCarousel" class="carousel slide mb-4 position-relative" data-bs-ride="carousel" data-bs-interval="3000">
                <div class="carousel-inner">
                    @foreach($announcements as $index => $announcement)
                        <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                            <div class="d-flex justify-content-center">
                                <div class="alert alert-info d-flex align-items-start gap-3 p-3 rounded shadow-sm w-75">
                                    <i class="ti ti-flag-exclamation text-danger fs-4 mt-1"></i>
                                    <div>
                                        <h4 class="mb-1 text-start">{{ $announcement->title }}</h4>
                                        <p class="mb-0 text-start">{{ \Illuminate\Support\Str::limit($announcement->body, 130) }}</p>
                                        <small class="d-flex justify-content-between text-muted">
                                            Posted by {{ $announcement->creator->name }} on {{ $announcement->created_at->format('d M Y') }}
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <button class="carousel-control-prev" type="button" data-bs-target="#announcementCarousel" data-bs-slide="prev"
                    style="width: 40px; top: 50%; transform: translateY(-50%); left: 100px;">
                    <span class="carousel-control-prev-icon bg-secondary bg-opacity-25 rounded-circle" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>

                <button class="carousel-control-next" type="button" data-bs-target="#announcementCarousel" data-bs-slide="next"
                    style="width: 40px; top: 50%; transform: translateY(-50%); right: 100px;">
                    <span class="carousel-control-next-icon bg-secondary bg-opacity-25 rounded-circle" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        @else
            <div class="alert alert-secondary text-center w-75 mx-auto mb-4" role="alert">
                There are no announcements at the moment.
            </div>
        @endif


        <div class="row">
        <div class="col-12 mb-3 mt-1">
            {{-- <div class="card shadow-sm mb-4 p-4"> --}}
                <div class="row mb-6 g-3">
                    {{-- Assigned Projects (Takes two rows / taller) --}}
                    
                    @php
                        $isAdmin = auth()->user()->role === 'admin';
                    @endphp

                    <div class="col-md-3">
                        <div class="card card-custom card-animated border-0 shadow-sm h-100 rounded-4 bg-white">
                            <div class="card-body d-flex flex-column justify-content-center text-center p-4">
                                <h4 class="fw-semibold text-dark mb-0" style="font-size: 18px;">
                                    {{ $isAdmin ? 'Total Projects' : 'Your Assigned Projects' }}
                                </h4>
                                <hr class="my-2" style="border-top: 2px solid #dee2e6; width: 50px; margin: 0 auto;">
                                <h2 class="display-4 text-primary mt-0 fw-bold">
                                    {{ $isAdmin ? $totalProjects : $totalAssignedProjects }}
                                </h2>
                            </div>
                        </div>
                    </div>

                    {{-- <div class="col-md-3">
                        <div class="card border-0 shadow-sm h-100 rounded-4 bg-white">
                            <div class="card-body d-flex flex-column justify-content-center text-center p-4">
                                <h4 class="fw-semibold text-dark mb-0">Your Assigned Projects</h4>
                                <hr class="my-2" style="border-top: 2px solid #dee2e6; width: 50px; margin: 0 auto;">
                                <h2 class="display-4 text-primary mt-0 fw-bold">{{ $totalAssignedProjects }}</h2>
                            </div>
                        </div>
                    </div> --}}

                    {{-- Project Types --}}
                    <div class="col-md-9">
                        <div class="row g-3">
                            @php
                                $types = [
                                    'Pending Project' => ['text-warning', 'bg-warning-subtle'],
                                    'On Going Project' => ['text-primary', 'bg-primary-subtle'],
                                    'KIV Project' => ['text-secondary', 'bg-secondary-subtle'],
                                    'Cancel Project' => ['text-danger', 'bg-danger-subtle'],
                                    'Completed Project' => ['text-success', 'bg-success-subtle'],
                                ];
                            @endphp

                            @foreach ($types as $type => [$textClass, $bgClass])
                                <div class="col-md-4">
                                    <div class="card card-custom card-animated border-0 bg-white shadow-sm h-100">
                                        <div class="card-body d-flex align-items-center">
                                            <div class="me-3 d-flex justify-content-center align-items-center rounded-circle {{ $textClass }} {{ $bgClass }}" style="width: 40px; height: 40px;">
                                                <i class="ti ti-folder" style="font-size: 20px;"></i>
                                            </div>
                                            <div>
                                                <div class="fw-bold text-dark" style="font-size: 22px;">{{ $projectTypeCounts[$type] ?? 0 }}</div>
                                                <small class="text-dark">{{ $type }}</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                    </div>
                </div>


                {{-- Submission Progression Status --}}
                <div class="hr-text my-4">Submission Progression Status</div>

                <div class="d-flex flex-nowrap overflow-auto pb-3">
                    @foreach($statuses as $statusId => $statusName)
                        @php
                            // Define icon and color classes
                            $statusStyles = [
                                'pending' => ['icon' => 'ti ti-progress-alert', 'text' => 'text-warning', 'bg' => 'bg-warning-subtle'],
                                'in progress' => ['icon' => 'ti ti-progress', 'text' => 'text-primary', 'bg' => 'bg-primary-subtle'],
                                'completed' => ['icon' => 'ti ti-progress-check', 'text' => 'text-success', 'bg' => 'bg-success-subtle'],
                                'need review' => ['icon' => 'ti ti-progress-help', 'text' => 'text-info', 'bg' => 'bg-info-subtle'],
                                'not yet submitted' => ['icon' => 'ti ti-ban', 'text' => 'text-danger', 'bg' => 'bg-danger-subtle'],
                                'default' => ['icon' => 'ti ti-progress-bolt', 'text' => 'text-secondary', 'bg' => 'bg-secondary-subtle'],
                            ];

                            $key = strtolower($statusName);
                            $style = $statusStyles[$key] ?? $statusStyles['default'];
                        @endphp

                        <div class="me-3" style="width: 300px;">
                            <div class="card card-custom card-animated border-0 bg-white shadow-sm h-100" data-bs-toggle="modal" data-bs-target="#statusModal{{ $statusId }}" style="cursor: pointer;" title="Click to view details">
                                <div class="card-body d-flex align-items-center">
                                    <div class="me-3 d-flex justify-content-center align-items-center rounded-circle {{ $style['text'] }} {{ $style['bg'] }}" style="width: 50px; height: 50px;">
                                        <i class="{{ $style['icon'] }}" style="font-size: 22px;"></i>
                                    </div>
                                    <div>
                                        <div class="fw-bold text-dark" style="font-size: 22px;">{{ $statusCounts[$statusId] ?? 0 }}</div>
                                        <small class="text-dark">{{ Str::title($statusName) }}</small><br>
                                        <small class="text-dark">Submission</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Modal --}}
                        @include('partials.status-modal', [
                            'statusId' => $statusId,
                            'statusName' => $statusName,
                            'submissionTypesByStatus' => $submissionTypesByStatus
                        ])
                    @endforeach
                </div>
            {{-- </div> --}}
        </div>


                <div class="hr-text my-4">Others</div>

                <div class="col-12 mb-6">
                    <div class="card shadow-sm" style="max-height: 450px;">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h4 class="card-title mb-0">{{ __('License & Renewal Due Soon') }}</h4>
                            @if (!$overdueNotes->isEmpty())
                                @php
                                    // Get the month and year of the first grouped item
                                    $firstGroupMonthYear = \Carbon\Carbon::parse($overdueNotes->first()->notes_duedate)->format('F Y');
                                @endphp
                        <div class="text-blue fw-bold" style="font-size: 15px;">{{ $firstGroupMonthYear }}</div>
                            @endif
                        </div>

                        <div class="card-body" style="max-height: 400px; overflow-y: auto;">
                            @if ($overdueNotes->isEmpty())
                                <div class="alert alert-warning text-center m-2">
                                    <i class="ti ti-info-hexagon me-2"></i> There is no license and renewal available for the current month.
                                </div>
                            @else
                                @foreach ($overdueNotes->groupBy(function($note) {
                                    return \Carbon\Carbon::parse($note->notes_duedate)->format('F Y');
                                }) as $monthYear => $group)
                                    {{-- <h3 class="mb-4 mt-4 text-blue">{{ $monthYear }}</h3> --}}
                                    <div class="fw-bold mb-2 text-muted">
                                        Date
                                    </div>
                                    <ul class="timeline">
                                        @foreach ($group as $note)
                                            {{-- @php
                                                $dueDate = \Carbon\Carbon::parse($note->notes_duedate);
                                                $isDueToday = $dueDate->isToday();
                                                $isOverdue = $dueDate->isPast(); // includes today
                                                $textColor = $isOverdue ? 'red' : 'blue';
                                                $iconBg = $isOverdue ? 'bg-red-lt' : 'bg-blue-lt';
                                            @endphp --}}
                                            @php
                                                $dueDate = \Carbon\Carbon::parse($note->notes_duedate);
                                                $isDueToday = $dueDate->isToday();
                                                $isOverdue = $dueDate->isPast() && !$isDueToday;
                                                $textColor = ($isDueToday || $isOverdue) ? 'red' : 'blue';
                                                $iconBg = ($isDueToday || $isOverdue) ? 'bg-red-lt' : 'bg-blue-lt';
                                                $badgeText = $isDueToday ? 'Today' : $dueDate->diffForHumans();
                                            @endphp


                                            <li class="timeline-event">
                                                {{-- <div class="timeline-event-icon {{ $isOverdue ? 'bg-red-lt' : 'bg-blue-lt' }} text-dark fw-bold d-flex justify-content-center align-items-center"
                                                    style="width: 32px; height: 32px; border-radius: 50%; font-size: 12px;">
                                                    {{ $dueDate->format('d') }}
                                                </div> --}}
                                                <div class="timeline-event-icon {{ $iconBg }} text-dark fw-bold d-flex justify-content-center align-items-center"
                                                    style="width: 32px; height: 32px; border-radius: 50%; font-size: 12px;">
                                                    {{ $dueDate->format('d') }}
                                                </div>


                                                <div class="card timeline-event-card shadow-sm">
                                                    <div class="card-body">
                                                        {{-- <small class="float-end">
                                                            <span class="badge badge-outline text-{{ $textColor }} ms-2" style="font-size: 12px;">
                                                                {{ $dueDate->diffForHumans() }}
                                                            </span>
                                                        </small> --}}
                                                        <small class="float-end">
                                                            <span class="badge badge-outline text-{{ $textColor }} ms-2" style="font-size: 12px;">
                                                                {{ $badgeText }}
                                                            </span>
                                                        </small>


                                                        <div class="d-flex justify-content-start align-items-center mb-2">
                                                            <i class="ti ti-info-hexagon me-2"></i>
                                                            <h4 class="mb-0">{{ ucfirst($note->notes) }}</h4>
                                                        </div>
                                                        <p class="text-secondary mb-1">
                                                            <strong>Project:</strong> {{ $note->project->description ?? '-' }}<br>
                                                            <strong>Client:</strong> {{ $note->project->client ?? '-' }}
                                                        </p>
                                                        <small class="text-muted">Created on {{ $note->created_at->format('d M Y') }}</small>
                                                    </div>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                @endforeach
                            @endif
                        </div>
                        <div class="card-footer">
                        </div>
                    </div>
                </div>

                <!-- Row 3: To-Do List & Priority Tasks Side by Side -->
                <div class="row">
                    <!-- Left: To-Do List -->
                    <div class="col-md-6">
                        <div class="card shadow-sm mb-4 h-100">
                        <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
                            <div class="d-flex align-items-center gap-3">
                                <h3 class="card-title">My To-Do List</h3>
                                {{-- <small>{{ $startOfWeek->format('d M') }} - {{ $endOfWeek->format('d M Y') }}</small> --}}
                            </div>

                            @if(auth()->user()->role === 'admin')
                            {{-- <form method="GET" action="{{ route('dashboard') }}" class="d-flex align-items-center gap-1 m-0">
                                <input
                                    type="text"
                                    name="search_user_name"
                                    class="form-control form-control-sm"
                                    placeholder="Search user name..."
                                    value="{{ request('search_user_name') }}"
                                    style="max-width: 200px;"
                                />
                                <button class="btn btn-sm btn-outline-secondary" type="submit">Search</button>
                                <a href="{{ route('dashboard') }}" class="btn btn-sm btn-outline-danger">Clear</a>
                            </form> --}}
                            @endif
                        </div>


                            <div class="card-body">
                                <form action="{{ route('todos.store') }}" method="POST" class="mb-0 d-flex gap-2 mb-3" id="form-todo">
                                    @csrf
                                    <input type="text" name="title" class="form-control" placeholder="Add new to-do..." required>
                                    <button class="btn btn-primary" type="submit">
                                        <i class="ti ti-plus"></i>
                                    </button>
                                </form>

                                <div class="list-group">
                                    @forelse($todos as $todo)
                                        <div class="list-group-item mb-2">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <form action="{{ route('todos.update', $todo) }}" method="POST" class="d-flex align-items-start flex-grow-1 gap-2">
                                                    @csrf
                                                    @method('PATCH')
                                                    <input type="checkbox" name="is_done" onchange="this.form.submit()" {{ $todo->is_done ? 'checked' : '' }} class="form-check-input mt-1">
                                                    <input type="hidden" name="original_status_id" value="{{ $todo->status_id }}">

                                                    <div class="w-100">
                                                        <div class="d-flex justify-content-start align-items-center">
                                                            <div class="{{ $todo->is_done ? 'text-decoration-line-through text-muted' : '' }}">
                                                                {{ \Illuminate\Support\Str::words($todo->title, 4, '...') }}
                                                            </div>
                                                                @if($todo->project && $todo->project->ref_no)
                                                                    <span class="badge badge-outline text-primary border border-primary ms-2">{{ $todo->project->ref_no }}</span>
                                                                @endif
                                                                @if($todo->user && ($todo->assigned_by == auth()->id() || is_null($todo->assigned_by)))
                                                                    {{-- <span class="badge badge-outline text-cyan ms-2">{{ $todo->user->name }}</span> --}}
                                                                @endif

                                                        </div>
                                                        <small class="text-muted">
                                                            @if($todo->date_received)
                                                                <strong>Assigned Date:</strong> {{ \Carbon\Carbon::parse($todo->date_received)->format('d-m-Y') }}
                                                            @endif
                                                            @if($todo->created_at && is_null($todo->date_received))
                                                                <strong>Created Date:</strong> {{ \Carbon\Carbon::parse($todo->created_at)->format('d-m-Y') }}
                                                            @endif
                                                            @if($todo->date_received && $todo->due_date)
                                                                &nbsp;|&nbsp;
                                                            @endif
                                                            @if($todo->due_date)
                                                                <strong>Due Date:</strong> {{ \Carbon\Carbon::parse($todo->due_date)->format('d-m-Y') }}
                                                            @endif
                                                            @if($todo->due_date && $todo->status)
                                                                &nbsp;|&nbsp;
                                                            @endif
                                                            @if($todo->status)
                                                                <strong>Status:</strong> {{ $todo->status->name }}
                                                            @endif
                                                            @if($todo->assigned_by)
                                                                &nbsp;|&nbsp;
                                                                <br>
                                                                <strong>Assigned By:</strong> {{ $todo->assigner->name ?? '-' }}
                                                            @endif
                                                        </small>
                                                    </div>
                                                </form>

                                                @auth
                                                    {{-- @if ($todo->assigned_by === Auth::id() || is_null($todo->assigned_by)) --}}
                                                    @if (is_null($todo->assigned_by))
                                                        <form action="{{ route('todos.destroy', $todo) }}" method="POST" class="ms-2">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button class="btn-delete-project btn btn-sm btn-outline-danger">
                                                                <i class="ti ti-trash"></i>
                                                            </button>
                                                        </form>
                                                    @endif
                                                @endauth
                                            </div>
                                        </div>
                                    @empty
                                        <div class="list-group-item text-muted text-center">No to-dos for this week.</div>
                                    @endforelse
                                </div>
                            </div>

                            <div class="card-footer bg-transparent border-top-0">
                                <div class="d-flex justify-content-end">
                                    {{ $todos->links('pagination::bootstrap-5') }}
                                </div>
                            </div>
                            
                            <div class="card-footer">
                            </div>
                        </div>
                        
                    </div>


                    <!-- Right: Priority Tasks -->
                    <div class="col-md-6">
                        <div class="card shadow-sm mb-4 h-100">
                            {{-- <div class="card-header"> --}}
                            <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
                            <div class="d-flex align-items-center gap-3">
                                <h3 class="card-title">My Task</h3>
                                {{-- <small>{{ $startOfWeek->format('d M') }} - {{ $endOfWeek->format('d M Y') }}</small> --}}
                            </div>
                                {{-- <ul class="nav nav-tabs card-header-tabs" id="priorityOverdueTabs" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link {{ request('tab') == 'tasks' || !request('tab') ? 'active' : '' }}"
                                            id="tasks-tab" data-bs-toggle="tab" data-bs-target="#tasks" type="button"
                                            role="tab" aria-controls="tasks" aria-selected="{{ request('tab') == 'tasks' || !request('tab') ? 'true' : 'false' }}">
                                            Tasks
                                        </button>
                                    </li>
                                    {{-- <li class="nav-item" role="presentation">
                                        <button class="nav-link {{ request('tab') == 'overdue' ? 'active' : '' }}"
                                            id="overdue-tab" data-bs-toggle="tab" data-bs-target="#overdue" type="button"
                                            role="tab" aria-controls="overdue" aria-selected="{{ request('tab') == 'overdue' ? 'true' : 'false' }}">
                                            Overdue Tasks
                                        </button>
                                    </li> --}}
                                </ul>
                            </div>
                            <div class="card-body tab-content" id="priorityOverdueTabsContent">
                                {{-- Tasks Tab --}}
                                <div class="tab-pane fade {{ request('tab') == 'tasks' || !request('tab') ? 'show active' : '' }}"
                                    id="tasks" role="tabpanel" aria-labelledby="tasks-tab">
                                    @if($userTasks->isEmpty())
                                        <p class="text-muted text-center">No tasks assigned to you.</p>
                                    @else
                                        <div class="list-group">
                                            @foreach($userTasks as $item)
                                            @php
                                                $task = $item['task'];
                                                $project = $item['project'];
                                                $dueDate = $task->due_date ?? null;

                                                $isOverdue = $dueDate && $dueDate->isPast() && optional($task->status)->name !== 'Completed';

                                                $overdueBadge = '';
                                                if ($isOverdue) {
                                                    $overdueBadge = $dueDate->diffForHumans(now(), [
                                                        'parts' => 1,
                                                        'short' => false,
                                                        'syntax' => \Carbon\CarbonInterface::DIFF_RELATIVE_TO_NOW,
                                                    ]);
                                                }
                                            @endphp

                                            <div class="list-group-item mb-2">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div>
                                                        <strong>{{ $task->name }}</strong>
                                                        {{-- <span class="badge badge-outline text-cyan ms-2">{{ $task->user->name }}</span> --}}
                                                    </div>
                                                    <div class="d-flex flex-wrap gap-1">
                                                        @if($task->priority == 1)
                                                            <span class="badge badge-outline text-primary">Priority</span>
                                                        @endif
                                                        @if ($isOverdue)
                                                            <span class="badge badge-outline text-danger">{{ $overdueBadge }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                                <small class="text-muted"><strong>Project:</strong> {{ $project->description ?? $project->project_name ?? 'Unknown' }}</small><br>
                                                @if($task->due_date)
                                                    <small class="text-muted"><strong>Due:</strong> {{ \Carbon\Carbon::parse($task->due_date)->format('d-m-Y') }}</small>
                                                @else
                                                    <small class="text-muted"><strong>Due:</strong> No due date available</small>
                                                @endif
                                            </div>
                                        @endforeach

                                        </div>
                                        {{-- <div class="card-footer bg-transparent border-top-0"> --}}
                                            <div class="d-flex justify-content-end mt-2">
                                                {{ $userTasks->appends(['tab' => 'tasks'])->links('pagination::bootstrap-5') }}
                                            </div>
                                        {{-- </div> --}}
                                    @endif
                                </div>

                                {{-- Overdue Tasks Tab --}}
                                {{-- <div class="tab-pane fade {{ request('tab') == 'overdue' ? 'show active' : '' }}" id="overdue" role="tabpanel" aria-labelledby="overdue-tab">
                                    @if($overdueTasks->isEmpty())
                                        <p class="text-muted text-center">No overdue tasks.</p>
                                    @else
                                        <div class="list-group">
                                            @foreach($overdueTasks as $item)
                                                <div class="list-group-item mb-2">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <div>
                                                            <strong>{{ $item['task']->name ?? 'No name' }}</strong>
                                                            <span class="badge badge-outline text-cyan ms-2">{{ $item['task']->user->name ?? '' }}</span>
                                                        </div>
                                                        <span class="badge bg-danger-lt text-danger">
                                                            @php
                                                                $due = \Carbon\Carbon::parse($item['task']->end_date);
                                                                $now = \Carbon\Carbon::now();
                                                                $daysOverdue = $now->diffInDays($due, false);
                                                            @endphp
                                                            {{ $daysOverdue == 0 ? 'Due Today' : abs($daysOverdue) . ' day' . (abs($daysOverdue) > 1 ? 's' : '') }}
                                                        </span>
                                                    </div>
                                                    <small class="text-muted"><strong>Project:</strong> {{ $item['project']->project_title ?? '' }}</small><br>
                                                    <small class="text-muted"><strong>Due:</strong> {{ \Carbon\Carbon::parse($item['task']->end_date)->format('d-m-Y') }}</small>
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="card-footer bg-transparent border-top-0">
                                            <div class="d-flex justify-content-end">
                                                {{ $overdueTasks->appends(['tab' => 'overdue'])->links('pagination::bootstrap-5') }}
                                            </div>
                                        </div>
                                    @endif

                                </div> --}}
                            </div>
                            <div class="card-footer"></div>
                        </div>
                    </div>

                </div>

            {{-- </div> --}}

            {{-- Right Column: On-Going Project Progress --}}
            {{-- <div class="col-12">
                <div id="project-progress" class="card border shadow-sm rounded mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3 class="card-title">{{ __('On-Going Project Progress') }}</h3>
                    </div>

                    <!-- Search Filter -->
                    <div class="mb-4">
                        <div class="row m-2 p-2">
                            <form action="{{ route('dashboard') }}#project-progress" method="GET" id="form-search">
                                <div class="row g-2 align-items-end">
                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" id="description" name="description" value="{{ request('description') }}" autocomplete="off">
                                            <label for="description">{{ __('Description') }}</label>
                                        </div>
                                    </div>

                                    <div class="col-md-2">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" id="assignee" name="assignee" value="{{ request('assignee') }}" autocomplete="off">
                                            <label for="assignee">{{ __('Assignee Name') }}</label>
                                        </div>
                                    </div>

                                    <!-- New dropdown for is_registration filter -->
                                    <div class="col-md-2">
                                        <div class="form-floating">
                                            <select class="form-select" id="is_registration" name="is_registration">
                                                <option value="" {{ !in_array(request('is_registration'), ['0', '1']) ? 'selected' : '' }}>
                                                    {{ __('Show All') }}
                                                </option>
                                                <option value="0" {{ request('is_registration') === '0' ? 'selected' : '' }}>
                                                    {{ __('Unregistered') }}
                                                </option>
                                                <option value="1" {{ request('is_registration') === '1' ? 'selected' : '' }}>
                                                    {{ __('Registered') }}
                                                </option>
                                            </select>
                                            <label for="is_registration">{{ __('Registration Status') }}</label>
                                        </div>
                                    </div>

                                    @php
                                        $projectTypes = \DB::table('project_types')
                                            ->whereIn('name', ['On Going Project', 'Pending Project', 'KIV Project'])
                                            ->get();
                                    @endphp

                                    <div class="col-md-2">
                                        <div class="form-floating">
                                            <select class="form-select" id="project_type_id" name="project_type_id">
                                                <option value="">{{ __('Show All') }}</option>
                                                @foreach ($projectTypes as $type)
                                                    <option value="{{ $type->id }}" {{ request('project_type_id') == $type->id ? 'selected' : '' }}>
                                                        {{ __($type->name) }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <label for="project_type_id">{{ __('Project Type') }}</label>
                                        </div>
                                    </div>

                                    <div class="col-auto">
                                        <button type="submit" class="btn btn-ghost-info me-1">
                                            <i class="ti ti-search"></i>
                                        </button>
                                        <a href="{{ route('dashboard') }}#project-progress" class="btn btn-ghost-yellow" title="{{ __('Reset') }}">
                                            <i class="ti ti-refresh"></i>
                                        </a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <hr class="mt-0 mb-2">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="bg-light text-muted">
                                    <tr>
                                        <th style="width: 5%;" class="text-center">#</th>
                                        <th>Project</th>
                                        <th style="width: 15%;">Assignee</th>
                                        <th style="width: 15%;">Progress</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($projectsWithProgress as $index => $project)
                                        <tr style="cursor: pointer;" onclick="window.location='{{ route('project.tasks', $project->id) }}';">
                                            <td class="text-center">{{ $index + 1 }}</td>
                                            <td>{{ $project->description }}</td>
                                            <td>
                                                @forelse ($project->assignees as $user)
                                                    <span class="badge badge-outline text-cyan mb-1">{{ $user->name }}</span>
                                                @empty
                                                    <span class="text-muted">No assignee</span>
                                                @endforelse
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="me-2">{{ $project->weighted_progress }}%</div>
                                                    <div style="flex: 1;">
                                                        <div class="progress" style="height: 8px;">
                                                            <div class="progress-bar
                                                                @if($project->weighted_progress < 60) bg-danger
                                                                @elseif($project->weighted_progress < 80) bg-warning
                                                                @else bg-success @endif"
                                                                role="progressbar"
                                                                style="width: {{ $project->weighted_progress }}%;"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td class="text-center text-muted py-4" colspan="4">
                                                {{ __('No ongoing projects.') }}
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        @if ($projectsWithProgress->hasPages())
                            <div class="card-footer bg-transparent border-top-0">
                                <div class="d-flex justify-content-end">
                                    {{ $projectsWithProgress->appends(['projectsWithProgressPage' => request('projectsWithProgressPage')])->onEachSide(1)->links('pagination::bootstrap-5') }}
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div> --}}
        </div>
    </div>
</div>

<!-- Smooth scroll to project-progress if redirected -->
<script>
document.addEventListener('DOMContentLoaded', function () {

    const urlParams = new URLSearchParams(window.location.search);
    const activeTab = urlParams.get('tab');

    if (activeTab) {
        const triggerEl = document.querySelector(`#${activeTab}-tab`);
        if (triggerEl) {
            new bootstrap.Tab(triggerEl).show();
        }
    }

    // Auto-hide alerts
    ['success-alert', 'validation-alert'].forEach(id => {
        const alertEl = document.getElementById(id);
        if (alertEl) {
            setTimeout(() => {
                alertEl.classList.remove('show');
                alertEl.classList.add('hide');
                setTimeout(() => {
                    alertEl.remove();
                }, 500);
            }, 3000);
        }
    });

    // Get all pagination links
    const paginationLinks = document.querySelectorAll('.pagination a');

    // Append #project-progress only if link is inside #project-progress section
    paginationLinks.forEach(function (link) {
        if (link.closest('#project-progress')) {
            let href = link.getAttribute('href') || '';
            // Append #project-progress only if not already present
            if (!href.includes('#project-progress')) {
                link.setAttribute('href', href + '#project-progress');
            }
        }
    });

    // Scroll smoothly if URL contains #project-progress
    if (window.location.hash === "#project-progress") {
        const el = document.getElementById('project-progress');
        if (el) {
            el.scrollIntoView({ behavior: 'smooth' });
        }
    }
});
</script>


@endsection