@extends('layouts/layoutMaster')

@section('title', 'Tasks')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body:not(.modal-open) .select2-container--open{
            z-index:99
        }
    </style>
    <!-- Vendor Styles -->
@section('vendor-style')
    @vite([
        'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
        'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
        'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
        'resources/assets/vendor/libs/select2/select2.scss',
        'resources/assets/vendor/libs/@form-validation/form-validation.scss',
        'resources/assets/vendor/libs/animate-css/animate.scss',
        'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss',
        'resources/assets/vendor/libs/toastr/toastr.scss',
        'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.scss',
        'resources/assets/vendor/fonts/remixicon/remixicon.css'
    ])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
    @vite([
        'resources/assets/vendor/libs/moment/moment.js',
        'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
        'resources/assets/vendor/libs/select2/select2.js',
        'resources/assets/vendor/libs/@form-validation/popular.js',
        'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
        'resources/assets/vendor/libs/@form-validation/auto-focus.js',
        'resources/assets/vendor/libs/cleavejs/cleave.js',
        'resources/assets/vendor/libs/cleavejs/cleave-phone.js',
        'resources/assets/vendor/libs/sweetalert2/sweetalert2.js',
        'resources/assets/vendor/libs/toastr/toastr.js',
        'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js'
    ])
@endsection

<!-- Page Scripts -->
@section('page-script')
    @vite([
        'resources/js/toastr-bootstrap.js',
        'resources/js/task-manage.js'
    ])
@endsection

