@extends('layouts.location_app')
@section('title', 'Be Spoke Forms dashboard')
@section('subHeader')

{{-- @dd(Session::has('success'), Session::has('error'), Session::get('success'), Session::get('error')) --}}
    @php
        use App\Models\HeadOffices\CaseManager\HeadOfficeCase;
        use App\Models\User;
        use App\Models\Forms\Record;
        if(isset($record->reported_location)){
            $reported_location = $record->reported_location;
        }else{
            $reported_location = isset($case) ? $case->saved_loc : $location;
        }

    @endphp
   
@endsection
@section('content')
<style>
    .tooltip-container {
           position: relative;
           display: inline-block;
           cursor: pointer;
           top: -1px;
       }
.nav-tabs {
    border-bottom: 2px solid #dee2e6;
    position: relative;
}

.nav-tabs .nav-link {
    border: none;
    color: #495057;
    padding: 10px 20px;
    position: relative;
}

.nav-tabs .nav-link.active {
    
      background-color:  var(--location-section-heading-color);
    background-color: transparent;background-color: transparent;
    border: none;
}

/* Add the colored line for active tab */
.nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Align with the nav-tabs border */
    left: 0;
    width: 100%;
    height: 3px;
      background-color: var(--location-section-heading-color);
    border-radius: 3px 3px 0 0;
}

/* For the "Tasks" tab specifically with red color */
.nav-tabs .nav-link#tasks-tab.active::after {
    background-color: var(--location-section-heading-color); /* Red color */
}

/* Hover effect */
.nav-tabs .nav-link:hover:not(.active)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #dee2e6;
}
       .tooltip-container .tooltip-text {
           visibility: hidden;
           width: 250px; 
           background-color: white;
           color: black; 
           text-align: center;
           padding: 8px;
           border-radius: 5px;
           position: absolute;
           bottom: 130%; 
           left: 50%;
           transform: translateX(-50%);
           box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
           font-size: 14px;
           font-family: Arial, sans-serif;
           white-space: normal; 
           border: 1px solid #ccc;
           z-index: 10000;
           opacity: 0;
           font-weight: 0 !important;
           transition: opacity 0.2s ease-in-out;
           word-wrap: break-word;
       }

       .tooltip-container .tooltip-text::after {
           content: "";
           position: absolute;
           top: 100%;
           left: 50%;
           transform: translateX(-50%);
           border-width: 6px;
           border-style: solid;
           border-color: white transparent transparent transparent;
       }

       .tooltip-container:hover .tooltip-text {
           visibility: visible;
           opacity: 1;
       }
  </style>
   <style>
    /* .task-card {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    } */

    .badge-status {
        background-color: #f5c16c;
        color: #000;
        font-size: 14px;
        border-radius: 5px;
        padding: 5px 10px;
    }

    .items-selected {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px;
        background: #fff;
        display: flex;
        align-items: center;
        position: relative;
        width: 100%;
    }

    .dot {
        position: absolute;
        left: 55px;
        bottom: 8px;
        width: 4px;
        height: 4px;
        background-color: black;
        border-radius: 50%;
    }

    .drag-handle {
        cursor: grab;
        font-size: 18px;
        padding: 5px;
    }

    .color-line {
        height: 2px;
        background-color: #009688;
        flex-grow: 1;
        margin-left: 10px;
    }
    .wrapper {
        display: block !important;
        align-items: stretch;
    }

    .row {
        padding: 0 4% !important;
    }

    .filter-sidebar {
        width: 250px;
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px;
        font-family: Arial, sans-serif;
    }

    .filter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        background: #E0F2F1;
        color: #007bff;
        border-radius: 5px;
        margin-bottom: 5px;
    }

    .filter-header.active {
        background: #C8E6C9;
    }

    .filter-toggle {
        font-size: 12px;
    }

    .filter-content {
        padding: 10px;
        display: none;
    }

    .filter-item {
        display: flex;
        align-items: center;
        font-size: 14px;
        margin: 5px 0;
        cursor: pointer;
    }

    .filter-item input {
        margin-right: 10px;
    }

    .badge {
        background: #6c757d;
        color: white;
        font-size: 12px;
        padding: 3px 8px;
        border-radius: 20px;
        margin-left: auto;
    }

    .items-selected {
        position: fixed;
        bottom: -100px;
        left: 50%;
        transform: translateX(-50%);
        background: white;
        border-radius: 10px;
        padding: 12px 20px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        transition: bottom 0.3s ease-in-out;
        z-index: 1000;
        cursor: grab;
        width: 80%;
        max-width: 900px;
        justify-content: space-between;
    }

    .items-selected.visible {
        bottom: 20px;
    }

    .task-dots {
        display: flex;
        align-items: center;
    }

    .dot {
        width: 8px;
        height: 8px;
        background: #2bafa5;
        border-radius: 50%;
        margin: 0 4px;
    }

    .drag-handle {
        cursor: grab;
        font-size: 18px;
    }

    .kanban-board {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 20px;
        justify-content: space-between;
        overflow-x: hidden;
    }

    .kanban-column {
        flex: 1 1 calc(25% - 10px);
        max-width: 25%;
        background: #eef0f4;
        padding: 15px;
        border-radius: 10px;
    }

    .kanban-cards {
        min-height: 100px;
    }

    .kanban-card {
        background: white;
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
        cursor: grab;
        margin-bottom: 10px;
    }

    .wrapper {
        display: block !important;
        align-items: stretch;
    }

    .row {
        padding: 0 4% !important;
    }

    .custom-dropdown {
        width: 200px;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 8px;
        background: #f8f9fa;
        appearance: none;
        cursor: pointer;
    }

    .custom-dropdown::after {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
    }
    .task-card:hover{
        /* opacity: 0.5; */
        transition: 0.2s ease-in-out;
    }
</style>
<script>function changeTabUrl(tabId) {
    // Remove active class from all tabs
    document.querySelectorAll('.nav-link').forEach(tab => {
        tab.classList.remove('active');
    });
    
    // Add active class to clicked tab
    document.getElementById(tabId + '-tab').classList.add('active');
    
    // Hide all tab panes
    document.querySelectorAll('.tab-pane').forEach(pane => {
        pane.classList.remove('show', 'active');
    });
    
    // Show the selected tab pane
    document.getElementById(tabId).classList.add('show', 'active');
    
    // Update URL
    const currentURL = new URL(window.location.href);
    currentURL.searchParams.set('tab', tabId);
    window.history.replaceState({}, '', currentURL.href);
}</script>
<div class="flex" style="width: 100%;">
    <div style="max-width: 70%; margin: 3rem auto 2.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button onclick="changeTabUrl('view_form')" style="background: transparent;font-weight:bold;"
                    class="nav-link active" id="view_form-tab" data-bs-toggle="tab" data-bs-target="#view_form" type="button"
                    role="tab" aria-controls="View form" aria-selected="true">View Form</button>
            </li>
            @if ($is_in_case == '1')
            <li class="nav-item" role="presentation">
                <button onclick="changeTabUrl('updates')" style="background: transparent;font-weight:bold;" class="nav-link"
                    id="updates-tab" data-bs-toggle="tab" data-bs-target="#updates" type="button" role="tab"
                    aria-controls="updates" aria-selected="false">Updates</button>
            </li>
            @endif
            <li class="nav-item" role="presentation">
                <button onclick="changeTabUrl('modification')" style="background: transparent;font-weight:bold;"
                    class="nav-link" id="modification-tab" data-bs-toggle="tab" data-bs-target="#modification"
                    type="button" role="tab" aria-controls="contact" aria-selected="false">Modifications</button>
            </li>
            @if ($record->LfpseSubmissions->count() != 0)
                <li class="nav-item" role="presentation">
                    <button onclick="changeTabUrl('lfpse')" style="background: transparent;font-weight:bold;"
                        class="nav-link" id="lfpse-tab" data-bs-toggle="tab" data-bs-target="#lfpse"
                        type="button" role="tab" aria-controls="contact" aria-selected="false">LFPSE Submission</button>
                </li>
            @endif

            {{-- <li class="nav-item" role="presentation">
                <button style="background: transparent;font-weight:bold;" class="nav-link" id="info-tab"
                    data-bs-toggle="tab" data-bs-target="#info" type="button" role="tab" aria-controls="profile"
                    aria-selected="false">Info</button>
            </li> --}}

            <!-- <li class="nav-item" role="presentation" title="Coming Soon">
                <button onclick="event.preventDefault();" style="background: transparent; font-weight: bold;"
                    class="nav-link" id="root_cause-tab" type="button" role="tab" aria-controls="contact" aria-selected="false">
                    Root Cause Analysis
                </button>
            </li> -->
            @if ($is_in_case == '1')
            <li class="nav-item" role="presentation" style="position: relative;">
                <button 
                    onclick="event.preventDefault();" 
                    style="background: transparent; font-weight: bold;" 
                    class="nav-link" 
                    id="root_cause-tab" 
                    type="button" 
                    role="tab" 
                    aria-controls="contact" 
                    aria-selected="false">
                    Root Cause Analysis
                </button>
                <div class="tooltip" style="display: none; position: absolute; top: -35px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 5px 10px; border-radius: 4px; white-space: nowrap;">
                    Coming Soon
                    <div style="position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent;"></div>
                </div>
            </li>
            @endif
           

