@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;

        $reported_location = isset($record->recorded_case) ? $record->recorded_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>

            {{-- <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> -->

           

<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>




          

        </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($record->recorded_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  #{{$record->recorded_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->all_linked_records()->last()->id) != true && isset($record->recorded_case->id) && $record->recorded_case->status !== 'closed' && $record->canEdit())
                @if ( isset($location->organization_setting_assignment->organization_setting))

                <a href="/bespoke_form_v3/#!/edit/{{$record->all_linked_records()->last()->id}}?case_id={{$record->recorded_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->all_linked_records()->last()->id}}?case_id={{$record->recorded_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 ($record->raw_form) {
                                        $updated_records = $record->all_linked_records()->last();
                                            if (isset($updated_records->raw_form)) {
                                                $data_objects = $updated_records->get_form_data();
                                            } else {
                                                $data_objects = $record->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 = 0; $i < $data['total_options']; $i++)
                                                            <i class="fa-regular 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 = 0; $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
                                {{-- @php
                                    $jsonData = isset($record->json_submission) ? json_decode($record->json_submission,true) : null;
                                @endphp
                                @if ($jsonData)
                                    @foreach ($jsonData['mandatory_questions'] as $index => $data)
                                        @if ($data)
                                            <p style="margin: 0;" class="in-wrapper" >
                                                <span class="detail-title" style="width:15%;">
                                                    {{ $data['label'] }}:
                                                </span>
                                                <input type="text" name="{{$data['label']}}" value="{{ $data['value'] }}" style="width:85%;" class="modify-input" readonly>
                                            </p>
                                        @endif
                                    @endforeach
                                @else --}}
                                {{-- <p>No Valid Data found</p>
                                @endif --}}
                                {{-- @if ($record->recorded_case && count($record->recorded_case->root_cause_analysis) > 0)
                                    @foreach ($record->recorded_case->root_cause_analysis as $request)
                                        @if (!$request->status)
                                            <a style="width: fit-content;" target="_blank"
                                                href="{{ route('be_spoke_forms.be_spoke_form.root_cause_analysis_request', [$request->id, $request->type]) }}">{{ $request->root_cause_analysis_type }}</a>
                                        @endif
                                    @endforeach
                                    <button class="btn btn-info" style="align-self: flex-end; display:none;" id="apply-btn" type="submit">Apply Changes</button>
                                @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" 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>
    </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