@section('content')
    <!-- task List Table -->
    <div class="toast-container position-fixed top-1 end-0 p-3" id="toastContainer"></div>
    {{-- {{dd($forms);}} --}}
    {{-- @if(!auth()->user()->hasRole('Super Admin')) --}}
    <div class="row">
        <div class="col-12 @if(!auth()->user()->hasRole('Employee')) col-md-9 @else col-md-6 @endif mb-4 clockIn_card {{ !empty($startedTasks) ? 'd-none' : '' }}">
            <div class="card h-100">
                <div class="card-body d-flex flex-column justify-content-between">
                    <!-- Header row with "Today's clock" and total hours -->
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="mb-0 font-weight-bold">Today's clock</h5>
                        <span class="badge bg-light text-dark font-weight-bold px-3 py-2">
                            Total work hours today <span class="ml-1 text-dark">{{!empty($diffFormatted)? $diffFormatted : '00:00:00'}}</span>
                        </span>
                    </div>

                    <!-- Clock-in button centered below -->
                    <div class="text-center mt-auto">
                        <button id="openClockInModal" class="btn btn-lg rounded-circle text-white flex-column justify-content-center align-items-center text-center"
                            style="width: 150px; height: 150px; background: linear-gradient(to bottom right, #36c6f0, #4bd3a3); box-shadow: 0 10px 20px rgba(0,0,0,0.1);">                            
                            <i class="ri-timer-line" style="font-size: 48px;"></i>
                            <span style="font-size: 18px; margin-top: 8px;">Clock in</span>
                        </button>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 @if(!auth()->user()->hasRole('Employee')) col-md-9 @else col-md-6 @endif mb-4 clock-card {{ is_null($startedTasks) ? 'd-none' : '' }}">
            <div class="card h-100 p-0 border-0" style="border-radius: 12px; overflow: hidden;">
                <div class="row g-0 h-100">
                    <!-- Left side (30%) -->
                    <div class="col-md-4" style="background: linear-gradient(to bottom right, #36d1dc, #5b86e5); color: white; padding: 1.5rem;">
                        <p class="mb-2 medium fw-semibold">Work time on 
                            <span class="badge bg-white text-dark ms-2 px-3 py-1 rounded-pill">
                                {{ trim(collect([$startedTasks?->jobSchedule?->job?->name, $startedTasks?->jobSchedule?->patient?->name])->filter()->implode(' - ')) ?: '-' }}
                            </span>
                        </p>
                        <h1 class="display-4 mb-0" id="liveClockDisplay">00:00:04</h1>
                        {{-- <p class="mt-2 small">
                            <i class="fas fa-map-marker-alt me-1"></i>
                            B 1 6, Gota, Ahmedabad, Gujarat 382481
                        </p> --}}
                        <p class="mt-2 mb-4 medium">{{ \Carbon\Carbon::now()->format('D, M d') }} 
                            <strong></strong>
                        </p>
                        <button id="clockOutBtn" class="btn btn-lg w-100 text-white mt-9"
                            style="background: linear-gradient(to bottom right, #f857a6, #ff5858); border-radius: 20px;">
                            <i class="fas fa-stop me-2"></i> End
                        </button>
                    </div>

                    <!-- Right side (70%) -->
                    <div class="col-md-8 bg-white p-4">
                        <h5 class="mb-3">Forms</h5>
                        @php
                            $formIds = explode(',', $startedTasks?->jobSchedule?->form_id ?? '');
                            $forms = \App\Models\Form::whereIn('id', $formIds)->get();

                            $formResponseIds = explode(',', $startedTasks->formResponse_id ?? '');
                            $formResponses = \App\Models\FormResponse::whereIn('id', $formResponseIds)->get();
                            $formResponseMap = $formResponses->keyBy('form_id'); // map form_id => FormResponse model
                        @endphp

                        @if($forms->isNotEmpty())
                            <ul class="list-unstyled">
                                @foreach($forms as $form)
                                    @php
                                        $isSubmitted = $formResponseMap->has($form->id);
                                        $btnClass = $isSubmitted ? 'btn-outline-secondary' : 'btn-outline-primary';
                                        $route = $isSubmitted
                                            ? route('formUser-list.editNew', ['id' => $formResponseMap[$form->id]->id])
                                            : route('formUser-list.editJobForm', ['form' => $form->id, 'job_id' => $startedTasks->id]);
                                    @endphp
                                    <li class="mb-2">
                                        <a href="{{ $route }}" target="_blank" class="text-decoration-none btn btn-sm {{ $btnClass }}">
                                            {{ $form->name }} <i class="ri-arrow-right-long-fill"></i>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        @else
                            <p class="text-muted">No forms assigned to this job schedule.</p>
                        @endif

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

        @if(auth()->user()->hasRole('Employee'))
        <div class="col-12 col-md-3 mb-4">
            <div class="card h-100 border-0" style="box-shadow: 0 4px 20px rgba(0,0,0,0.08); border-radius: 12px; overflow: hidden;">
                <div class="card-body p-4">
                    <!-- Header with icon and subtle gradient -->
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <div class="d-flex align-items-center">
                            <div class="mr-2 me-1 text-dark" style="width: 8px; height: 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 4px;"></div>
                            <h6 class="mb-0 font-weight-bold text-dark" style="letter-spacing: 0.5px;">EARNINGS SUMMARY</h6>
                        </div>
                        <span class="badge" style="background: rgba(118, 75, 162, 0.1); color: #764ba2; font-weight: 500; padding: 4px 8px; border-radius: 10px;">Current</span>
                    </div>
                    
                    <!-- Data Cards with improved contrast -->
                    <div class="row">
                        <!-- Monthly Data -->
                        <div class="col-6 pr-2">
                            <div class="p-2 text-center h-100 bg-light" style="border-radius: 10px; border: 1px solid rgba(0,0,0,0.03); height: 100%; transition: all 0.3s ease;">
                                <div class="mb-1">
                                    <p class="small text-muted mb-1 text-dark" style="font-size: 11px; letter-spacing: 0.3px;">Monthly Income</p>
                                    <h5 class="font-weight-bold mb-0 text-dark" style="font-size: 18px;">${{ $thisMonthIncome }}</h5>
                                </div>
                                <div class="mt-1 pt-1" style="border-top: 1px dashed rgba(0,0,0,0.08);">
                                    <p class="small text-muted mb-1 text-dark" style="font-size: 11px; letter-spacing: 0.3px;">Monthly Hours</p>
                                    <h5 class="font-weight-bold mb-0 text-dark" style="font-size: 18px;">{{ $thisMonthHours }}</h5>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Weekly Data -->
                        <div class="col-6 pl-2">
                            <div class="p-2 text-center h-100 bg-light" style="border-radius: 10px; border: 1px solid rgba(0,0,0,0.03); height: 100%; transition: all 0.3s ease;">
                                <div class="mb-1">
                                    <p class="small text-muted mb-1" style="font-size: 11px; letter-spacing: 0.3px;">Weekly Income</p>
                                    <h5 class="font-weight-bold mb-0 text-dark" style="font-size: 18px;">${{ $thisWeekIncome }}</h5>
                                </div>
                                <div class="mt-1 pt-1" style="border-top: 1px dashed rgba(0,0,0,0.08);">
                                    <p class="small text-muted mb-1" style="font-size: 11px; letter-spacing: 0.3px;">Weekly Hours</p>
                                    <h5 class="font-weight-bold mb-0 text-dark" style="font-size: 18px;">{{ $thisWeekHours }}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Footer with subtle animation -->
                    <div class="mt-2 pt-2 text-center" style="border-top: 1px solid rgba(0,0,0,0.03);">
                        <small class="text-muted d-flex align-items-center justify-content-center" style="font-size: 11px;">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 me-1" style="opacity: 0.6;">
                                <circle cx="12" cy="12" r="10"></circle>
                                <polyline points="12 6 12 12 16 14"></polyline>
                            </svg> 
                             Updated {{ now()->format('M j, g:i A') }}
                        </small>
                    </div>
                </div>
                
                <!-- Subtle decorative element at bottom -->
                <div style="height: 4px; background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%); opacity: 0.3;"></div>
            </div>
        </div>
        @endif
        <!-- Requests card: smaller width -->
        <div class="col-12 col-md-3 mb-4">
            <div class="card h-100">
                <div class="card-header border-bottom-0 text-center">
                    <h5 class="mb-0 font-weight-bold">Requests</h5>
                    <hr>
                </div>                
                <div class="card-body d-flex flex-column">
                    <!-- Shift request -->
                    <div class="d-grid gap-2 mb-3">
                        @if(auth()->user()->can('taskManage.create'))
                        <button class="btn d-flex align-items-center justify-content-start py-2 px-3 rounded-pill shadow-sm" style="background-color: #f5f9ff;" data-bs-target="#offcanvasAddJobSchedule" data-bs-toggle="offcanvas">
                            <span class="me-2 text-white d-inline-flex justify-content-center align-items-center rounded-circle" style="width: 30px; height: 30px; background-color: #36c6f0;">
                                <i class="ri-add-line"></i>
                            </span>
                            Add a shift request
                        </button>
                        @else
                         <button class="btn d-flex align-items-center justify-content-start py-2 px-3 rounded-pill shadow-sm" style="background-color: #fa9d9d;">
                            <span class="me-2 text-white d-inline-flex justify-content-center align-items-center rounded-circle" style="width: 30px; height: 30px; background-color: #da1c1c;">
                                <i class="fas fa-plus"></i>
                            </span>
                            No Access
                        </button>
                        @endif
                        <!-- Absence request -->
                        {{-- <button class="btn d-flex align-items-center justify-content-start py-2 px-3 rounded-pill shadow-sm" style="background-color: #f5f9ff;">
                            <span class="me-2 text-white d-inline-flex justify-content-center align-items-center rounded-circle" style="width: 30px; height: 30px; background-color: #4bd3a3;">
                                <i class="fas fa-sun"></i>
                            </span>
                            Add an absence request
                        </button> --}}
                    </div>

                    <!-- View requests button aligned bottom -->
                    <a href="{{route('job-scheduleManage')}}" class="btn w-100 text-center py-2 rounded-pill text-primary mt-auto" style="background-color: #eef7ff;">
                        View your requests
                    </a>
                    @if(auth()->user()->can('salaryManage.list'))
                        <a href="{{route('salaryManage')}}" class="btn w-100 text-center py-2 rounded-pill text-primary mt-2" style="background-color: #eef7ff;">
                            View monthly summary
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </div>
    {{-- @endif --}}
    <div class="card">
        <div class="card-header pb-0">
            <h5 class="card-schedule mb-0">Tasks</h5>
        </div>

        <div class="card-datatable table-responsive">
            <table class="datatables-task table">
                <thead>
                    <tr>
                        <th></th>
                        <th>Id</th>
                        <th>Date</th>
                        <th>Job</th>
                        {{-- <th>Daily Hours</th> --}}
                        {{-- <th>Daily Income</th> --}}
                        {{-- <th>Earned</th> --}}
                        {{-- <th>Patient</th>
                        <th>Start Date</th>
                        <th>Due Date</th> --}}
                        {{-- <th>Total Hours</th> --}}
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <!-- Clock In Modal -->
    <div class="modal fade" id="clockInModal" tabindex="-1" aria-labelledby="clockInModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form id="clockInForm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="clockInModalLabel">Select Task</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="jobScheduleSelect" class="form-label">Task</label>
                            <select class="form-select" id="jobScheduleSelect" name="job_schedule_id" required>
                                <option value="">Select a Task</option>
                                @foreach ($tasks as $task)
                                    <option value="{{ $task->id }}"
                                        data-task="{{ $task->job->name }} - {{ $task->patient->name }}">
                                        {{ $task->job->name }} - {{ $task->patient->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Clock In</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    @if(!empty($startedTasks))
        <!-- Summary Modal -->
        <div class="modal fade" id="summaryModal" tabindex="-1" aria-labelledby="summaryModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <form id="summaryForm">
                    @csrf
                    <input type="hidden" name="task_id" value="{{ $startedTasks->id }}">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="summaryModalLabel">End Work Summary</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="summary" class="form-label">Work Summary</label>
                                <textarea class="form-control" id="summary" name="summary" rows="4" required></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Submit & End</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endif
    
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddJobSchedule" aria-labelledby="offcanvasAddJobScheduleLabel">
        <div class="offcanvas-header border-bottom">
            <h5 id="offcanvasAddJobScheduleLabel" class="offcanvas-schedule">Shift Request</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body mx-0 flex-grow-0 h-100">
            <form class="add-new-jobSchedule pt-0" id="addNewjobScheduleForm">
                <input type="hidden" name="id" id="jobSchedule_id">
                <div class="form-floating form-floating-outline mb-5">
                    <select class="form-select select2" id="job_id" name="job_id" aria-label="Select Job">
                        <option selected disabled>Select a job</option>
                        @foreach ($jobs as $job)
                            <option value="{{$job->id}}">{{$job->name}}</option>
                        @endforeach
                    </select>
                    <label for="job_id">Job</label>
                </div>
                @if(auth()->user()->hasRole('Employee'))
                    <input type="hidden" id="employee_id" name="employee_id" value="{{auth()->id()}}">                
                 @else
                    <div class="form-floating form-floating-outline mb-5">                
                        <select class="form-select select2" id="employee_id" name="employee_id" aria-label="Select Job">
                            <option selected disabled>Select a Employee</option>
                            @foreach ($employees as $employee)
                                <option value="{{$employee->id}}">{{$employee->name}}</option>
                            @endforeach
                        </select>
                        <label for="employee_id">Employee</label>                   
                    </div>
                @endif
                <div class="form-floating form-floating-outline mb-5">
                    <select class="form-select select2" id="patient_id" name="patient_id" aria-label="Select Job">
                        <option selected disabled>Select a Patient</option>
                        @foreach ($patients as $patient)
                            <option value="{{$patient->id}}">{{$patient->name}}</option>
                        @endforeach
                    </select>
                    <label for="patient_id">Patient</label>
                </div>
                <div id="formResponsesContainer" class="mt-2 mt-2">
                    <!-- Dynamic form response buttons will be inserted here -->
                </div>
                {{-- {{dd($forms)}} --}}
                {{-- <div class="form-floating form-floating-outline mb-5">
                    <select class="form-select select2" id="form_id" name="form_id[]" multiple aria-label="Select Forms">
                        @foreach ($forms as $form)
                            <option value="{{ $form->id }}">{{ $form->name }}</option>
                        @endforeach                            
                    </select>
                    <label for="form_id">Forms</label>
                    <div class="d-flex justify-content-end mt-1">
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="reloadForms"><i class="ri-refresh-line"></i></button>
                    </div>
                </div> --}}
                <div class="form-floating form-floating-outline mb-5">
                    <input type="datetime-local" class="form-control" id="start_date" placeholder="Start Date" name="start_date" aria-label="Start Date" />
                    <label for="start_date">Start Time</label>
                </div>
                <div class="form-floating form-floating-outline mb-5">
                    <input type="datetime-local" class="form-control" id="end_date" placeholder="End Date" name="end_date" aria-label="End Date" />
                    <label for="end_date">End Time</label>
                </div>
                <div class="form-floating form-floating-outline mb-5">
                    <textarea class="form-control" placeholder="Description" id="description" name="description" aria-label="Description" style="height: 100px;"></textarea>
                    <label for="description">Description</label>
                </div>
                <!-- Repeat Toggle -->
                {{-- <div class="form-check form-switch mb-4">
                    <input class="form-check-input" name="status" type="checkbox" id="repeatToggle">
                    <label class="form-check-label" for="repeatToggle">Repeat</label>
                </div> --}}

                <!-- Repeat Options - Hidden by default -->
                <div id="repeatOptions" style="display: none;">
                    <div class="form-floating form-floating-outline mb-4">
                        <select class="form-select" id="repeat" name="repeat">
                            <option value="none">None</option>
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                            <option value="weekdays">Weekdays (Mon - Fri)</option>
                            <option value="monthly">Monthly</option>
                            <option value="yearly">Yearly</option>
                            <option value="custom">Custom</option>
                        </select>
                        <label for="repeat">Repeat Type</label>
                    </div>

                    <!-- Custom Repeat Options -->
                    <div id="customRepeatOptions" style="display: none;">
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <input type="number" class="form-control" id="custom_interval" name="custom_repeat[interval]" min="1" value="1">
                            </div>
                            <div class="col-md-8">
                                <select class="form-select" id="custom_unit" name="custom_repeat[unit]">
                                    <option value="days">Days</option>
                                    <option value="weeks" selected>Weeks</option>
                                    <option value="months">Months</option>
                                    <option value="years">Years</option>
                                </select>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Repeat on</label>
                            <div class="d-flex justify-content-center gap-1">
                                @foreach(['Su','Mo','Tu','We','Th','Fr','Sa'] as $day)
                                    <input type="checkbox" class="btn-check" id="repeat_{{ $day }}" name="custom_repeat[days][]" value="{{ $day }}">
                                    <label class="btn btn-outline-primary" for="repeat_{{ $day }}">{{ $day }}</label>
                                @endforeach
                            </div>
                        </div>
                    </div>

                </div>

                <button type="submit" class="btn btn-dark me-sm-3 me-1 data-submit">Submit</button>
                <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">Cancel</button>
            </form>
        </div>
    </div>

    @if(!empty($startedTasks))
        @php
            $startTime = optional($startedTasks)->start_time;
        @endphp

        <script>
            const startTime = "{{ \Carbon\Carbon::parse($startTime)->format('Y-m-d H:i:s') }}";

            $('#clockOutBtn').on('click', function () {
                $('#summaryModal').modal('show');
            });

            

        </script>

        <script>
            if (startTime) {
                const start = new Date(startTime);

                function updateElapsedTime() {
                    const now = new Date();
                    let diff = Math.floor((now - start) / 1000); // Difference in seconds

                    const hours = Math.floor(diff / 3600).toString().padStart(2, '0');
                    diff %= 3600;
                    const minutes = Math.floor(diff / 60).toString().padStart(2, '0');
                    const seconds = (diff % 60).toString().padStart(2, '0');

                    document.getElementById('liveClockDisplay').textContent = `${hours}:${minutes}:${seconds}`;
                }

                updateElapsedTime(); // Run once immediately
                setInterval(updateElapsedTime, 1000); // Then every second
            }
        </script>

    @endif
    <script>
        var canCreate = @json(auth()->user()->can('taskManage.create'));
        var canView = @json(auth()->user()->can('taskManage.view'));
        var canEdit = @json(auth()->user()->can('taskManage.edit'));
        var canDelete = @json(auth()->user()->can('taskManage.delete'));
        $(document).ready(function() {
            $('.select2').select2({
                dropdownParent: $('.offcanvas')
            });
        });
        window.isEmployee = {{ auth()->user()->hasRole('Employee') ? 'true' : 'false' }};
        var endTask = "{{ route('task.end') }}";
        const formUserEditUrl = "{{ url('/formUser-list') }}";
    </script>
    <script>
        // Define the function
        function loadForms() {
            $.ajax({
                url: '{{ route("forms.fetch") }}',
                method: 'GET',
                success: function (data) {
                    const $select = $('#form_id');
                    const selectedValues = $select.val(); // Save selected values

                    $select.empty(); // Clear existing options

                    data.forEach(form => {
                        const isSelected = selectedValues.includes(form.id.toString()) ? 'selected' : '';
                        $select.append(`<option value="${form.id}" ${isSelected}>${form.name}</option>`);
                    });

                    $select.trigger('change'); // Refresh Select2 or standard select
                },
                error: function () {
                    alert('Unable to fetch forms.');
                }
            });
        }

        // Call the function on window load
        window.onload = function () {
            loadForms();
        };

        // Call the function when reload button is clicked
        $('#reloadForms').on('click', function () {
            loadForms();
        });
    </script>
    


@endsection

{{-- Task manage js line 185 of task  --}}
{{-- <div style="min-width: 140px; text-align: center;">
                                        <div class="text-muted small" style="font-weight: 500; margin-bottom: 2px;">Assigned To</div>
                                        <span class="small fw-medium text-dark">${task.employee_name}</span>
                                    </div> --}}