<script>
    document.getElementById('root_cause-tab').addEventListener('mouseover', function() {
        this.nextElementSibling.style.display = 'block';
    });

    document.getElementById('root_cause-tab').addEventListener('mouseout', function() {
        this.nextElementSibling.style.display = 'none';
    });
</script>




            @if (count($record->getCaseFeedbacks()) != 0)
                <li class="nav-item" role="presentation">
                    <button onclick="changeTabUrl('feedbacks')" style="background: transparent;font-weight:bold;"
                        class="nav-link" id="feedbacks-tab" data-bs-toggle="tab" data-bs-target="#feedbacks" type="button"
                        role="tab" aria-controls="contact" aria-selected="false">Feedbacks</button>
                </li>
            @endif

            <li class="nav-item" role="presentation">
                <button onclick="changeTabUrl('tasks')" style="background: transparent; font-weight: bold;"
                    class="nav-link" id="tasks-tab" data-bs-toggle="tab" data-bs-target="#tasks" 
                    type="button" role="tab" aria-controls="Tasks" aria-selected="false">
                    Tasks
                </button>
            </li>
            @if (count($record->get_pending_forms(true)) > 0)
                <li class="nav-item" role="presentation">
                    <button onclick="changeTabUrl('incompelete')" style="background: transparent; font-weight: bold;"
                        class="nav-link text-danger" id="incomplete-tab" data-bs-toggle="tab" data-bs-target="#incompelete" 
                        type="button" role="tab" aria-controls="incompelete" aria-selected="false">
                        Incomplete Form
                    </button>
                </li>
            @endif

        </ul>
    </div>

    <div id="content"
        style="max-width: 70%;margin:2.5rem auto;box-shadow:0 0 15px rgba(0, 0, 0, 0.178);margin-top:-2rem !important;">
        
        <div style="text-align: right;">
            <a href="{{ route('be_spoke_forms.be_spoke_form.records') }}" class="text-info "><i
                    class="fa fa-arrow-left"></i>
                Back</a>
        </div>

        <div class="user-info-location">
            <p style="font-size:32px;" class="m-0">{{ $record->form->name }}</p>
            <div class="d-flex w-100 ">
                <div class=" d-flex w-100 gap-2">
                    <div style="font-size: 14px;" class=" d-flex gap-2">
                        <img class="img-profile rounded-circle" width="22" height="22"
                            @if (isset($record->created_by->logo)) src="{{ $record->created_by->id == 0 ? asset('images/user-external.svg') : $record->created_by->logo }}"
                        @else
                        src="{{ asset('admin_assets/img/profile-pic.png') }}" @endif />
                        Completed by
                        <p class="m-0 fw-semibold">
                            {{ $external_email == 'external@qitech.com' ? 'Unknown' :(isset($record->created_by) ? $record->created_by->getNameAttribute() : 'Quick login') }}
                        </p>
                    </div>
                    <div class="d-flex align-items-center gap-2" style="font-size: 14px;white-space: nowrap;">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path stroke="rgb(103,105,121)"
                                d="M12 2V6M12 18V22M6 12H2M22 12H18M19.0784 19.0784L16.25 16.25M19.0784 4.99994L16.25 7.82837M4.92157 19.0784L7.75 16.25M4.92157 4.99994L7.75 7.82837"
                                stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        Created
                        <p class="m-0 fw-semibold">{{ $record->created_at->format('d M Y (D) h:i a') }}</p>
                    </div>
                    <div class="d-flex align-items-center gap-2" style="font-size: 14px;">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path stroke="rgb(103,105,121)"
                                d="M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
                                stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        Last Updated
                        <p class="m-0 fw-semibold"> @if (count($record->get_modifications())!=0)
                            {{last($record->get_modifications())->updated_at->diffForHumans()}}
                            @else
                            {{ $record->updated_at->diffForHumans() }}
                            
                        @endif</p>
                    </div>
                    @if(isset($reported_location))
                       <div class="d-flex align-items-center gap-2" style="font-size: 14px;">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16 8.00007L2 22.0001M18 15.0001H9M6.6 19.0001H13.3373C13.5818 19.0001 13.7041 19.0001 13.8192 18.9724C13.9213 18.9479 14.0188 18.9075 14.1083 18.8527C14.2092 18.7909 14.2957 18.7044 14.4686 18.5314L19.5 13.5001C19.739 13.2611 19.8584 13.1416 19.9546 13.0358C22.0348 10.7474 22.0348 7.25275 19.9546 4.9643C19.8584 4.85851 19.739 4.73903 19.5 4.50007C19.261 4.26111 19.1416 4.14163 19.0358 4.04547C16.7473 1.96531 13.2527 1.96531 10.9642 4.04547C10.8584 4.14163 10.739 4.26111 10.5 4.50007L5.46863 9.53144C5.29568 9.70439 5.2092 9.79087 5.14736 9.89179C5.09253 9.98126 5.05213 10.0788 5.02763 10.1808C5 10.2959 5 10.4182 5 10.6628V17.4001C5 17.9601 5 18.2401 5.10899 18.4541C5.20487 18.6422 5.35785 18.7952 5.54601 18.8911C5.75992 19.0001 6.03995 19.0001 6.6 19.0001Z" stroke="rgb(103,105,121)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            
                           Reported from
                           <p class="m-0 fw-semibold">{{ $reported_location->trading_name }}</p>
                       </div>
                    @endif
                    @if (isset($case))
                        <div class="d-flex align-items-center gap-2" style="font-size: 14px;">
                            <svg width="20" height="20" class="me-1" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M16 7C16 6.07003 16 5.60504 15.8978 5.22354C15.6204 4.18827 14.8117 3.37962 13.7765 3.10222C13.395 3 12.93 3 12 3C11.07 3 10.605 3 10.2235 3.10222C9.18827 3.37962 8.37962 4.18827 8.10222 5.22354C8 5.60504 8 6.07003 8 7M12.8 17.5H17.7C17.98 17.5 18.12 17.5 18.227 17.4455C18.3211 17.3976 18.3976 17.3211 18.4455 17.227C18.5 17.12 18.5 16.98 18.5 16.7V14.3C18.5 14.02 18.5 13.88 18.4455 13.773C18.3976 13.6789 18.3211 13.6024 18.227 13.5545C18.12 13.5 17.98 13.5 17.7 13.5H12.8C12.52 13.5 12.38 13.5 12.273 13.5545C12.1789 13.6024 12.1024 13.6789 12.0545 13.773C12 13.88 12 14.02 12 14.3V16.7C12 16.98 12 17.12 12.0545 17.227C12.1024 17.3211 12.1789 17.3976 12.273 17.4455C12.38 17.5 12.52 17.5 12.8 17.5ZM6.8 21H17.2C18.8802 21 19.7202 21 20.362 20.673C20.9265 20.3854 21.3854 19.9265 21.673 19.362C22 18.7202 22 17.8802 22 16.2V11.8C22 10.1198 22 9.27976 21.673 8.63803C21.3854 8.07354 20.9265 7.6146 20.362 7.32698C19.7202 7 18.8802 7 17.2 7H6.8C5.11984 7 4.27976 7 3.63803 7.32698C3.07354 7.6146 2.6146 8.07354 2.32698 8.63803C2 9.27976 2 10.1198 2 11.8V16.2C2 17.8802 2 18.7202 2.32698 19.362C2.6146 19.9265 3.07354 20.3854 3.63803 20.673C4.27976 21 5.11984 21 6.8 21Z"
                                        stroke="rgb(103,105,121)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            <p class="mb-0" style="font-size: 14px;">Case  #{{$case->id}}</p>
                        </div>
                    @endif


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


        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active px-3" id="view_form" role="tabpanel" aria-labelledby="view_form-tab">
                @if ($record->form->allow_editing_state !== 'disable' && is_null($record->id) != true && isset($case->id) && $case->status !== 'closed' && $record->canEdit())
                @if ( isset($location->organization_setting_assignment->organization_setting))

                <a href="/bespoke_form_v3/#!/edit/{{$record->id}}?case_id={{$case->id}}&location_id={{$location->id}}&rec_id={{$record->id}}&setting_id={{$location->organization_setting_assignment->organization_setting->id}}" style="position: absolute;right:90px;top:13px;"  class="btn btn-info">Modify Report</a>
                @else
                <a href="/bespoke_form_v3/#!/edit/{{$record->id}}?case_id={{$case->id}}&location_id={{$location->id}}&rec_id={{$record->id}}" style="position: absolute;right:90px;top:13px;"  class="btn btn-info">Modify Report</a>

                @endif   
                    <button style="position: absolute;right:90px;align-self: flex-end; display:none;" class="btn btn-info"
                        id="apply-btn" type="submit">Apply Changes</button>
                @endif

                <div>

                    <div>
                        <form id='modify-form' style="min-height: 65vh;margin-top:32px;"
                            action="{{ route('be_spoke_forms.be_spoke_form.mod.save', ['id' => $record->id]) }}"
                            method="POST">
                            @csrf
                            <div class="details-4 details_{{ $record->id }} d-flex flex-column gap-2">

                                @php
                                    $data_objects = [];
                                    if (isset($record)) {
                                        $data_objects = Record::withoutGlobalScope('lean')->find($record->id)->get_form_data();
                                        
                                    }
                                @endphp
                            @if (count($data_objects) > 0)
                                <div class="d-flex flex-column gap-3 mt-3">
                                    @foreach ($data_objects as $data)
                                    @if (!empty($data['value']))
                                    
                                        <div style="line-height: 15px;">

                                            <p class="m-0" style="font-size:12px; color:gray;line-height: inherit;">
                                                {{ $data['label'] }}
                                            </p>
                                            @if (is_array($data['value']))
                                                @foreach ($data['value'] as $item)
                                                    <p class="m-0" style="font-size: 13px">{{ $item }}</p>
                                                @endforeach
                                            @else
                                                @if (isset($data['rating_icon']) && $data['rating_icon'] == 'stars')
                                                    <p class="m-0" style="font-size: 13px">
                                                        @for ($i = 1; $i <= $data['total_options']; $i++)
                                                            <i class="fa fa-star" {{ $i <= $data['value'] ? 'style=color:#30ba9f' : 'style=color:#dddfeb' }} aria-hidden="true"></i>
                                                        @endfor
                                                    </p>
                                                @elseif(isset($data['rating_icon']) && $data['rating_icon'] == 'label')
                                                    <p class="m-0 d-flex gap-2" style="font-size: 13px">
                                                        @for ($i = 1; $i <= $data['total_options']; $i++)
                                                            <span class="rating_item p-1 px-2 {{$i == $data['value'] ? 'selected' : ''}}" style="min-width: fit-content;height: fit-content;font-size: 12px" >{{$i}}</span>
                                                        @endfor
                                                    </p>
                                                @else
                                                <p class="m-0" style="font-size: 13px">{{ $data['value'] }}</p>
                                                @endif
                                            @endif
                                        </div>
                                    @endif
                                    @endforeach
                                </div>
                                @else
                                    <!-- <p>There are no tasks</p> -->
                                @endif
                            </div>
                        </form>
                        @if ($record->form->allow_responder_update && count($record->updates) != 0)
                            <div style="text-align: right;">
                                <button class="btn btn-info" id="view-update-btn">View Updates</button>
                            </div>
                        @endif
                    </div>
                </div>

            </div>
            <div class="tab-pane fade px-3" id="incompelete" role="tabpanel" aria-labelledby="incompelete-tab">
                @if (count($record->get_pending_forms(true)) != 0)
                <h6 class="fw-bold d-flex align-items-center gap-1 mt-3">Incomplete Forms 
                <span class="tooltip-container">
                    <svg style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10" />
                        <line x1="12" y1="8" x2="12" y2="8" />
                        <line x1="12" y1="12" x2="12" y2="16" />
                    </svg>
                    <span class="tooltip-text">
                        These forms are generated and require completion when triggered by specific logic within the initial form
                    </span>
                </span>
                </h6>
                    <table class="table new-table">
                        <thead>
                            <th>Type</th>
                            <th></th>
                            <th></th>
                        </thead>
                        <tbody>
                            @foreach ($record->get_pending_forms(true) as $pending_form )
                                <tr>
                                    <td>{{$pending_form['form']}}</td>
                                    <td>{{isset($pending_form['form_draft']) ? $pending_form['form_draft'] : '-'}}</td>
                                    <td>
                                        <div class="d-flex flex-column">
                                            <a href="javascript:void(0);" 
                                                class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" 
                                                data-bs-toggle="modal" 
                                                data-bs-target="#ignoreReasonModal"
                                                data-url="{{ route('case_manager.case_record_not_required', ['id' => $pending_form['id'], 'record_id' => $record->id, 'location' => 1]) }}">
                                                Ignore
                                            </a>
                                            @if ($record->created_by->email != 'external@qitech.com' || $pending_form['type'] == 0)
                                            <a href="{{ url('/bespoke_form_v3/#!/submit/'.$pending_form['form_id'].'?user=1&cond_id='.$pending_form['id'].'&linked_record='.$record->id.'&location_id='.$location->id) }}" target="_blank" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Complete Now</a>
                                            @elseif ($record->created_by->email == 'external@qitech.com' || $pending_form['type'] == 1)
                                            <a href="{{ url('/bespoke_form_v3/#!/submit/'.$pending_form['form_id'].'?external=1&cond_id='.$pending_form['id'].'&linked_record='.$record->id) }}" target="_blank" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Submit</a>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            </div>
        <div class="tab-pane fade px-3" id="tasks" role="tabpanel" aria-labelledby="tasks-tab">
    @if (isset($tasks) && isset($tasks) && count($tasks) != 0)
        @foreach ($tasks as $taskItem)
        @php
                                    // Check if there's an extended due date (dead_line_date or task_over_due_date)
                                    $extendedDueDate = null;
                                    if ($taskItem->dead_line_date) {
                                        $extendedDueDate = $taskItem->dead_line_date;
                                    } elseif ($taskItem->task_over_due_date) {
                                        $extendedDueDate = $taskItem->task_over_due_date;
                                    }
                                    
                                    // Use extended due date if available, otherwise use the original due date
                                    $effectiveDueDate = $extendedDueDate ? $extendedDueDate : $taskItem->due_date;
                                    
                                    // Calculate if overdue based on the effective due date
                                    $isOverdue = $effectiveDueDate && 
                                                \Carbon\Carbon::parse($effectiveDueDate)->isPast() &&
                                                $taskItem->status !== 'completed';
                                @endphp
                                <div class="d-flex align-items-start my-3">
                                    <!-- Checkbox OUTSIDE -->
                                    <!-- <div class="me-2 mt-2">
                                        
                                        <input style="margin-top: 58px;" type="checkbox" class="task-select">
                                    </div> -->
                                    <!-- Main Card -->
                                    <div class="card w-100 p-3 task-card"
                                         data-id="{{ $taskItem->id }}"
                                         data-priority="{{ $taskItem->priority }}"
                                         data-status="{{ strtolower(str_replace('_', ' ', $taskItem->status)) }}"
                                         data-due-date="{{ $effectiveDueDate ?? $taskItem->due_date }}"
                                         data-deadline="{{ $effectiveDueDate ? \Carbon\Carbon::parse($effectiveDueDate)->diffInDays(now()) : '' }}">
                                        <div class="row text-muted" style="font-size: 0.9rem;">
                                            <!-- Section 1 -->
                                            <div style="margin-left: -32px;font-size: 15px;" class="col-md-3 border-end pe-3">
                                                <div class=" text-black">Task #{{ $taskItem->id }}</div>
                                                <h6 class="mt-2 fw-bold text-black" style="margin-left: 2px;">
                                                    {{ $taskItem->title ?? '[Task Name goes here]' }}
                                                </h6>
                                                <span style="font-size: 15px"
                                                    class="badge  pri-tag mt-2 {{ $taskItem->priority }}">{{ $taskItem->priority ?? 'No Priority' }}</span>
                                                @if ($isOverdue)
                                                    <span style="font-size: 15px"
                                                        class="badge bg-danger mt-2">Overdue</span>
                                                @endif
                                            </div>
                                            <!-- Section 2 -->
                                            <div class="col-md-4 border-end px-3">
                                                @if (isset($taskItem->created_by) && isset($taskItem->created_by->user->logo))
                                                    <div class="mt-1">
                                                        <i class="bi bi-sun"></i>
                                                        <img class="img-profile rounded-circle" width="22"
                                                            height="22"
                                                            src="{{ optional(optional($taskItem->created_by)->user)->logo ?? asset('images/default-user.png') }}">
                                                        Created by:
                                                        <span class="fw-medium"
                                                            style="padding-left: 10px">{{ optional(optional($taskItem->created_by)->user)->name ?? 'Default Task' }}</span>
                                                    </div>
                                                @endif
                                                <div class="mt-1">
                                                    <i class="bi bi-sun"></i>
                                                    <svg width="20" height="20"
                                                        style="margin-top: -2px;margin-right: 5px" viewBox="0 0 24 24"
                                                        fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path stroke="rgb(103,105,121)"
                                                            d="M12 2V6M12 18V22M6 12H2M22 12H18M19.0784 19.0784L16.25 16.25M19.0784 4.99994L16.25 7.82837M4.92157 19.0784L7.75 16.25M4.92157 4.99994L7.75 7.82837"
                                                            stroke-width="2" stroke-linecap="round"
                                                            stroke-linejoin="round"></path>
                                                    </svg>Created at:
                                                    {{ \Carbon\Carbon::parse($taskItem->created_at)->format('d M Y (D) h:i a') }}
                                                </div>
                                                <div class="mt-1"><i class="bi bi-clock-history"></i><svg
                                                        width="20" height="20"
                                                        style="margin-top: -2px;margin-right: 5px" viewBox="0 0 24 24"
                                                        fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path stroke="rgb(103,105,121)"
                                                            d="M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
                                                            stroke-width="2" stroke-linecap="round"
                                                            stroke-linejoin="round"></path>
                                                    </svg> Last Updated {{ $taskItem->updated_at->diffForHumans() }}
                                                </div>
                                                <div style="font-size: 14px">
                                                    <svg width="20" height="20"
                                                        style="margin-top: -2px;margin-right: 5px" viewBox="0 0 24 24"
                                                        fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path stroke="rgb(103,105,121)"
                                                            d="M5 3L2 6M22 6L19 3M6 19L4 21M18 19L20 21M12 9V13L14 15M12 21C14.1217 21 16.1566 20.1571 17.6569 18.6569C19.1571 17.1566 20 15.1217 20 13C20 10.8783 19.1571 8.84344 17.6569 7.34315C16.1566 5.84285 14.1217 5 12 5C9.87827 5 7.84344 5.84285 6.34315 7.34315C4.84285 8.84344 4 10.8783 4 13C4 15.1217 4.84285 17.1566 6.34315 18.6569C7.84344 20.1571 9.87827 21 12 21Z"
                                                            stroke="black" stroke-width="2" stroke-linecap="round"
                                                            stroke-linejoin="round" />
                                                    </svg>
                                                    Due Date:
                                                    {{ $effectiveDueDate ? \Carbon\Carbon::parse($effectiveDueDate)->format('d M Y (D) h:i a') : 'No Due Date' }}
                                                </div>


                                                @if (optional($taskItem->ho_allocations)->count() > 0)
                                                    <div class="mt-1">
                                                        <i class="bi bi-bookmark"></i>
                                                        <svg width="20" height="20"
                                                            style="margin-top: -3px;margin-right: 5px" fill="none"
                                                            xmlns="http://www.w3.org/2000/svg">
                                                            <path stroke="rgb(103,105,121)"
                                                                d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
                                                                stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                                        </svg>
                                                        Assigned To:
                                                        {{ optional($taskItem->ho_allocations)->pluck('head_office_user.user.name')->filter()->implode(', ') ?? '' }}
                                                    </div>
                                                @endif
                                                @if (optional($taskItem->loc_allocations)->count() > 0)
                                                    <div class="mt-1">
                                                        <i class="bi bi-bookmark"></i>
                                                        <svg width="20" height="20"
                                                            style="margin-top: -3px;margin-right: 5px" viewBox="0 0 24 24"
                                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path stroke="rgb(103,105,121)"
                                                                d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
                                                                stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                            Assigned To:
                                                            {{ optional($taskItem->loc_allocations)->load('head_office_location.location')->pluck('head_office_location.location.trading_name')->filter()->implode(', ') ?? '' }}
                                                    </div>
                                                @endif
                                                <div class="mt-1">
                                                    <i class="bi bi-sun"></i>
                                                    <svg width="20" height="20"
                                                        style="margin-top: -4px;margin-right: 5px" viewBox="0 0 24 24"
                                                        fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M11 11H6.2C5.07989 11 4.51984 11 4.09202 11.218C3.71569 11.4097 3.40973 11.7157 3.21799 12.092C3 12.5198 3 13.0799 3 14.2V21M21 21V6.2C21 5.0799 21 4.51984 20.782 4.09202C20.5903 3.71569 20.2843 3.40973 19.908 3.21799C19.4802 3 18.9201 3 17.8 3H14.2C13.0799 3 12.5198 3 12.092 3.21799C11.7157 3.40973 11.4097 3.71569 11.218 4.09202C11 4.51984 11 5.0799 11 6.2V21M22 21H2M14.5 7H17.5M14.5 11H17.5M14.5 15H17.5"
                                                            stroke="rgb(103,105,121)" stroke-width="2"
                                                            stroke-linecap="round" stroke-linejoin="round"></path>
                                                        </svg>Site Involved:
                                                        {{ optional($taskItem->task_case)->location_name ?? 'Unknown Site' }}
                                                </div>
                                            </div>
                                            <!-- Section 3 -->
                                            <div class="col-md-3 border-end px-3">
                                                Description:<br>
                                                {!! $taskItem->description ?? 'No Description' !!}
                                            </div>
                                            <!-- Section 4 -->
                                            <div class="col-md-2 d-flex flex-column align-items-end "
                                                style="margin-right: -10px">
                                                <div class="mb-1">
                                                    @livewire('task-status', ['task' => $taskItem->id])
                                                </div>
                                                <div class="text-end ">
                                                    <a href="{{ route('location.tasks.show', $taskItem->id) }}" target="_blank"
                                                        class="btn btn-outline-secondary btn-sm m-0 mt-3 pe-4 py-1 fs-6 "
                                                        style="padding-left: 27px;">View Task </a>
                                                </div>
                                                <!-- <div class="text-end">
                                                    @if ($taskItem->task_case)
                                                        <a href="/head_office/case/manager/view/{{ $taskItem->task_case->id }}"
                                                            class="btn btn-outline-secondary btn-sm mt-3 ps-4 pe-4 py-1 fs-6 ">View
                                                            Case</a>
                                                    @endif
                                                </div> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
        @endforeach
    @else
        <div class="text-center py-5">
            <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle text-muted mb-3">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                <polyline points="22 4 12 14.01 9 11.01"></polyline>
            </svg>
            <h5 class="text-muted">There are no tasks</h5>
            <p class="text-muted">All caught up! No tasks assigned at the moment.</p>
        </div>
    @endif
</div>
            <div class="tab-pane fade" id="info" role="tabpanel" aria-labelledby="info-tab">
                <h3 class="h5 bg-info text-white p-2 px-3 rounded-pill" style="margin-top:-1.9rem;width:fit-content;">
                    {{ $record->form->name }}</h3>
                <div class="mx-3 mt-3 d-flex align-items-center gap-2">
                    <h6 class="h6">Description:</h6>
                    <h6 class="h6 fw-normal text-muted"> {{ $record->form->note }}</h6>
                </div>
                <div class="mx-3 d-flex align-items-center gap-2">
                    <h6 class="h6">Submitted:</h6>
                    <h6 class="h6 fw-normal text-muted"> {{ $record->created_at->format('d M Y (D) h:i a') }}</h6>
                </div>
                <div class="mx-3 d-flex align-items-center gap-2">
                    <h6 class="h6">Completed By:</h6>
                    <h6 class="h6 fw-normal text-info"> {{ $record->location->trading_name }}</h6>
                    <h6 class="h6 fw-normal text-muted">
                        ,{{ isset($record->created_by) ? ($record->created_by->first_name . ' ' . $record->created_by->surname) : 'Quick login' }}</h6>
                </div>
            </div>

            <div class="tab-pane fade" id="updates" role="tabpanel" aria-labelledby="updates-tab">
                @if ($record->form->allow_responder_update)
                    <div class="">
                        @foreach ($record->updates as $key => $update)
                            <div data-comment="{{ $update->id }}" class="cm_comment card  cm_comment_grey ">
                                <div class="cm_comment_author_date">
                                    <b>{{ optional($update->user)->name }}</b> Updated
                                    {{ $update->created_at->diffForHumans() }}
                                    <span class="float-right">{{ $update->created_at->format('d M Y (D) h:i a') }}
                                    </span>
                                </div>
                                <div class="cm_comment_comment">
                                    {!! $update->update !!}
                                </div>
                                <div class="cm_comment_attachments mt-1">
                                    <div class="cm_comment_people">
                                        @foreach ($update->documents as $doc)
                                            <span data-toggle="tooltip" title=""
                                                class="badge badge-primary badge-user">
                                                <a style="color: white"
                                                    class="relative @if ($doc->type == 'image') cm_image_link @endif "
                                                    href="{{ route('head_office.be_spoke_forms.record.update.view.attachment', $doc->document->unique_id) . $doc->document->extension() }}"
                                                    target="_blank">
                                                    @if ($doc->type == 'image')
                                                    <i class="fa fa-image"></i> @else<i class="fa fa-link"></i>
                                                    @endif
                                                    {{ $doc->document->original_file_name() }}
                                                    @if ($doc->type == 'image')
                                                        <div class="cm_image_hover">
                                                            <div class="card shadow">
                                                                <div class="card-body">
                                                                    <img class="image-responsive" width="300"
                                                                        src="{{ route('head_office.be_spoke_forms.record.update.view.attachment', $doc->document->unique_id) . $doc->document->extension() }}">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endif
                                                </a>
                                            </span>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                            
                        @if ($record->form->update_time_left($record->created_at)['allowed'] == false && $record->form->allow_update_state != 'open')
                            <p class="mt-4 ms-3">Unfortunately, the time period to submit further updates has passed.
                                Please submit another form if you need to provide further information.</p>
                        @elseif (isset($case) && $case->status == 'closed' && $record->form->allow_update_state != 'open')
                        <p class="mt-4 ms-3">Case is Closed</p>

                        @else
                        
                            <div class="card update_card_{{ $record->id }} mt-3">
                                <div class="card-header">
                                    {{ $record->form->allow_responder_update == true ? 'Provide an Update' : 'Updates Not Allowed' }}
                                    <span class="tooltip-container">
                                        <svg style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round">
                                            <circle cx="12" cy="12" r="10" />
                                            <line x1="12" y1="8" x2="12" y2="8" />
                                            <line x1="12" y1="12" x2="12" y2="16" />
                                        </svg>
                                        <span class="tooltip-text">
                                             You can provide any new updates to the team investigating this case
                                        </span>
                                    </span>
                                </div>
                                <div class="card-body">
                                    <form class="cm_task_form" method="post"
                                        action="{{ route('be_spoke_forms.be_spoke_form.update', $record->id) }}">
                                        @csrf
                                        <div class="form-group">
                                            <label>Enter Update</label>
                                            <textarea spellcheck="true"  name="update" class="form-control" required 
                                                    {{ $record->form->allow_responder_update == true ? '' : 'disabled' }} 
                                                    rows="3"></textarea>
                                        </div>

                                        <div class="uploaded_files mt-2 mb-2">
                                    @foreach ($record->documents ?? [] as $doc)
                                    <li>
                                        <input type='hidden' name='documents[]' class='file document'
                                            value='{{$doc->document->unique_id}}'>
                                        <span class="fa fa-file"></span>&nbsp;{{$doc->document->original_file_name()}}
                                        <a href="{{route('headoffice.view.attachment', $doc->document->unique_id).$doc->document->extension()}}"
                                            target="_blank" title='Preview' class="preview_btn"> <span
                                                class="fa fa-eye"></span></a>
                                        <a href="#" title='Delete File' class="remove_btn"> <span
                                                class="fa fa-times"></span></a>
                                    </li>
                                    @endforeach
                                </div>
                                        <h6 class="text-info">Select documents/images to upload</h6>
                                        <div class="cm_upload_box_with_model center"
                                            style="display: {{ $record->form->allow_responder_update == true ? 'block' : 'none' }};">
                                            <i class="fa fa-cloud-upload-alt" style="font-size:48px"></i><br>Drop files
                                            here
                                        </div>
                                        <input {{ $record->form->allow_responder_update == true ? '' : 'disabled' }}
                                            type="file" name="file" multiple value=""
                                            class="form-control commentMultipleFiles">
                                        <button
                                            type="{{ $record->form->allow_responder_update == true ? 'submit' : 'reset' }}"
                                            class="btn btn-info mt-2">Save</button>
                                    </form>
                                </div>
                            </div>
                        @endif
                    </div>
                @else
                    <p class="mt-4 ms-3">This form does not allow updates. Please submit another form if you need to
                        provide further information.</p>
                @endif
            </div>
            
            <div class="tab-pane fade" id="modification" role="tabpanel" aria-labelledby="modification-tab">
                @if (isset($parent_record) && count($parent_record->get_modifications()) != 0)
                <div class="timeline-2">
                    @php
                    $modifications = collect($parent_record->get_modifications())->sortByDesc('created_at');
                    @endphp
                    
                    @foreach ($modifications as $modification)
                        @php
                            $json = isset($modification->modified_data) ? json_decode($modification->modified_data, true) : [];
                        @endphp
                    
                        <div data-bs-comment="{{ $modification->id }}" class="timeline-entry">
                            <div class="timeline-entry-inner">
                                <div class="cm_comment_author_date grey-background">
                                    <b>{{ $modification->user->name }}</b> 
                                    <span style="color: rgb(0, 128, 2)">Modified</span> a response
                                    <span class="float-right">{{ $modification->created_at->diffForHumans() }}</span>
                                </div>
                                <div class="cm_comment_content">
                                    <ul>
                                        @foreach ($json as $id => $changes)
                                            @php
                                                // Function to extract values
                                                if (!function_exists('extractValues')) {
                                                    function extractValues($value) {
                                                        if (is_array($value) && !empty($value)) {
                                                            $flattened = [];
                                                            foreach ($value as $item) {
                                                                if (is_array($item)) {
                                                                    if (!empty($item['vtm']['vtm_string'])) {
                                                                        $flattened[] = $item['vtm']['vtm_string'];
                                                                    }
                                                                    if (!empty($item['other'])) {
                                                                        $flattened[] = $item['other'];
                                                                    }
                                                                } else {
                                                                    $flattened[] = (string) $item;
                                                                }
                                                            }
                                                            return !empty($flattened) ? implode(', ', $flattened) : null;
                                                        }
                                                        return !empty($value) ? (string) $value : null;
                                                    }
                                                }
                    
                                                // Extract values
                                                $original_value = extractValues($changes['original']['value'] ?? null);
                                                $modified_value = extractValues($changes['modified']['value'] ?? null);
                    
                                                // Skip rendering if both values are empty
                                                if (empty($original_value) && empty($modified_value)) {
                                                    continue;
                                                }
                    
                                                // Get details or fallback
                                                $details = !empty($original_value) ? $record->get_question_details_by_id($id, $modification->parent_record_id, $original_value) : null;
                                                $modified_details = !empty($modified_value) ? $record->get_question_details_by_id($id, $modification->parent_record_id, $modified_value) : null;
                    
                                                if (empty($details) && !empty($original_value)) {
                                                    $details = $original_value;
                                                }
                                                
                                                if (empty($modified_details) && !empty($modified_value)) {
                                                    $modified_details = $modified_value;
                                                }
                    
                                                // Format results
                                                $result = is_array($details) && !empty($details) ? implode(', ', array_map('strval', $details)) : ($details ?? 'N/A');
                                                $modified_result = is_array($modified_details) && !empty($modified_details) ? implode(', ', array_map('strval', $modified_details)) : ($modified_details ?? 'N/A');
                                            @endphp
                    
                                            <li>
                                                <b>Question:</b> {{ $changes['original']['label'] ?? 'Unknown' }}  
                                                <div class="response-comparison justify-content-start">
                                                    <b class="me-5">Response:</b>
                                                    <span class="original-response">{{ $result ?? 'N/A' }}</span>
                                                    <span class="arrow">→</span>
                                                    <span class="modified-response">{{ $modified_result ?? 'N/A' }}</span>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                    @endforeach
                
                </div>
                @else
                    <p class="mt-4 ms-3">No modifications!</p>
                @endif
            </div>
              <div class="tab-pane fade" id="root_cause" role="tabpanel" aria-labelledby="root_cause-tab">root</div>
            <div class="tab-pane fade" id="feedbacks" role="tabpanel" aria-labelledby="feedbacks-tab">
                <div class="px-4 mt-4">
                    @if (count($record->getCaseFeedbacks()) != 0)
                        @foreach ($record->getCaseFeedbacks() as $feedback)
                            @php
                                $case_ids = isset($feedback->case_ids) ? json_decode($feedback->case_ids, true) : null;
                            @endphp
                            <div class="p-4 d-flex mb-3"
                                style="border: 1px solid #dee2e6;border-radius:0.9rem;gap:5rem!important;">
                                <img style="width: 85px;height:85px;object-fit:cover;"
                                    src="{{ $feedback->headOffice->getLogoAttribute() }}" alt="headoffice logo">
                                <div>
                                    <p class="text-info m-0" style="font-size: 14px; margin-bottom:0.5rem;">Date</p>
                                    <h6 class="m-0 " style="font-weight: 400;">
                                        {{ $feedback->created_at->format('d/m/Y') }}</h6>
                                </div>
                                <div>
                                    <p class="text-info m-0" style="font-size: 14px; margin-bottom:0.5rem;">Reported</p>
                                    @isset($case_ids)
                                        @foreach ($case_ids as $case_id)
                                            @php
                                                $feedback_case = HeadOfficeCase::find($case_id)->first();
                                            @endphp
                                            <div class="d-flex flex-column mb-3">
                                                <p class="m-0 fw-semibold" style="font-weight: 400;line-height:1.2;">
                                                    {{ $feedback_case->created_at->format('d/m/Y') }}</p>
                                                <p class="m-0 fw-semibold" style="font-weight: 400;line-height:1.2;">
                                                    {{ $feedback_case->incident_type }}</p>
                                                <p class="m-0 fw-semibold" style="font-weight: 400;line-height:1.2;">
                                                    {{ $feedback_case->location_name }}</p>
                                            </div>
                                        @endforeach
                                    @endisset
                                </div>
                                @if ($feedback->is_feedback_location)
                                    <div>
                                        <p class="text-info m-0" style="font-size: 14px; margin-bottom:0.5rem;">Feedback
                                            by {{ $feedback->HeadOffice->name() }}</p>
                                        <p class="m-0 fw-semibold" style="font-weight: 400;line-height:1.2;">
                                            {!! isset($feedback->feedback_location)
                                                ? $feedback->feedback_location
                                                : $feedback->HeadOffice->name() . ' ' . "did'nt provided any feedback" !!}</p>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    @else
                        <p class="h5 text-center mt-3">No Feedbacks at the moment 🙂!</p>
                    @endif
                </div>
            </div>

            <div class="tab-pane fade" id="lfpse" role="tabpanel" aria-labelledby="lfpse-tab">
                <div class="px-4 mt-4">
                    @if (isset($case) && $case->submitable_to_nhs_lfpse == 1)
                        <div>
                            @if(count($record->LfpseSubmissions) == 0)
                                <div>Submission Status: <b class="text-warning">Not Submitted</b></div>
                            @else
                            <div class="d-flex align-items-center gap-2">
                                @if (isset($record->lfpse_deletes))
                                <div>
                                    <div>Submission Status: <b class="text-danger">Deleted</b></div>
                                        @if(isset($record->lfpse_deletes->message))
                                            <div>
                                                <p class=" mb-0 mt-2" style="line-height: 0.5;"><small>Deletion Message:</small></p>
                                                <p class="text-secondary mb-0 ms-1">{{$record->lfpse_deletes->message}}</p>
                                            </div>
                                        @endif
                                </div>
                                @else
                                    <div>Submission Status: <b class="text-success">Submitted</b></div>
        
                                @endif
                            </div>
                                <br />
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <td style="font-weight:bold;">Sr#</td>
                                            @foreach ($record->LfpseSubmissions as $sr => $s)
                                                <td>Record {{$sr + 1}}</td>
                                            @endforeach
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td style="font-weight:bold;white-space:nowrap">LFPSE ID</td>
                                            @foreach ($record->LfpseSubmissions as $s)
                                                <td>{{$s->reference_id}}</td>
                                            @endforeach
                                        </tr>
                                        <tr>
                                            <td style="font-weight:bold;">Type</td>
                                            @php
                                                $data_objects = collect($data_objects);
                                                $FormType = $data_objects->firstWhere('label', 'What kind of event do you want to record?')['value'];
                                                
                                            @endphp
                                                <td>{{$FormType == 'Incident - Something unexpected or unintended has happened, or failed to happen, that could have or did lead to patient harm for one or more person(s) receiving healthcare.' ? 'Incident' : "Good Care"}}</td>
                                        </tr>
                                        <tr>
                                            <td style="font-weight:bold;">Version</td>
                                            @foreach ($record->LfpseSubmissions as $s)
                                                <td>{{isset($s->version) ? $s->version : '6'}}</td>
                                            @endforeach
                                        </tr>
                                        <tr>
                                            <td style="font-weight:bold;">Outcome</td>
                                            @foreach ($record->LfpseSubmissions as $s)
                                                <td>{{$s->outcome_type_string}}</td>
                                            @endforeach
                                        </tr>
                                        @if($FormType == '1')
                                            <tr>
                                                <td style="font-weight:bold;">Psychological Harm</td>
                                                <td>
                                                    {{$data_objects->firstWhere('label', 'To what extent was the patient psychologically harmed in this incident?')['value']}}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="font-weight:bold;">Physical Harm</td>
                                                <td>
                                                    {{$data_objects->firstWhere('label', 'To what extent was the patient physically harmed (including pain) in this incident?')['value']}}
                                                </td>
                                            </tr>
                                        @endif
                                        <tr>
                                            <td style="font-weight:bold;">Remarks</td>
                                            @foreach ($record->LfpseSubmissions as $s)
                                                <td>{{$s->remarks}}</td>
                                            @endforeach
                                        </tr>
                                        <tr>
                                            <td style="font-weight:bold;">Date</td>
                                            @foreach ($record->LfpseSubmissions as $s)
                                                <td>{{$s->created_at->format('d M Y (D) h:i a')}}</td>
                                            @endforeach
                                        </tr>
                                    {{-- ==================================================================================================== --}}
                                        @foreach ($record->all_linked_records() as $lfpseRec)
                                        @if (isset($lfpseRec->LfpseSubmissions) && count($lfpseRec->LfpseSubmissions) > 0)
                                            <tr style="opacity: 0;" ><td class="border-0">fsaf</td></tr>
                                            <tr style="opacity: 0;" ><td class="border-0">fsaf</td></tr>
                                            <tr>
                                                <td style="font-weight:bold;white-space:nowrap">LFPSE ID</td>
                                                @foreach ($lfpseRec->LfpseSubmissions as $s)
                                                    <td>{{$s->reference_id}}</td>
                                                @endforeach
                                            </tr>
                                            {{-- <tr>
                                                <td style="font-weight:bold;">Actual ID</td>
                                                @foreach ($lfpseRec->LfpseSubmissions as $s)
                                                    <td>{{$s->lfpse_id}}</td>
                                                @endforeach
                                            </tr> --}}
                                            <tr>
                                                <td style="font-weight:bold;">Version</td>
                                                @foreach ($lfpseRec->LfpseSubmissions as $s)
                                                    <td>{{isset($s->version) ? $s->version : '6'}}</td>
                                                @endforeach
                                            </tr>
                                            <tr>
                                                <td style="font-weight:bold;">Outcome</td>
                                                @foreach ($lfpseRec->LfpseSubmissions as $s)
                                                    <td>{{$s->outcome_type_string}}</td>
                                                @endforeach
                                            </tr>
                                            @if (isset($data_objects->firstWhere('label', 'To what extent was the patient physically harmed (including pain) in this incident?')['value']))
                                                <tr>
        
                                                    <td style="font-weight:bold;">Psychological Harm</td>
                                                    <td>
                                                        {{$data_objects->firstWhere('label', 'To what extent was the patient physically harmed (including pain) in this incident?')['value']}}
                                                    </td>
                                                </tr>
                                                
                                            @endif
                                            @if (isset($data_objects->firstWhere('label', 'To what extent was the patient physically harmed (including pain) in this incident?')['value']))
                                                <tr>
                                                    <td style="font-weight:bold;">Physical Harm</td>
                                                    <td>
                                                        {{ $data_objects->firstWhere('label', 'To what extent was the patient physically harmed (including pain) in this incident?')['value']}}
                                                    </td>
                                                </tr>
                                                
                                            @endif
                                            <tr>
                                                <td style="font-weight:bold;">Remarks</td>
                                                @foreach ($lfpseRec->LfpseSubmissions as $s)
                                                    <td>{{$s->remarks}}</td>
                                                @endforeach
                                            </tr>
                                            <tr>
                                                <td style="font-weight:bold;">Date</td>
                                                @foreach ($lfpseRec->LfpseSubmissions as $s)
                                                    <td>{{$s->created_at->format('d M Y (D) h:i a')}}</td>
                                                @endforeach
                                            </tr>
                                            
                                        @endif
                                        @endforeach
        
                                    </tbody>
                                </table>
                                
                            @endif
                        </div>
                    @else
                        @if (isset($case) && $case->form_submitable == 0)
                            <div>Submission Status: <b class="text-warning">Not Submitted</b></div>
                            <a href="{{route('case_manager.submit_nhs_lfpse', $case->id)}}" class="btn btn-info" id="submit-now">Submit Now</a>
                        @else
                            <div>Submission Status: <b class="text-success">Submitted</b></div>
                        @endif
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap Modal -->
<div class="modal fade" id="ignoreReasonModal" tabindex="-1" aria-labelledby="ignoreReasonModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="ignoreReasonModalLabel">Provide Reason</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <textarea id="ignore-reason" class="form-control" placeholder="Type your reason here..." rows="4"></textarea>
          <div id="reason-error" class="text-danger mt-2" style="display: none;">Please enter a reason.</div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="button" id="confirm-ignore" class="btn btn-danger">Submit</button>
        </div>
      </div>
    </div>
  </div>
    
@endsection

<input type="hidden" value="{{route('location.document.uploadHashed')}}" id="route_document">
<input type="hidden" value="{{route('location.document.removedHashed')}}" id="route_document_removedHashed">

@section('scripts')
<script>
    $(document).ready(function() {
        let targetUrl = '';
    
        // When the modal is about to be shown
        $('#ignoreReasonModal').on('show.bs.modal', function(event) {
            const button = $(event.relatedTarget);
            targetUrl = button.data('url'); // get data-url attribute
        });
    
        // On Confirm button click
        $('#confirm-ignore').on('click', function() {
            const reason = $.trim($('#ignore-reason').val());
            const $reasonError = $('#reason-error');
    
            if (reason === '') {
                $reasonError.show();
                return;
            } else {
                $reasonError.hide();
            }
    
            // Encode the reason for URL
            const encodedReason = encodeURIComponent(reason);
    
            // Redirect
            window.location.href = targetUrl + (targetUrl.includes('?') ? '&' : '?') + 'reason=' + encodedReason;
        });
    });
    </script>
    
    <script>


        $('#view-update-btn').on('click', function() {
            $('#myTabContent').find('.active.show').removeClass('active show');
            $('#updates').addClass('active show');
            $('#myTab .nav-link.active').removeClass('active');
            $('#updates-tab').addClass('active');

        })

        $('#modify-btn').on('click', function() {
            $(this).fadeOut();
            $('#apply-btn').fadeIn();
            $('.in-wrapper').css('display', 'flex')
            $('.in-wrapper input').addClass('modify-input active').removeAttr('readonly')
            $('.in-wrapper input').eq(0).focus();

        })
        $('#apply-btn').on('click', function() {
            $('#modify-form').submit()
        });

        $(document).ready(function() {
            // loadActiveTab();
            // changeTabUrl('orgStructureClick');
            if (window.location.search.split('=')[1] != undefined) {
                // console.log(window.location.search.split('=')[1].split('&')[0]);
                changeTabUrl(window.location.search.split('=')[1])
            }
        });

        // function changeTabUrl(tabId, subTabId = null) {
        //     const currentURL = new URL(window.location.href);
        //     currentURL.searchParams.set('tab', tabId);
        //     console.log(tabId)
        //     // if(subTabId !== null){
        //     //     currentURL.searchParams.set('subTab',subTabId);
        //     // }
        //     window.history.replaceState({}, '', currentURL.href);
        //     // window.history.pushState({
        //     //     tabId: tabId
        //     // }, null, currentURL.href);

        //     // $('#' + tabId).tab('show');
        //     showTabPane(tabId);
        //     console.log($('#' + tabId))

        //     // if(subTabId !== null){
        //     //     $('#'+subTabId).tab('show');
        //     // }
        // }

        function updateQueryParameter(param, value) {
            // Get the current URL
            const url = new URL(window.location.href);

            // Set or update the query parameter
            url.searchParams.set(param, value);

            // Replace the current history entry with the new URL
            window.history.replaceState({}, '', url.href);
        }

        function loadActiveTab(tab = null) {
            if (tab == null) {
                tab = window.location.hash;
            }
            $('.main_header > li > a[data-bs-target="' + tab + '"]').tab('show');
        }

        function getTabPaneById(tabId) {
            var $tabPane = $('#' + tabId);
            if ($tabPane.hasClass('tab-pane')) {
                return $tabPane;
            } else {
                console.error('No tab-pane found with ID ' + tabId);
                return null;
            }
        }

        // Function to show a tab-pane by ID
        function showTabPane(tabId) {
            var $tabPane = getTabPaneById(tabId);
            if ($tabPane) {
                // Hide all tab panes
                $('.tab-pane').removeClass('show active').hide();

                // Show the specified tab pane
                $tabPane.addClass('show active').fadeIn();

                // Update the corresponding tab link
                var $tabLink = $('a[href="#' + tabId + '"]');
                $('.nav-link').removeClass('active');
                $tabLink.addClass('active');
            }
        }

        // Function to hide a tab-pane by ID
        function hideTabPane(tabId) {
            var $tabPane = getTabPaneById(tabId);
            if ($tabPane) {
                // Hide the specified tab pane
                $tabPane.removeClass('show active').hide();
            }
        }

        // Example usage
        var tabId = 'profile'; // Change this to your desired tab ID

        // Show the tab pane
        showTabPane(tabId);



        jQuery(document).on('change', '.commentMultipleFiles', function(e) {
            e = e.originalEvent;
            var files = e.target.files;
            var form = $(this).closest('form');
            uploadDocumentCaseManager(files, form);
        });
        function uploadDocumentCaseManager(files, form = false) {
            var url = document.getElementById('route_document').value;
            for (let i = 0; i < files.length; i++) {
                let number = Math.floor(Math.random() * 1000000);
                var formData = new FormData();
                formData.append("file", files.item(i));
                formData.append("_token", $('input[name=_token]').val());
                formData.append("type", 'case_manager');
                var progress = $([
                    "<li class='item_" + number + "'><span class='fa fa-file'></span>&nbsp; " + files.item(i).name +
                    "<a href='#' title='Delete File' class='remove_btn'> <span class='fa fa-times'></span></a>",
                    "    <div class='progress'>",
                    "        <div class='progress-bar progress-bar-striped active' role='progressbar'",
                    "            aria-valuenow='0' aria-valuemin='0' aria-valuemax='" + files.item(i).size + "'>",
                    "            <span class='sr-only'>0%</span>",
                    "        </div>",
                    "    </div>",
                    "</li>",
                ].join(""));

                var progress2 = $([
                    "<li class='item_" + number + "'><span class='fa fa-file'></span>&nbsp; " + files.item(i).name +
                    "<a href='#' title='Delete File' class='remove_btn'> <span class='fa fa-times'></span></a>",
                    "</li>",
                ].join(""));

                $.ajax({
                    url: url,
                    type: "POST",
                    data: formData,
                    processData: false,
                    cache: false,
                    contentType: false,
                    beforeSend: function() {
                        var percentage = 0;
                        if (form) {
                            $(form).find(".uploaded_files").append(progress);
                            $(form).find(".uploaded_files2").append(progress2);
                        } else {
                            $(".uploaded_files").append(progress);
                            $(".uploaded_files2").append(progress2);
                        }

                        $('.item_' + number + ' .progress .progress-bar').css("width", percentage + '%',
                            function() {
                                return $(this).attr("aria-valuenow", percentage) + "%";
                            });
                    },
                    xhr: function() {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener("progress", function(evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = (evt.loaded / evt.total) * 100;
                                $('.item_' + number + ' .progress .progress-bar').css("width",
                                    percentComplete + '%',
                                    function() {
                                        return $(this).attr("aria-valuenow", percentComplete) + "%";
                                    });
                            }
                        }, false);
                        xhr.addEventListener("progress", function(evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = (evt.loaded / evt.total) * 100;
                                $('.item_' + number + ' .progress .progress-bar').css("width",
                                    percentComplete + '%',
                                    function() {
                                        return $(this).attr("aria-valuenow", percentComplete) + "%";
                                    });
                            }
                        }, false);
                        return xhr;
                    },
                }).done(function(data) {
                    $('.item_' + number + ' .progress').remove();
                    try {
                        var input = "<input type='hidden' name='documents[]' class='file document' id='" + data.id +
                            "' value='" + data.id + "'>";
                        //$('.item_'+number).append(input);
                        $('.item_' + number + ":last").append(input);
                    } catch (e) {
                        console.log(e);
                    }

                });
            }
        }
        jQuery(document).on('click', '.remove_btn', function(e) {
            e.preventDefault();
            var route = $("#route_document_removedHashed").val();
            var val = $('.' + $(this).parent().attr('class'));
            var data = {
                'hashed': $('.' + $(this).parent().attr('class')).find("input[name='documents[]']").val(),
                '_token': "{{ csrf_token() }}"
            }
            $.post(route, data)
                .then(function(response) {
                    val.remove();
                })
                .catch(function(error) {
                    console.log(error);
                })


        });
        
    </script>
@if(Session::has('success'))
<script>
    alertify.defaults.notifier.delay = 10; // Set the delay to 10 seconds
    alertify.success("{{ Session::get('success') }}");
</script>
@endif

@if(Session::has('error'))
<script>
    alertify.defaults.notifier.delay = 10; // Set the delay to 10 seconds
    alertify.error("{{ Session::get('error') }}");
</script>
@endif


    
@endsection