@extends('layouts.head_office_app')
@section('title', 'Case '.$case->id)

@section('sub-header')
@include('head_office.case_manager.notes.sub-header')
@endsection

@section('content')
<link href="{{ asset('admin_assets/file_pond/filepond.min.css') }}" rel="stylesheet" />
<input type="hidden" id="feedback_contacts_route" value="{{route('case_manager.get_feedback_contacts',['case_id' => $case->id])}}">
<input type="hidden" id="all_users_route" value="{{route('case_manager.get_all_users',['case_id' => $case->id])}}">
<input type="hidden" id="eligible_users_route" value="{{route('case_manager.get_eligible_users',['case_id' => $case->id])}}">
<input type="hidden" id="linkable_cases_route" value="{{route('case_manager.get_linkable_cases',['case_id' => $case->id])}}">

@php 
if($case->stages->count())
    $per = 100/$case->stages->count();
else {
    $per = 0;
}
$case_reporter = $case->getReporter();
$all_locations = $case->link_case_with_form->getInvolvedLocations();
$feedbackTemplates = $case->link_case_with_form->form->feedback_templates;
$close_reasons = $case->link_case_with_form->form->close_case_templates;

$headOfficeUser = $case_reporter->getHeadOfficeUser(null, true) ?? null;
$is_reporter_available = isset($case_reporter) && (
    $headOfficeUser === null || $headOfficeUser->deleted_at === null
);

@endphp

<style>
    .min-height
    {
        min-height: {{$per}}%;
    }
    .fix-text{
    position: absolute;
    left: 50%;
    width: fit-content;
    top: 50%;
    font-weight: bold;
    white-space: nowrap;
    transform: translate(-50%, -50%) rotate(-90deg);
    color: black;
    }
    .text-success{
        color: rgb(0,205,69)!important;
    }
    .bg-success{
        background: rgb(0,205,69)!important;
    }
    #searchInput::placeholder{
        color: #D5D5D5 !important;
    }
    .show-dropdown {
        display: block !important;
    }
   
    /* .dropdown .dropdown-menu {
        left: -138px !important;
    } */
        #case-viewer-box {
            backdrop-filter: blur(12px);
            background: rgba(255, 255, 255, 0.8);
            border-radius: 12px;
            position: fixed;
            bottom: 50px;
            right: 50px;
            z-index: 9999;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease, opacity 0.3s ease;
            padding: 16px;
            width: 280px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .viewer-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        }
    
        #case-viewer-box:hover {
            transform: translateY(-3px);
        }
    
        .case-viewer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    
        .case-viewer-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
    
        .close-btn {
            font-size: 18px;
            color: #363636;
            background: none;
            border: none;
            cursor: pointer;
            transition: color 0.3s ease;
        }
    
        .close-btn:hover {
            color: #707070;
        }
    
        .viewers-list {
            max-height: 120px;
            overflow-y: auto;
            padding-right: 8px;
        }
    
        .viewer-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px;
            border-radius: 6px;
            transition: background 0.3s ease;
        }
    
        .viewer-item:hover {
            background: rgba(0, 0, 0, 0.05);
            cursor: pointer;
        }

        .viewers-list::-webkit-scrollbar {
            width: 6px;
        }
    
        .viewers-list::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
            border-radius: 6px;
        }
    
        .viewers-list::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 6px;
        }
    </style>
    <style>
        .select2-container--open {
            z-index: 9999999 !important;
        }
        textarea.form-control {
            border-radius: 6px;
            border: 1px solid #ccc;
            padding: 10px;
        }
        .custom-file-upload {
            border: 1px solid #e0e0e0;
            background-color: #fafafa;
            padding: 30px 20px;
            border-radius: 6px;
            cursor: pointer;
            color: #999;
            font-weight: 500;
            transition: all 0.3s ease;
        }
    
        .custom-file-upload:hover {
            background-color: #f1f1f1;
            border-color: #cfcfcf;
        }
        textarea[name="close_comment"]::placeholder {
            color: #686868 !important;
            font-size: 14px !important;
            opacity: 1 !important;
        }
        
        textarea[name="close_comment"] {
            color: #333;
        }

        .custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.custom-modal-dialog {
    position: relative;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
}

.custom-modal-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.custom-modal-header {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
}

.custom-modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.custom-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.custom-modal-close:hover {
    background-color: #e9ecef;
}

.custom-modal-body {
    padding: 1rem;
}

.custom-modal-footer {
    padding: 1rem;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
}

.validation-error {
    /* No border styling - just for reference */
}

.validation-error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
    font-weight: 500;
}

.validation-error-modal {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}
    </style>
<!-- <div id="content">
    
    @include('layouts.error')


        
        
    </div> -->


    <div class="modal fade" id="archiveModal" tabindex="-1" role="dialog" aria-labelledby="archiveModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
           <form method="get" action="{{ route('case_manager.archive_case', ['id' => $case->id]) }}">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title" id="archiveModalLabel">Archive Cases</h5>
                <button type="button" class="btn-close" style="position:absolute; top:4px; right:4px;"
                data-bs-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
              </div>
              <div class="modal-body">
                  <label style="margin: 0;font-size: 12px;" for="password">Password</label>
                  <input type="password" id="password" name="password" placeholder="Password"
                      class="form-control" style="height:50px" required>
                  <label style="margin: 0;font-size: 12px;" for="reason">Reason</label>
                  <input spellcheck="true" type="text" id="reason" name="reason" placeholder="Reason"
                      class="form-control" style="height:50px" required>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button class="btn primary-btn" >Archive</button>
              </div>
           </form>
          </div>
        </div>
    </div>

    <div class="modal fade" id="unarchiveModal" tabindex="-1" role="dialog" aria-labelledby="archiveModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <form method="get" action="{{ route('case_manager.archive_case', ['id' => $case->id]) }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="archiveModalLabel">UnArchive Cases</h5>
                    <button type="button" class="btn-close" style="position:absolute; top:4px; right:4px;" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <label style="margin: 0;font-size: 12px;" for="password">Password</label>
                    <input type="password" id="password" name="password" placeholder="Password" class="form-control" style="height:50px" required>
                    <label style="margin: 0;font-size: 12px;" for="reason">Reason</label>
                    <input spellcheck="true" type="text" id="reason" name="reason" placeholder="Reason" class="form-control" style="height:50px" required>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button class="btn primary-btn" >Unarchive</button>
                </div>
            </form>
            
          </div>
        </div>
    </div>
    @if ($viewerCount > 0)
    <div id="case-viewer-box">
        <div class="case-viewer-header">
            <span class="case-viewer-title">Users Viewing This Case</span>
            <button class="close-btn" onclick="document.getElementById('case-viewer-box').style.display='none'">&times;</button>
        </div>
        <div class="viewers-list">
            @livewire('case-view-tracker', ['caseId' => $case->id, 'userId' => Auth::user()->id])
        </div>
    </div>
    @endif

<div class="d-flex justify-content-between gap-4 w-100">
    <div class="comments" style="width: 55%">
            <div class="card card-qi">
                @if($case->status == "closed")
                <div style="text-align: center; margin: 20px 0;">
                    <p style="display: inline-block; 
                            color: #000;
                            font-size: 24px; 
                            padding: 15px 20px;
                            text-align: center; 
                            border-radius: 8px; 
                            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
                            transition: transform 0.2s;">
                        This case is completed
                    </p>
                </div>
                @endif
                <div class="card-body pt-0">
                    <!-- <nav class="nav-h-bordered">
                        @if ($case->isArchived == true)
                            <span class="badge" style="background-color:blue;">Archived</span>
                        @endif
                        @if($case->status == "closed")
                        {{-- <a href="#" class="active"><span class="item_with_border">Case Closed</span></a> --}}
                        {{-- @elseif($case->status == "waiting")
                        <a href="#" class="active"><span class="item_with_border">Waiting for final clouser
                                approval</span></a> --}}
                        @php
                        $check = false;
                        $interested_party =
                        $case->case_interested_parties()->where('tag','final_clouser_approval')->first();
                        if($interested_party && ($interested_party->case_head_office_user->user->id ==
                        Auth::guard('web')->user()->id))
                        $check = true;
                        @endphp
                        @if($check)
                        <div class="btn-group right">
                            <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#accept_case_approval_request"
                                class="btn btn-info" style="color: #fff !important">Accept</a>
                            <a href="javascript:void(0);" class="btn btn-danger" data-bs-toggle="modal"
                                data-bs-target="#reject_case_approval_request" style="color: #fff !important">Reject</a>
                        </div>
                        @endif
                        @endif
                    </nav> -->
                    <div class="d-flex align-items-center justify-content-between gap-2 mt-3">
                        <form method="get" class="form print-display-none w-100 inline-block">
                            <div class="input-group form-group mt-0">
                                <input spellcheck="true" id="searchInput" type="text" class="form-control mt-0 search-nearmiss shadow-none" name="search"
                                    @if(request()->query('search')) value="{{request()->query('search')}}" @endif placeholder="Search..">
                                {{-- <button type="submit" class="btn btn-info search_button mb-0"><i class="fa fa-search"></i></button> --}}
                            </div>
                        </form>
        
                        <div class="dropdown">
                            <button class="dropdown-toggle inline-block primary-btn" type="button" id="dropdownMenuButton"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Actions
                            </button>
                            <div class="dropdown-menu animated--fade-in" aria-labelledby="dropdownMenuButton">
                                <h6 class="dropdown-header">Case Status</h6>
                                @foreach ($statuses as $status)
                                @if (($status->status == 'In Progress' || $status->form_id == $case->link_case_with_form->form->id) && $status->is_active == true)
                                    <a href="#" class="dropdown-item" 
                                       data-bs-toggle="modal" 
                                       data-bs-target="#update_status_modal"
                                       data-status-id="{{ $status->id }}"
                                       data-status-name="{{ $status->status }}"
                                       title="{{ $status->status }}">
                                        {{ $status->status }}
                                    </a>
                                @endif      
                              
                                @endforeach    
                                @if(
    ($case->getCanShareCaseResponsibilityAttribute() && $case->status == 'open') || 
    $case->bypassCaseHandler()
)
    @if(
        $case->status != 'closed' && 
        (
            (!$case->isArchived && $case->getCanShareCaseResponsibilityAttribute()) || 
            $case->bypassCaseHandler()
        )
    )
        <a href="#" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#close_case_comment"
            @if($case->case_closed) style="display:none" @endif 
            onclick="resetFeedback('complete')" title="Complete Case">
            Complete Case
        </a>
    @else
        <a href="#" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#open_case_model"
            @if($case->case_closed) style="display:none" @endif 
            onclick="resetFrom()" title="Reopen">
            Reopen
        </a>
    @endif
@endif

                                @if ($case->getCanShareCaseResponsibilityAttribute() || $case->bypassCaseHandler())
                                    @if ($case->isArchived == false)
                                        <a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#archiveModal" href="#">Archive Case</a>
                                    @else
                                        <a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#unarchiveModal">Unarchive Case</a>
                                    @endif
                                @endif
                                
                                @if($case->getCanShareCaseResponsibilityAttribute() && $case->status == 'open' || $case->bypassCaseHandler())
                                    <div class="dropdown-divider"></div>
                                    <h6 class="dropdown-header">Case Handler</h6>
                                    <a href="#" data-bs-toggle="modal" data-bs-target="#add_interested_parties" class="dropdown-item">
                                        Add Case Investigator
                                    </a>
                                    <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#share_case_responsibility_id"
                                        class="dropdown-item">
                                        Share Case Responsibility
                                    </a>
                                    <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#transfer_case_responsibility"
                                        class="dropdown-item">
                                        Transfer Case Responsibility
                                    </a>
                                    <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#remove_case_handler_any"
                                        class="dropdown-item">
                                        Remove Case Investigator
                                    </a>
                                @endif
                                @if($case->getCanShareCaseResponsibilityAttribute() || $case->bypassCaseHandler())
                                    <a href="{{route('case_manager.make_me_case_handler',['case_id' => $case->id,'co_handler' => false])}}"
                                        class="dropdown-item">
                                        Make me sole case handler
                                    </a>
                                    <a href="{{route('case_manager.make_me_case_handler',['case_id' => $case->id,'co_handler' => true])}}"
                                        class="dropdown-item">
                                        Make me co-case handler
                                    </a>
                                @endif
                                
                                @if($case->status != 'closed' && $case->isArchived == false)
                                    <div class="dropdown-divider"></div>
                                    <h6 class="dropdown-header">Features</h6>
                                    @if ($case->link_case_with_form->form->is_allow_case_handler_feedback == true)
                                        <a href="#" id="send_feedback_btn" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#close_case_comment"
                                            onclick="resetFeedback('feedback')" title="Provide feedback on this case to the site involved or reporter.">
                                            Send Feedback
                                        </a>
                                    @endif
                                    @if ($case->getCanShareCaseResponsibilityAttribute() || $case->bypassCaseHandler())
                                        <a href="{{route('head_office.share_case.share_case_view',$case->id)}}" class="dropdown-item"
                                            title="Securely share the form with external people" data-bs-toggle="tooltip" data-placement="top">
                                            Share Case <img class="mb-1" src="{{asset('images/lock-01.svg')}}" alt="lock-01" width="18">
                                        </a>
                                    @endif
                                    <a href="{{route('head_office.create_task',$case->id)}}" class="dropdown-item" data-bs-toggle="tooltip"
                                        data-placement="top">
                                        Create a Task
                                    </a>
                                    <a class="dropdown-item" href="{{route('case_manager.request_information',$case->id)}}"
                                        title="Request sensitive information securely from people" data-bs-toggle="tooltip" data-placement="left">
                                        Request Information <img class="mb-1" src="{{asset('images/lock-01.svg')}}" alt="lock-01" width="18">
                                    </a>
                                    <a class="dropdown-item disabled" href="#">
                                        Request Root Cause Analysis <span class="badge bg-secondary ms-1">Coming Soon</span>
                                    </a>
                                @endif
                                @if ($case->getCanShareCaseResponsibilityAttribute() || $case->bypassCaseHandler())
                                    <a href="{{route('case_manager.download_comments',$case->id)}}" class="dropdown-item"
                                        title="Download Comments" data-bs-toggle="tooltip" data-placement="top">
                                        Download Comments
                                    </a>
                                @endif
                                
                                @if ($case->requires_final_approval && $case->status == 'waiting' && ($case->getCanShareCaseResponsibilityAttribute() || $case->bypassCaseHandler()))
                                    <div class="dropdown-divider"></div>
                                    <h6 class="dropdown-header">Approval</h6>
                                    @php
                                    $formId = optional(optional($case->link_case_with_form)->form)->id;
                                    $reviewSetting = optional($headOfficeUser->user_review_settings)
                                    ->where('be_spoke_form_id', $formId)
                                    ->where('is_active', true)
                                    ->first();
                                    @endphp
                                    
                                    @if ($reviewSetting)
                                        <a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#accept_case_approval_request" href="#">
                                            Approve Closure
                                        </a>
                                        <a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#reject_case_approval_request" href="#">
                                            Reject Closure
                                        </a>
                                    @endif
                                @endif
                            </div>
                        </div>                        
                    </div>
                  <script>
                    $(document).ready(function () {
                        $(".dropdown-toggle").click(function (event) {
                            event.preventDefault(); 
                            event.stopPropagation();
                            
                            let dropdownMenu = $(this).next(".dropdown-menu");
                            
                            if (dropdownMenu.hasClass("show-dropdown")) {
                                dropdownMenu.removeClass("show-dropdown");
                            } else {
                                $(".dropdown-menu").removeClass("show-dropdown"); 
                                dropdownMenu.addClass("show-dropdown");
                            }
                        });

                        $(document).click(function () {
                            $(".dropdown-menu").removeClass("show-dropdown");
                        });

                        $(".dropdown-menu").click(function (event) {
                            event.stopPropagation();
                        });
                    });

                  </script>
                  <!-- Modal for Status Update -->
<div class="modal fade" id="update_status_modal" tabindex="-1" aria-labelledby="updateStatusModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateStatusModalLabel">Update Case Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('cases.update.status') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="case_id" value="{{ $case->id }}">
                    <input type="hidden" name="status_id" id="status_id">
                    <p>Are you sure you want to change the status to <span id="status_name_display"></span>?</p>
                    <div class="form-group">
                        <label for="status_comment">Comment (Optional)</label>
                        <textarea class="form-control" id="status_comment" name="comment" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update Status</button>
                </div>
            </form>
        </div>
    </div>
</div>
                    @include('head_office.case_manager.notes.add_interested_party',['interested_party' =>null ,'case' =>
                    $case])

                    <div class="cm_comments_wrapper relative scrollbar_custom_green">
                        @if(!count($comments))
                        <p class="font-italic" style="height: 70%;">No comments are found!</p>
                        @else
                        <div id="contextMenu" class="context-menu" style="display: none">
                            <ul class="menu_comment_link">
                                <li class="share"><a href="#" onclick="copy_to_clipboard(this)" id="t_link_item"
                                        data-bs-link=""><i class="fa fa-copy" aria-hidden="true"></i> Copy Tracking Link</a>
                                </li>
                                <li class="share"><a href="#" onclick="copy_to_clipboard(this)" id="o_link_item"
                                        data-bs-link=""><i class="fa fa-copy" aria-hidden="true"></i> Copy Original Link</a>
                                </li>
                            </ul>
                        </div>
                        @endif
                        @foreach($comments as $key=> $comment)
                        @include('head_office.case_manager.notes.view_comments',compact('comment'))
                        @endforeach
                        <div class="cm_new_comment ">
                            <!-- <p>Add New Comment</p> -->
                            @if($case->isArchived == 0)
                            @include('head_office.case_manager.notes.form_comment',['comment'=>null,'parent'=>null,'remove_backdrop'=>true])
                            @endif
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="" style="width: 45%;">
            @include('head_office.case_manager.notes.view_notes_column_3',['case' => $case])
        </div>
    </div>
</div>
<div class="modal fade" id="open_case_model" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h4 class="modal-title text-info w-100">
                    Re Open Case
                </h4>
                <button type="button" class="btn-close float-right" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"></span>
                </button>
            </div>
            <div class="modal-body">
                <form method="post"
                    action="{{ route('case_manager.open_case', ['case_id' => $case->id]) }}" id="open_case_form" enctype="multipart/form-data">
                    <div class="new_link_wrapper">
                        @csrf
                        @method('POST')
                        <span class="h5 inline-block links relative my-2">Please provide reason to re open case</span>
                        <textarea spellcheck="true" required rows="3" class="cm_comment_box case-close-textarea-border spellcheck"
                            name="note" placeholder="Type reason here"></textarea>
                        <br />
                        <!-- You can still include this hidden field if needed for JavaScript purposes -->
                        <input type="hidden" name="case_id" id="case_id_input" value="{{ $case->id }}">
                    </div>
                    <br>
                    <button type="submit" class="btn btn-info btn-submit inline-block mb-0">
                        <i class="fa fa-location-arrow"></i> Submit
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@if($case->can_share_case_responsibility || $case->bypassCaseHandler())
    <form method="post" action="{{route('case_manager.share_case_responsibity',[$case->id]) }}" class="cm_task_form">
        @csrf
        <div class="modal fade file_upload_model" id="share_case_responsibility_id" tabindex="-1"
            role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header text-center">
                        <h4 class="modal-title text-info w-100">
                            <p class="text">Share Case Responsibility</p>
                        </h4>
                        <button type="button" class="btn-close float-right" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div class="d-flex justify-content-start mb-2" style="margin-left:25px;">
    <div class="input-group w-25">
        <span class="input-group-text">
            <i class="fas fa-search"></i>
        </span>
        <input type="text" id="userSearchInputShare" class="form-control" placeholder="Search user...">
    </div>
</div>

                    <div class="modal-body">
                        <div>
                            <div id="users-table-container">
                                <p class="text-center">Loading users...</p>
                                                    </div>        
                        </div>

                        <div class="text-center mt-3">
                          <button type="button" class="toggleUsersBtn"
    style="background-color: transparent; color: rgb(37, 150, 190); border: none; padding: 0; text-decoration: none; cursor: pointer; font-size: 14px;">
    Show All Users
</button>

                        </div>
                        

                    <div class="form-group mt-3">
                        <label for="note">Add note to case</label>
                        <textarea spellcheck="true" name="note" class="form-control spellcheck"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="btn-group">
                        <button type="button" class="btn btn-outline-secondary"
                            onclick="this.form.reset();" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-info">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const setupUserFilter = (searchInputId, tableSelector, toggleBtnSelector) => {
        const searchInput = document.getElementById(searchInputId);
        const rows = document.querySelectorAll(`${tableSelector} tr`);
        const toggleBtn = document.querySelector(toggleBtnSelector);
        let showingAll = false;

        if (searchInput) {
            searchInput.addEventListener("keyup", function () {
                const filter = searchInput.value.toLowerCase().trim();
                const filterWords = filter.split(/\s+/);

                rows.forEach(row => {
                    const nameCell = row.querySelector(".email");
                    const nameText = nameCell ? nameCell.textContent.toLowerCase() : '';
                    const matches = filterWords.every(word => nameText.includes(word));
                    row.style.display = matches ? "" : "none";
                });
            });
        }

        if (toggleBtn) {
            toggleBtn.addEventListener("click", function () {
                showingAll = !showingAll;

                document.querySelectorAll(`${tableSelector} .eligible-hidden`).forEach(row => {
                    row.style.display = showingAll ? "" : "none";
                });

                toggleBtn.textContent = showingAll ? "Show Less" : "Show All Users";
            });
        }
    };

    // Call setup for both modals
    setupUserFilter("userSearchInputShare", "#share_case_responsibility_id .all_locations", "#share_case_responsibility_id .toggleUsersBtn");
    setupUserFilter("userSearchInput", "#transfer_case_responsibility .all_locations", "#transfer_case_responsibility .toggleUsersBtn");
});
</script>



               <div class="modal fade file_upload_model" id="transfer_case_responsibility" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <form method="post"
                action="{{ route('case_manager.transfer_case_responsibity', [$case->id, optional($case->can_share_case_responsibility)->id]) }}"
                class="cm_task_form">
                @csrf
                <div class="modal-header text-center">
                    <h4 class="modal-title text-info w-100">
                        <p class="text-success"></p>Transfer Case Responsibility
                    </h4>
                    <button type="button" class="btn-close float-right" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
    <div class="d-flex justify-content-start mb-2" style="margin-left:25px;">
                    <div class="input-group w-25">
                        <span class="input-group-text">
                            <i class="fas fa-search"></i>
                        </span>
                        <input type="text" id="userSearchInput" class="form-control" placeholder="Search user...">
                    </div>
                </div>
                <div class="modal-body">
                    <div id="users-table-container-2">
                        <p class="text-center">Loading users...</p>
                                                    </div>

                    <div class="text-center mt-3">
                        <button type="button" class="toggleUsersBtn"
                            style="background-color: transparent; color: rgb(37, 150, 190); border: none; padding: 0; text-decoration: none; cursor: pointer; font-size: 14px;">
                            Show All Users
                        </button>
                    </div>

                    {{-- <div class="form-group mt-3">
                        <label for="new_handler_id">Select Case Handler to Transfer To</label>
                        <select name="new_handler_id" class="form-control" required>
                            <option value="">-- Select New Case Handler --</option>
                            @foreach($availableUsers as $u)
                                <option value="{{ $u->user->id }}">
                                    {{ $u->user->first_name }} {{ $u->user->surname }}
                                    @if($u->user->position)
                                        &#10;{{ $u->user->position->name }}
                                    @endif
                                </option>
                            @endforeach
                        </select>
                    </div> --}}

                    <div class="form-group mt-3">
                        <label for="note">Add note to case</label>
                        <textarea spellcheck="true" name="note" class="form-control spellcheck"></textarea>
                    </div>
                </div>

                <div class="modal-footer">
                    <div class="btn-group ms-auto">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-info">Save</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.getElementById('selectAllHandlers').addEventListener('change', function () {
        let checkboxes = document.querySelectorAll('input[name="caseHandalers[]"]');
        checkboxes.forEach(cb => cb.checked = this.checked);
    });
</script>


<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<!-- JavaScript -->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const searchInput = document.getElementById("userSearchInput");

        searchInput.addEventListener("keyup", function () {
            const filter = searchInput.value.toLowerCase().trim();
            const filterWords = filter.split(/\s+/);
            const rows = document.querySelectorAll("#transfer_case_responsibility .all_locations tr");

            rows.forEach(row => {
                const nameCell = row.querySelector(".email");
                const nameText = nameCell ? nameCell.textContent.toLowerCase() : '';
                
                const matches = filterWords.every(word => nameText.includes(word));
                row.style.display = matches ? "" : "none";
            });
        });

        const searchInputShare = document.getElementById("userSearchInputShare");

        searchInputShare.addEventListener("keyup", function () {
            const filter = searchInputShare.value.toLowerCase().trim();
            const filterWords = filter.split(/\s+/);
            const rows = document.querySelectorAll("#share_case_responsibility_id .all_locations tr");

            rows.forEach(row => {
                const nameCell = row.querySelector(".email");
                const nameText = nameCell ? nameCell.textContent.toLowerCase() : '';
                
                const matches = filterWords.every(word => nameText.includes(word));
                row.style.display = matches ? "" : "none";
            });
        });


    });
</script>

@endif
   <form method="POST" action="{{ route('case_manager.remove_case_handler', [$case->id]) }}" class="cm_task_form">
    @csrf
    <div class="modal fade file_upload_model" id="remove_case_handler" tabindex="-1"
        role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h4 class="modal-title text-info w-100">
                        Remove Case Handler
                    </h4>
                    <button type="button" class="btn-close float-right" data-bs-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true"></span>
                    </button>
                </div>
                <div class="modal-body">
                    <div>
                        <table  class="table new-table table-responsive table-bordered mx-auto dataTable w-100 new-table" >
                            <thead class="text-center">
                                <tr>
                                    <th class="text-center">Case Handlers</th>
                                    <th class="text-center">Case Type</th>
                                </tr>
                            </thead>
                            <tbody class="all_locations text-center" id="eligible-users-tbody">
                                <tr>
                                    <td colspan="2" class="text-center">Loading eligible users...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="">
                        <label>Case Handler</label>
                        <input  disabled type="text"  style="width: 100%"
                            class="form-control selected_case_handler" required />
                        <input hidden  type="text" name="case_handler_id" style="width: 100%"
                            class="form-control selected_case_handler_id" required />
                    </div>

                    <div class="d-flex align-items-center gap-1 mt-2">
                        <label for="transfer_eligible_users_only">Show all user</label>
                        <input type="checkbox" class="transfer_eligible_users_only"  name="transfer_eligible_users_only"  id="">
                    </div>

                    <div class="mt-3">
                        <label for="other_head_office_user_id" class="form-label">Other Case Handler</label>
                        <select name="other_head_office_user_id" id="other_head_office_user_id" class="form-control" required>
                            <option value="" disabled selected>Select Case Handler</option>
                            @foreach($availableUsers as $u)
                                <option value="{{ $u->user->id }}">
                                    {{ $u->user->first_name }} {{ $u->user->surname }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mt-2">
                        <label for="note">Note (Optional)</label>
                        <textarea spellcheck="true"  spellcheck="true" name="note"  class="form-control spellcheck"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="btn-group">
                        <button type="button" class="btn btn-outline-secondary"
                            onclick="this.form.reset();" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-info">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
@php
   $case_user_ids = $allCaseHandlers
    ->where('is_hidden', false)
    ->pluck('case_head_office_user.user.id')
    ->all();

$case_user_ids_json = json_encode($case_user_ids);

@endphp
<input type="hidden" id="case_handlers_user_ids" data-ids="{{ $case_user_ids_json }}">
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const searchInput = document.getElementById('removeUserSearchInput');
        const rows = document.querySelectorAll('tbody.all_locations tr');

        searchInput.addEventListener('input', function () {
            const query = this.value.toLowerCase();

            rows.forEach(row => {
                const text = row.querySelector('.email')?.textContent?.toLowerCase() || '';
                row.style.display = text.includes(query) ? '' : 'none';
            });
        });
    });
</script>

<form method="post"
    action="{{ route('case_manager.remove_any_case_handler', [$case->id]) }}"
    class="cm_task_form">
    @csrf
    <input type="hidden" hidden name="users"  id="users_to_remove"/>
    <div class="modal fade file_upload_model" id="remove_case_handler_any" tabindex="-1"
        role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h4 class="modal-title text-info w-100">
                        Remove Any User
                    </h4>

                    <button type="button" class="btn-close float-right" data-bs-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true"></span>
                    </button>
                </div>
                                    <div class="d-flex justify-content-start mb-2" style="margin-left:25px; margin-top: 10px;">
    <div class="input-group w-25">
        <span class="input-group-text">
            <i class="fas fa-search"></i>
        </span>
        <input type="text" id="removeUserSearchInput" class="form-control" placeholder="Search case investigators...">
    </div>
</div>
                <div class="modal-body">
                    <div>
                        <table  class="table new-table table-responsive table-bordered mx-auto dataTable w-100 new-table" >
                            <thead class="text-center">
                                <tr>
                                    <th class="text-center">Case Investigators</th>
                                    <th class="text-center">Case Type</th>
                                </tr>
                            </thead>
                        <tbody class="all_locations text-start" id="eligible-users-tbody-2">
        <tr>
            <td colspan="2" class="text-center">Loading eligible users...</td>
        </tr>
    </tbody>
                        </table>
                    </div>
                    <div class="mt-2" id="other_case_handler" style="display: none;">
                        <label>Users</label>
                        <select type="text" name="other_head_office_user_id" style="width: 100%"
                            class="form-control transfer_head_office_user_id shadow-none" required>
                            <option value="0" selected>Select Case Handler</option>
                            @foreach($availableUsers as $u)
                                <option value="{{ $u->user->id }}">
                                    {{ $u->user->first_name }} {{ $u->user->surname }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mt-2">
                        <label for="note">Note (Optional)</label>
                        <textarea spellcheck="true"  spellcheck="true" name="note"  class="form-control spellcheck"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="btn-group ">
                        <button type="button" class="btn btn-outline-secondary"
                            onclick="this.form.reset();" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-info">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

@if(session('error_owner'))
<div class="modal fade " id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="staticBackdropLabel">Remove Owner</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            Do you want to remove yourself as a case handler?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <a  href="{{route('case_manager.remove_owner',['case_id'=>$case->id,'_token'=>csrf_token()])}}" class="btn btn-primary">Confirm</a>
        </div>
      </div>
    </div>
  </div>
  <script>
    $(document).ready(function(){
        $('#staticBackdrop').modal('show');
    })
  </script>
@endif
</div>
<div class="modal fade" id="close_case_comment" tabindex="-1" @if(isset($remove_backdrop)) data-bs-backdrop="false" @endif
    role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" id="close_case_modal" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h4 class="modal-title text-info w-100" id="modal_case_heading">
                    Complete Case
                </h4>
                <button type="button" class="btn-close float-right" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"></span>
                </button>
            </div>
            <div class="modal-body">
                <form id="close_case_form" method="post" @if($case->requires_final_approval && $case->status == 'waiting')
                    action="{{route('case_manager.view.close_case',[$case->id,0])}}"
                    @elseif($case->requires_final_approval && $case->status == 'open')
                    action="{{route('case_manager.view.close_case',[$case->id,1])}}" @else
                    action="{{route('case_manager.view.close_case',[$case->id,0])}}" @endif id="reset_form">
                    <div class="new_link_wrapper">
                        @csrf
                        <input type="hidden" name="feedback_mode" id="feedback_mode_input" value="0">
                        <input type="hidden" name="feedback_only" id="is_feedback_only" value="0">

                        <div id="main_close_comment">
                            <p style="color: #249b91;font-size:14px;" class=" my-2">Reason for closing the case</p>
                            <!-- Template dropdown -->
                                <div class="w-100 d-flex flex-column mb-2">
                                    <label class="mt-2">Select close case reasons</label>
                                    <select class="form-control template-select select2 mb-2 w-100"
                                            data-target-textarea="#close_case_textarea"
                                            data-target-filepond="#file-upload"
                                            multiple>
                                        @foreach($close_reasons as $tpl)
                                            <option value="{{ $tpl->id }}" data-text="{!! htmlspecialchars($tpl->text, ENT_QUOTES) !!}" data-files='@json($tpl->docs()->pluck('file_path'))'>
                                                {{ $tpl->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <textarea rows="3" name="close_comment" id="close_case_textarea" class="form-control tinymce" placeholder="Optional"></textarea>
                                @if($case->status == 'open' && $case->requires_final_approval)
                                <span>
                                    Once closed, the case will be moved for final closure approval
                                </span>
                                @endif
                                {{-- <div class="uploaded_files mt-2 mb-2"></div> --}}
                                <div class="my-2" >
                                    {{-- <label for="file-upload" class="custom-file-upload w-100 text-center">
                                        Drag and drop file here, or click to select file
                                    </label> --}}
                                    <input type="file" name="file[]" multiple value="" id="file-upload" multiple class="form-control file-pond">
                                </div>
                        </div>
                        @if (isset($case_reporter->id) && $case_reporter->email != 'external@qitech.com' || isset($case->location->id) && $case->location->email != 'external@qitech.com')
                        <h4 class="text-info h5 my-2 mt-3">Provide Feedback</h4>
                        @endif
                        @if(isset($case_reporter->id) && $case_reporter->email != 'external@qitech.com')
                        <div>
                            <input type="checkbox" id="send_feedback_to_reporter_user_input" name="send_feedback_to_reporter_user" onchange="show_reporter_user(this)">
                            <label for="send_feedback_to_reporter_user_input" class="fw-semibold m-0">To the Reporter</label>
                            <div style="display: none;" class="mb-2" id="send_feedback_to_reporter_user">
                                <select type="text" readonly class="form-select" id="user_feedback_input" data-is-reporter-available="{{ $is_reporter_available ? 'true' : 'false' }}">
                                    @if ($is_reporter_available)
                                    <option value="{{ $case_reporter->id ?? 0 }}">{{ $case_reporter->first_name . ' ' . $case_reporter->surname . ' (' . $case_reporter->email . ')' }}</option>
                                    @else
                                    <option disabled>Reporter not available anymore</option>
                                    @endif
                                </select>

                                <!-- Template dropdown -->
                                <div class="w-100 d-flex flex-column mb-2">
                                    <label class="mt-2">Select Feedback Templates</label>
                                    <select class="form-control template-select select2 mb-2 w-100"
                                            data-target-textarea="#textarea_reporter"
                                            data-target-filepond="#pond_reporter"
                                            multiple>
                                        @foreach($feedbackTemplates as $tpl)
                                            <option value="{{ $tpl->id }}" data-text="{!! htmlspecialchars($tpl->text, ENT_QUOTES) !!}" data-files='@json($tpl->docs()->pluck('file_path'))'>
                                                {{ $tpl->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- Textarea + FilePond -->
                                <textarea name="feedback_user" id="textarea_reporter" class="form-control tinymce"></textarea>
                                <input type="file" class="file-pond mt-2" id="pond_reporter" name="files_reporter[]" multiple>
                            </div>
                        </div>
                        @endif

                        @if(isset($case->location->id) && $case->location->email != 'external@qitech.com' && (!isset($case->link_case_with_form) || !$case->link_case_with_form->hide))
                        <div>
                            <input type="checkbox" id="send_feedback_to_reporter_input" name="send_feedback_to_reporter" onchange="show_reporter(this)">
                            <label for="send_feedback_to_reporter_input" class="fw-semibold m-0">Site</label>
                            <div style="display: none;" id="send_feedback_to_reporter">
                                <div class="d-flex flex-column w-100">
                                    <select id="location_ids" name='location_feedback_ids[]' class="form-control select2 mb-2 w-100" multiple>
                                        @foreach ($all_locations as $inv_loc )
                                        <option value="{{$inv_loc->id}}" selected>{{$inv_loc->trading_name}} @if ($inv_loc->id == $case->link_case_with_form->reported_location_id) ● Reported Site @endif </option>
                                        @endforeach
                                        <option value="other">Other Site</option>
                                    </select>
                                </div>

                                <div id="other_site_field" style="display: none;">
                                    <p style="font-size: 12px;" class="text-muted mb-0">Please select a Groups/Sites.</p>
                                    <div class="treeselect"></div>
                                    <input type="hidden" name="selected_other_sites" id="selectedValuesLocations">
                                </div>

                                <!-- Template dropdown -->
                                <div class="w-100 d-flex flex-column mb-2">
                                    <label class="mt-2">Select Feedback Templates</label>
                                    <select class="form-control template-select select2 mb-2 w-100"
                                            data-target-textarea="#textarea_site"
                                            data-target-filepond="#pond_site"
                                            multiple>
                                        @foreach($feedbackTemplates as $tpl)
                                            <option value="{{ $tpl->id }}" data-text="{!! htmlspecialchars($tpl->text, ENT_QUOTES) !!}" data-files='@json($tpl->doc_ids)'>
                                                {{ $tpl->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- Textarea + FilePond -->
                                <textarea name="feedback" id="textarea_site" class="form-control tinymce"></textarea>
                                <input type="file" class="file-pond mt-2" id="pond_site" name="files_site[]" multiple>
                            </div>
                        </div>
                        @endif




                         <!-- Feedback to other -->
                        <div>
                            <input type="checkbox" id="send_feedback_to_contact_input" name="send_feedback_to_contact" onchange="show_contact(this)">
                            <label class="form-check-label fw-semibold" for="send_feedback_to_contact_input">Other user</label>
                            <div style="display: none;" id="send_feedback_to_contact">
                                <select id="contact_ids" name="contact_feedback_ids[]" class="form-control select2 mb-2" multiple data-case-id="{{ $case->id }}">
                                    <option value="">Loading users...</option>
                                </select>

                                <!-- Template dropdown -->
                                <div class="w-100 d-flex flex-column mb-2">
                                    <label class="mt-2">Select Feedback Templates</label>
                                    <select class="form-control template-select select2 mb-2"
                                            data-target-textarea="#textarea_other"
                                            data-target-filepond="#pond_other"
                                            multiple>
                                        @foreach($feedbackTemplates as $tpl)
                                            <option value="{{ $tpl->id }}" data-text="{!! htmlspecialchars($tpl->text, ENT_QUOTES) !!}" data-files='@json($tpl->docs()->pluck('file_path'))'>
                                                {{ $tpl->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- Textarea + FilePond -->
                                <textarea name="contact_feedback" class="form-control tinymce" id="textarea_other"></textarea>
                                <input type="file" class="file-pond mt-2" id="pond_other" name="files_other[]" multiple>
                            </div>
                        </div>

                            
                        
                    </div>
                    <br>
                    <div class="from-group">

                    </div>
                    @php
                        $statuses = $case->new_tasks->pluck('status')->map(fn($s) => strtolower(str_replace('_', ' ', trim($s))));
                        $inProgressExists = $statuses->contains('in progress');
                        $toDoExists = $statuses->contains('to do');
                        $inProgressOrTodoExists = $inProgressExists || $toDoExists;
                    @endphp

                    @if(!$inProgressOrTodoExists)
                        <button type="submit" name="submit" class="btn btn-info btn-submit inline-block mb-0">Accept</button>
                    @else
                        <button type="button" name="submit" class="btn btn-info btn-submit inline-block mb-0" id="acceptButtonWithTasks">
                            Accept
                        </button>
                    @endif

            </div>
            </form>
        </div>
    </div>
</div>
@if($case->requires_final_approval && $case->status == 'waiting')
<div class="modal fade" id="accept_case_approval_request" tabindex="-1" @if(isset($remove_backdrop))
    data-bs-backdrop="false" @endif role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h4 class="modal-title text-info w-100">
                    {{-- <p class="text-success"><i class="fa fa-paperclip fa-flip-horizontal fa-3x"></i></p>
                    --}}
                    Accept Request
                </h4>
                <button type="button" class="btn-close float-right" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"></span>
                </button>
            </div>
            <div class="modal-body">
                <form method="post" action="{{route('case_manager.view.accept_case_close_request',$case->id)}}"
                    id="reset_form">
                    <div class="new_link_wrapper">
                        @csrf
                        <!-- <input type="hidden" name="links[]" value=""> -->
                        {{-- <span class="inline-block links relative">Please provide reason for acceptance</span> --}}
                        <p class="inline-block cm_comment_box case-close-textarea-border spellcheck" name="close_comment" required
                            placeholder="Please provide reason for acceptance" contenteditable="true"></p>
                            <textarea required rows="3" 
                            name="close_comment" class="form-control" placeholder="Please provide reason for closing case (optional)"></textarea>

                        <br />
                        <div class="uploaded_files mt-2 mb-2"></div>
                        <div class="my-3" style="border: 1px dashed #88838d; border-radius: 2%;">
                            <label for="file-upload" class="custom-file-upload w-100 text-center">
                                Drag and drop file here, or click to select file
                            </label>
                            <input type="file" name="file" id="file-upload" multiple value="" class="form-control commentMultipleFiles">
                        </div>
                    </div>
                    <br>
                    <button type="submit" name="submit" class="btn btn-info btn-submit inline-block mb-0"><i
                            class="fa fa-location-arrow"></i> </button>

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


<div class="modal fade" id="reject_case_approval_request" tabindex="-1" @if(isset($remove_backdrop))
    data-bs-backdrop="false" @endif role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h4 class="modal-title text-info w-100">
                    {{-- <p class="text-success"><i class="fa fa-paperclip fa-flip-horizontal fa-3x"></i></p>
                    --}}
                    Reject Request
                </h4>
                <button type="button" class="btn-close float-right" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="post" action="{{route('case_manager.view.reject_case_close_request',$case->id)}}"
                    id="reset_form">
                    <div class="new_link_wrapper" style="justify-content: center;">
                        @csrf
                        <!-- <input type="hidden" name="links[]" value=""> -->
                        <span class="inline-block links relative">Please provide reason for rejection</span>
                        <p class="inline-block cm_comment_box case-close-textarea-border spellcheck" name="close_comment" required
                            placeholder="Type notes here" contenteditable="true"></p>
                        <textarea spellcheck="true"  spellcheck="true" style="display:none" rows="3" class="cm_comment_box_hidden"
                            name="close_comment"></textarea>
                        <br />
                        <div class="uploaded_files mt-2 mb-2"></div>
                        <h6 class="text-info">Select documents/images to upload</h6>
                        <div class="cm_upload_box_with_model center">
                            <i class="fa fa-cloud-upload-alt" style="font-size:48px"></i><br>Drop files here
                        </div>
                        <input type="file" name="file" multiple value="" class="form-control commentMultipleFiles">
                    </div>
                    <br>
                    <button type="submit" name="submit" class="btn btn-info btn-submit inline-block mb-0"><i
                            class="fa fa-location-arrow"></i> </button>

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


@endif

<form method="POST" action="{{route('case_manager.assign_task_user')}}">
    @csrf
    <div class="modal fade file_upload_model" id="task_assign_user" tabindex="-1"
             role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header text-center">
                        <h4 class="modal-title text-info w-100">
                            <p class="text">Assign User</p>
                        </h4>
                        <button type="button" class="btn-close float-right" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div>
                            <input type="hidden" id="selected_task_id" name="selected_task_id">
                            @php
                                $all_involved_users = $case->getAllInvolvedUsers();
                            @endphp
                            @if(count($all_involved_users) > 0)
                                <table class="table new-table mx-auto dataTable w-100">
                                    <thead class="text-center">
                                        <tr>
                                            <th class="text-center">Users</th>
                                            <th class="text-center">Position</th>
                                        </tr>
                                    </thead>
                                    <tbody class="all_locations ">
                                        @foreach ($all_involved_users as $case_ho_user )
                                            <tr class="text-center">
                                                <td>
                                                    <div class="d-flex align-items-center justify-content-center gap-1">
                                                        <input type="checkbox" name="assigned[]" value="{{ $case_ho_user->id }}">
                                                        {{$case_ho_user->user->name}}
                                                    </div>
                                                </td>
                                                <td>{{$case_ho_user->position}}</td>
                                            </tr>
                                        @endforeach
                                            <tr class="eligible-hidden" style="display: none;">
                                                <td colspan="2">
                                                    <p class="m-0">Assign to</p>
                                                    <select type="text" name="assigned[]" style="width: 100%" class=" select_2_modal" 
                                                        multiple>
                                                        @foreach($head_office_users as $u)
                                                            @isset($u->user)
                                                                <option @if(isset($task) && $task->hasAssignedUser($u->id)) selected @endif
                                                                    
                                                                    value="{{$u->id}}">{{$u->user->first_name}} {{$u->user->surname}}</option>
                                                                
                                                            @endisset
                                                        @endforeach
                                                    </select>
                                                </td>
                                            </tr>
                                    </tbody>
                                </table>
                            @else
                                <p class="text-center">There are no users who have been assigned this type of case to manage.</p>
                            @endif
                        </div>
    
                        <div class="text-center mt-3">
                            <button type="button" class="showAllUsersBtn"style="background-color: transparent; color: rgb(37, 150, 190); border: none; padding: 0; text-decoration: none; cursor: pointer; font-size: 14px;">
                                Show All Users
                            </button>
                        </div>
                        
    
                        {{-- <div class="form-group mt-3">
                            <label for="note">Add note to case</label>
                            <textarea spellcheck="true" name="note" class="form-control spellcheck"></textarea>
                        </div> --}}
                    </div>
                    <div class="modal-footer">
                        <div class="btn-group ">
                            <button type="button" class="btn btn-outline-secondary"
                                onclick="this.form.reset();" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-info">Save</button>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</form>



<div class="modal fade file_upload_model" id="backend-form" tabindex="-1"
        role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <button type="button" class="btn-close float-right" data-bs-dismiss="modal"
                        aria-label="Close"></button>
            </div>
            <div class="modal-body">
                @include('head_office.case_manager.notes.angular_form_task_embed')
            </div>
        </div>
    </div>
</div>


<!-- User data will be loaded via AJAX -->

@endsection
@section('styles')

<link rel="stylesheet" href="{{asset('tribute/tribute.css')}}">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script>

$(document).ready(function () {


    let $select = $('#location_ids');

    $select.select2();

    // Force select2 to pick up already-selected options
    $select.val($select.find('option[selected]').map(function () {
        return this.value;
    }).get()).trigger('change');
});


    window.addEventListener('DOMContentLoaded', (event) => {
        document.onclick = hideMenu; 
        $(document).ready(function() {
            $('.select_2_custom').select2(
                @if(1) //$case->link_case_with_form->form->is_allow_non_approved_emails
                {
                tags: true,
                }
            @endif
            );
            $(".select_2_modal").select2();
        });
    });
    
    function show_reporter(element)
    {
        if($(element).is(':checked'))
        {
            $('#send_feedback_to_reporter').show();
        }
        else{
            $('#send_feedback_to_reporter').hide();
        }

    }

    function show_reporter_user(checkbox) {
    var feedbackDiv = document.getElementById("send_feedback_to_reporter_user");

    if (checkbox.checked) {
        feedbackDiv.style.display = "block";
    } else {
        feedbackDiv.style.display = "none";
    }
    }
</script>
<style>
    .context-menu {
        position: absolute;
        z-index: 2;
    }

    .context-menu ul {
        list-style: none;
    }

    .menu_comment_link {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
        padding: 10px 0;
    }

    .menu_comment_link>li>a {
        font: inherit;
        border: 0;
        padding: 10px 30px 10px 15px;
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;
        text-decoration: unset;
        color: #000;
        font-weight: 500;
        transition: 0.5s linear;
        -webkit-transition: 0.5s linear;
        -moz-transition: 0.5s linear;
        -ms-transition: 0.5s linear;
        -o-transition: 0.5s linear;
    }

    .menu_comment_link>li>a:hover {
        background: #f1f3f7;
        color: #4b00ff;
    }

    .menu_comment_link>li>a>i {
        padding-right: 10px;
    }

    .menu_comment_link>li.trash>a:hover {
        color: red;
    }
    
    .custom-scroll-vertical::-webkit-scrollbar{
    height: 5px !important;
    transition: 0.2s ease-in-out;
    }
.custom-scroll-vertical::-webkit-scrollbar-thumb{
    border-radius: 15px;
    background: #249b91;
}
.custom-scroll-vertical::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #249b9120; 
    border-radius: 10px;
  }
  .modal-backdrop.show {
    backdrop-filter: blur(3px);
    background-color: rgba(0, 0, 0, 0.3);
  }

</style>
@endsection

@section('scripts')
<script src="{{asset('admin_assets/js/view_case.js')}}"></script>
<script src="{{asset('tribute/tribute.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="{{asset('admin_assets/speech-to-text.js')}}"></script>
<script src="{{asset('admin_assets/js/form-template.js')}}"></script>
<script src="{{ asset('admin_assets/file_pond/filepond.min.js') }}"></script>
<script src="{{ asset('admin_assets/file_pond/filepond.jquery.js') }}"></script>

<script>
    var contacts = @json($contacts_attr ?? []);
    var addresses = @json($addresses_attr ?? []);
    var users = @json($users_attr ?? []);
    var caseInvestigators = @json($caseInvestigators_attr ?? []);
    $('.file-pond').filepond({
                allowMultiple: true, // Allow multiple file uploads
                instantUpload: true, // Prevent automatic upload when files are added
                storeAsFile: true, // Keeps files in FilePond instead of attaching them to form
                chunkUploads: true, // Enable async chunked uploads
                server: {
                    process: '/file_pond_upload_temp', // URL to process file upload
                    revert: (uniqueFileId, load) => {
                        $.ajax({
                            url: '/file_pond_upload_temp_remove',
                            method: 'DELETE',
                            data: JSON.stringify({
                                path: uniqueFileId
                            }),
                            contentType: 'application/json',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                load(); // Tell FilePond to remove file from UI
                            },
                            error: function(xhr) {
                                console.error('Error removing file:', xhr.responseText);
                            }
                        });
                    }, // URL to remove file
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}' // Get CSRF token dynamically
                    }
                }
            });

$(document).on("click", ".open-task", function (event) {
    console.log('asf')
    // Check if the clicked element is NOT a button or link inside the div
    if (!$(event.target).is("button, a")) {
        const taskUrl = $(this).data("task_url"); // Get the URL from data attribute
        if (taskUrl) {
            window.open(taskUrl, "_blank"); // Open in new tab
        }
    }
});
$('#searchInput').on('input', function() {
        var searchValue = $(this).val().toLowerCase(); // Get the input and convert it to lowercase

        // Loop through each comment and filter based on the search value
        $('.cm_comments_wrapper .cm_comment').each(function() {
            var authorText = $(this).find('.cm_comment_author_date').text().toLowerCase(); // Get author and date text
            var commentText = $(this).find('.cm_comment_comment').text().toLowerCase(); // Get comment text

            // Combine author/date and comment text for search
            var combinedText = authorText + ' ' + commentText;

            if (combinedText.includes(searchValue)) {
                $(this).show(); // Show comment if it matches the search
            } else {
                $(this).hide(); // Hide comment if it doesn't match the search
            }
        });
    });

    $(document).on( "click", ".delete_party", function(e) {
    e.preventDefault();
    let href= $(this).attr('href');
    
    let msg = $(this).data('msg');
    alertify.defaults.glossary.title = 'Alert!';
    alertify.confirm("Are you sure?", msg,
    function(){
        window.location.href= href;
    },function(i){
        console.log(i);
    });

});

$(document).ready(function (){
    $('[data-toggle="tooltip"]').tooltip( {container: 'body', placement: 'right'} )

    $('.is_remind_me').on('click',function(){
    console.log('sa')
    $('.notify-wrap').slideToggle();
})

    function setRandomBackgroundColor(elementId) {
            var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
            console.log(randomColor)
            $('.' + elementId).css('background-color', randomColor);
        }

        setRandomBackgroundColor('user-img-placeholder');


    tinymce.init({
                selector: '.tinymce',
                font_formats:"Littera Text",
                content_style: "body { font-family: 'Littera Text', sans-serif; }",
                height: 200,
                skin: false,
                browser_spellcheck: true,
                branding: false,
                promotion: false,
                toolbar: 'undo redo | bold italic underline | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent'
            });
        loadActiveTab();

        // User data will be loaded via AJAX when needed
    });
    function loadActiveTab(tab = null){
        if(tab == null){
            tab = window.location.hash;
        } 
        console.log(tab);
        $('.nav-tabs a[data-bs-target="' + tab + '"]').tab('show');
    }
    

    
    $('.eligible_users_only').on('change',function(){
        if($(".eligible_users_only").is(':checked'))
        {
            // Load all users if not already loaded
            if (Object.keys(globalAllUsers).length === 0) {
                loadUsersData();
            } else {
            $('.eligible_users_only').parent().find('.head_office_user_id').empty();
                Object.keys(globalAllUsers).forEach(function(key) {
                    var value = globalAllUsers[key];
                    $('.eligible_users_only').parent().find('.head_office_user_id').append($("<option></option>").attr("value", key).text(value));
                });
            }
        }
        else
        {
            // Load eligible users if not already loaded
            if (Object.keys(globalEligibleUsers).length === 0) {
                loadUsersData();
            } else {
            $('.eligible_users_only').parent().find('.head_office_user_id').empty();
                var eligibleUsers = globalEligibleUsers.users || globalEligibleUsers;
                Object.keys(eligibleUsers).forEach(function(key) {
                    var value = eligibleUsers[key];
                    $('.eligible_users_only').parent().find('.head_office_user_id').append($("<option></option>").attr("value", key).text(value.name));
                });
            }
        }
    });
    
    $('.transfer_eligible_users_only').on('change',function(){
        if($(".transfer_eligible_users_only").is(':checked'))
        {
            // Load all users if not already loaded
            if (Object.keys(globalAllUsers).length === 0) {
                loadUsersData();
            } else {
            $('.transfer_eligible_users_only').parent().find('.transfer_head_office_user_id').empty();
                Object.keys(globalAllUsers).forEach(function(key) {
                    var value = globalAllUsers[key];
                    $('.transfer_eligible_users_only').parent().find('.transfer_head_office_user_id').append($("<option></option>").attr("value", key).text(value));
            });
            }
        }
        else
        {
            // Load eligible users if not already loaded
            if (Object.keys(globalEligibleUsers).length === 0) {
                loadUsersData();
            } else {
            $('.transfer_eligible_users_only').parent().find('.transfer_head_office_user_id').empty();
                var eligibleUsers = globalEligibleUsers.users || globalEligibleUsers;
                Object.keys(eligibleUsers).forEach(function(key) {
                    var value = eligibleUsers[key];
                    $('.transfer_eligible_users_only').parent().find('.transfer_head_office_user_id').append($("<option></option>").attr("value", key).text(value.name));
                });
            }
        }
    });


    $(document).ready(function() {
    let cas_user_ids = $('#case_handlers_user_ids').data('ids'); 
    
    if (cas_user_ids !== undefined) {
        cas_user_ids = cas_user_ids.map(id => parseInt(id)); // Ensure IDs are integers
    }

    $('.select-user').on('change', function() {
        let selectedUsers = [];

        $('.select-user:checked').each(function() {
            selectedUsers.push(parseInt($(this).val()));
        });

        let matchFound = selectedUsers.some(userId => cas_user_ids.includes(userId));
        let allSelected = cas_user_ids.every(userId => selectedUsers.includes(userId));

        if ( allSelected) {
            $('#other_case_handler').fadeIn();
        } else {
            $('#other_case_handler').fadeOut();
        }

        $('#users_to_remove').val(JSON.stringify(selectedUsers));
    });
});



$('.showAllUsersBtn').on('click', function() {
     const table = $(this).parent().siblings().closest('table');
    table.find('.eligible-hidden').fadeToggle();
    if($(this).text() == 'Show Less Users') {
        $(this).text('Show All Users');
    } else {
        $(this).text('Show Less Users');
    }
})

$(document).on('click', '.selected_task_btn', function () {
    const taskId = $(this).data('task_id');
    $('#selected_task_id').val(taskId);
});
document.addEventListener('DOMContentLoaded', function() {
    const updateStatusModal = document.getElementById('update_status_modal');
    if (updateStatusModal) {
        updateStatusModal.addEventListener('show.bs.modal', function(event) {
            // Button that triggered the modal
            const button = event.relatedTarget;
            
            // Extract info from data-* attributes
            const statusId = button.getAttribute('data-status-id');
            const statusName = button.getAttribute('data-status-name');
            
            // Update the modal's content
            const statusIdInput = updateStatusModal.querySelector('#status_id');
            const statusNameDisplay = updateStatusModal.querySelector('#status_name_display');
            
            statusIdInput.value = statusId;
            statusNameDisplay.textContent = statusName;
        });
    }
});
function resetFeedback(mode) {
        const heading = document.getElementById('modal_case_heading');
        const closeComment = document.getElementById('main_close_comment');
        const form = document.getElementById('close_case_form');
        const feedbackInput = document.getElementById('feedback_mode_input');
        const feedbackOnly = document.getElementById('is_feedback_only');

        if (!form) return

        // Update modal title and feedback mode input
        if (mode === 'feedback') {
            heading.textContent = 'Send Feedback';
            if (closeComment) closeComment.style.display = 'none';
            $(feedbackInput).val('1');
            $(feedbackOnly).val('1');
          console.log(feedbackInput.value,'feedback');
        } else {
            heading.textContent = 'Complete Case';
            if (closeComment) closeComment.style.display = 'block';
            $(feedbackInput).val('0');
            $(feedbackOnly).val('0');
            console.log(feedbackInput.value,'feedback');
        }

        // Reset native form elements
        form.reset();

        // Reset manually any custom components (e.g., checkboxes, radios if needed)
        form.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach(el => el.checked = el.defaultChecked);

        // Clear TinyMCE editors
        if (typeof tinymce !== 'undefined' && Array.isArray(tinymce.editors)) {
            tinymce.editors.forEach(editor => {
                editor.setContent('');
            });
        }


        // Clear FilePond files
        const pondElement = form.querySelector('.file-pond');
        const pondInstance = pondElement ? FilePond.find(pondElement) : null;
        if (pondInstance) {
            pondInstance.removeFiles();
        }

        // Reset any custom selects (e.g., Select2, etc.)
        const selects = form.querySelectorAll('select');
        selects?.forEach(select => {
            select.value = '';
            // If you're using a plugin like Select2:
            if ($(select).hasClass('select2-hidden-accessible')) {
                $(select).val('').trigger('change');
            }
        });

        $('#send_feedback_to_reporter_user').fadeOut()
        $('#send_feedback_to_reporter').fadeOut()
        $('#send_feedback_to_contact').fadeOut()
    }
    
</script>
<script>

$('#close_case_comment.modal').('hidden.bs.modal', function () {
    $('#send_feedback_to_reporter_user').fadeOut()
    $('#send_feedback_to_reporter').fadeOut()
    $('#send_feedback_to_contact').fadeOut()
});




</script>
<link href="{{ asset('admin_assets/tree_select/treeselect.css') }}" rel="stylesheet" />
<script src="{{ asset('admin_assets/tree_select/treeselect.js') }}"></script>
<script>
function resetTinyMCE(id, content) {
    const editor = tinymce.get(id.replace('#', ''));
    if (editor) {
        editor.setContent(content); // HTML content (already parsed)
    } else {
        document.querySelector(id).value = content;
    }
}

function handleSelect2Templates(selectEl) {
    const textareaSelector = selectEl.dataset.targetTextarea;
    const filePondSelector = selectEl.dataset.targetFilepond;

    const selectedOptions = $(selectEl).find(':selected');
    let combinedHTML = '';
    let allFiles = [];

    selectedOptions.each(function () {
        const value = $(this).val();
        if (value === 'custom') return; // Ignore custom selection

        const templateHTML = $(this).data('text') || '';
        const files = $(this).data('files') || [];

        combinedHTML += templateHTML + '<br><br>'; // combine HTML

        if (Array.isArray(files)) {
            allFiles.push(...files);
        }
    });

    // Set TinyMCE content with parsed HTML
    resetTinyMCE(textareaSelector, combinedHTML.trim());

    // FilePond section
    const pondEl = document.querySelector(filePondSelector);
    console.log('Loading files into:', pondEl, allFiles);
if (pondEl && FilePond.find(pondEl)) {
    const pondInstance = FilePond.find(pondEl);

    pondInstance.removeFiles();

    allFiles.forEach(fileUrl => {
        pondInstance.addFile(fileUrl, {
            type: 'local',
            // Optional: add delete URL metadata
            // metadata: { deleteUrl: '/file/delete-temp' }
        }).catch(err => {
            console.error('Error loading file into FilePond:', err);
        });
    });
}

}

document.addEventListener('DOMContentLoaded', () => {
    $('.template-select.select2').on('change', function () {
        handleSelect2Templates(this);
    });
});
</script>

<script>
$(document).ready(function () {

    $('#location_ids').on('select2:select select2:unselect', function () {
        const selectedValues = $(this).val() || [];
        const isOtherSelected = selectedValues.includes('other');

        if (isOtherSelected && selectedValues.length > 1) {
            // Delay is important for smooth transition
            setTimeout(() => {
                $('#location_ids').val(['other']).trigger('change.select2');
                $('#other_site_field').show();
            }, 0);
        } else if (isOtherSelected) {
            $('#other_site_field').show();
        } else {
            $('#other_site_field').hide();
        }
    });


    // Tree structure start
        const options = @json($case->case_head_office->getOrganisationTree());
        const domEl = document.querySelector('.treeselect')
        const treeselect = new Treeselect({
        parentHtmlContainer: domEl,
        value: [],
        options: options,
        alwaysOpen: false,
        appendToBody: false,
        listSlotHtmlComponent: null,
        disabled: false,
        emptyText: 'No data text',
        showCount:true,
        isGroupedValue:true,
        isIndependentNodes:true
        })
        let loc_params = [];
        treeselect.srcElement.addEventListener('input', (e) => {
            $('#selectedValuesLocations').val(e.detail)
        })
});
</script>




@if(Session::has('success'))
    <script>
        alertify.success("{{ Session::get('success') }}");
    </script>
@elseif(Session::has('error'))
<script>
    alertify.error("{{ Session::get('error') }}");
</script>
@endif


<!-- Custom Modal for In Progress Tasks -->
<div id="customInProgressTasksModal" class="custom-modal" style="display: none;">
  <div class="custom-modal-overlay"></div>
  <div class="custom-modal-dialog">
    <div class="custom-modal-content">
      <div class="custom-modal-header">
        <h5 class="custom-modal-title">Open Tasks</h5>
        <button type="button" class="custom-modal-close" id="closeCustomModal">&times;</button>
      </div>
      <div class="custom-modal-body">
        <p>The following tasks are still in progress. What would you like to do?</p>
        <form id="close-tasks-form">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th><input type="checkbox" id="selectAllTasks"></th>
              <th>Task</th>
              <th>Status</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            @foreach($case->new_tasks as $task)
              @php
                $status = strtolower(str_replace('_', ' ', trim($task->status)));
              @endphp
              @if($status == 'in progress' || $status == 'to do')
                <tr>
                  <td><input type="checkbox" class="task-checkbox" value="{{ $task->id }}"></td>
                  <td>{{ $task->title ?? 'Task #' . $task->id }}</td>
                  <td>
                    @if($status == 'in progress')
                      <span class="badge pri-tag in_progress">In Progress</span>
                    @else
                      <span class="badge pri-tag to_do">To Do</span>
                    @endif
                  </td>
                  <td>
                    <select class="form-select form-select-sm task-action-dropdown">
                        <option value="keep_open" selected>Keep Open</option>
                        <option value="close_task">Close Task</option>
                    </select>
                  </td>
                </tr>
              @endif
            @endforeach
          </tbody>
        </table>
        </form>
      </div>
      <div class="custom-modal-footer">
        <div id="bulk-action-buttons" style="display: none; margin-right: auto;">
            <button type="button" class="btn btn-secondary" id="bulkCloseTasksBtn" style="background-color: #f44336; color: white;">Close Selected Tasks</button>
            <button type="button" class="btn btn-secondary" id="bulkKeepOpenBtn">Keep Open</button>
        </div>
        <button type="button" class="btn btn-success" id="saveTaskActionsBtn">Save</button>
      </div>
    </div>
  </div>
</div>

<div class="loader-container" id="loader" style="top: 0;z-index:9999999;display:none;">
    <div class="loader"></div>
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
    const customModal = document.getElementById("customInProgressTasksModal");
    const acceptButtonWithTasks = document.getElementById("acceptButtonWithTasks");
    const closeCustomModal = document.getElementById("closeCustomModal");
    const customModalOverlay = customModal.querySelector(".custom-modal-overlay");

    // Validation function for feedback checkboxes
    function validateFeedbackFields() {
        const errors = [];
        const errorFields = [];

        // Reporter feedback
        const reporterCheckbox = $('#send_feedback_to_reporter_user_input');
        const reporterTextarea = $('#textarea_reporter');
        const reporterSelect = $('#user_feedback_input');
        const isReporterAvailable = reporterSelect.data('is-reporter-available');
        if (reporterCheckbox.length && reporterCheckbox.is(':checked') && isReporterAvailable == true) {
            const reporterEditior = tinymce.get('textarea_reporter');
            const reporterValue = reporterEditior ? reporterEditior.getContent({ format: 'text' }).trim() : '';
            if (!reporterSelect.length || !reporterSelect.val() || reporterSelect.val() === '0') {
                errors.push("Please select a reporter when 'To the Reporter' is selected.");
                errorFields.push({ field: reporterSelect, message: "Please select a reporter" });
            }
            if (!reporterValue) {
                errors.push("Reporter feedback is required when 'To the Reporter' is selected.");
                errorFields.push({ field: reporterTextarea, message: "Reporter feedback is required" });
            }
        }

        const siteCheckbox = $('#send_feedback_to_reporter_input');
        if (siteCheckbox.length && siteCheckbox.is(':checked')) {
            const siteEditor = tinymce.get('textarea_site');
            const siteValue = siteEditor ? siteEditor.getContent({ format: 'text' }).trim() : '';
            if (!siteValue) {
                errors.push("Site feedback is required when 'Site' is selected.");
                errorFields.push({ field: $('#textarea_site'), message: "Site feedback is required" });
            }

            const locationIds = $('#location_ids').val();
            if (!locationIds || locationIds.length === 0) {
                errors.push("At least one location must be selected when 'Site' is selected.");
                errorFields.push({ field: $('#location_ids'), message: "At least one location must be selected" });
            } else {
                if (locationIds.includes('other')) {
                    const otherSiteValue = $('#selectedValuesLocations').val();
                    if (!otherSiteValue || otherSiteValue.trim() === '') {
                        errors.push("Please select at least one other site when 'Other Site' is selected.");
                        errorFields.push({ field: $('#selectedValuesLocations'), message: "Please select at least one other site" });
                    }
                }
            }
        }

        const otherCheckbox = $('#send_feedback_to_contact_input');
        const otherTextarea = $('#textarea_other');
        const contactSelect = $('#contact_ids');
        if (otherCheckbox.length && otherCheckbox.is(':checked')) {
            const otherEditor = tinymce.get('textarea_other');
            const otherValue = otherEditor ? otherEditor.getContent({ format: 'text' }).trim() : '';
            // Check if at least one contact is selected
            if (!contactSelect.length || !contactSelect.val() || contactSelect.val().length === 0) {
                errors.push("Please select at least one contact when 'Other user' is selected.");
                errorFields.push({ field: contactSelect, message: "Please select at least one contact" });
            }
            if (!otherValue) {
                errors.push("Other user feedback is required when 'Other user' is selected.");
                errorFields.push({ field: otherTextarea, message: "Other user feedback is required" });
            }
        }

        return { errors, errorFields };
    }

    function clearValidationStyling() {
        $('#textarea_reporter, #textarea_site, #textarea_other, #location_ids, #selectedValuesLocations, #user_feedback_input, #contact_ids').removeClass('validation-error');        
        $('.validation-error-message').remove();
    }

    function applyValidationStyling(errorFields) {
        errorFields.forEach(({ field, message }) => {
            if (field.length) {
                field.addClass('validation-error');
                
                const errorDiv = $('<div class="validation-error-message text-danger mt-1" style="font-size: 12px;">' + message + '</div>');
                field.after(errorDiv);
            }
        });
    }



    function showCustomModal() {
        clearValidationStyling();
        const validationResult = validateFeedbackFields();
        if (validationResult.errors.length > 0) {
            applyValidationStyling(validationResult.errorFields);
            
            if (validationResult.errorFields.length > 0) {
                validationResult.errorFields[0].field[0].scrollIntoView({ 
                    behavior: 'smooth', 
                    block: 'center' 
                });
            }
            
            return false;
        }
        
        customModal.style.display = "flex";
        document.body.style.overflow = "hidden";
        return true;
    }

    // Hide custom modl
    function hideCustomModal() {
        customModal.style.display = "none";
        document.body.style.overflow = "";
    }

    // Event listeners for modal
    if (acceptButtonWithTasks) {
        acceptButtonWithTasks.addEventListener("click", showCustomModal);
    }

    if (closeCustomModal) {
        closeCustomModal.addEventListener("click", hideCustomModal);
    }

    if (customModalOverlay) {
        customModalOverlay.addEventListener("click", hideCustomModal);
    }

    // Close modal on Escape key
    document.addEventListener("keydown", (e) => {
        if (e.key === "Escape" && customModal.style.display === "flex") {
            hideCustomModal();
        }
    });

    // Add validation clearing event listeners
    $('#textarea_reporter, #textarea_other').on('input', function() {
        $(this).removeClass('validation-error');
        $(this).siblings('.validation-error-message').remove();
    });

    // Add form validation for regular submit button (when no custom modal is needed)
    $('form').on('submit', function(e) {
        // Only validate if this is not the custom modal form
        if (!$(this).find('#acceptButtonWithTasks').length) {
            // Clear any previous validation styling
            clearValidationStyling();
            
            // Validate feedback fields
            const validationResult = validateFeedbackFields();
            
            if (validationResult.errors.length > 0) {
                // Apply validation styling to highlight required fields
                applyValidationStyling(validationResult.errorFields);
                
                // Scroll to the first error field
                if (validationResult.errorFields.length > 0) {
                    validationResult.errorFields[0].field[0].scrollIntoView({ 
                        behavior: 'smooth', 
                        block: 'center' 
                    });
                }
                
                // Prevent form submission
                e.preventDefault();
                return false;
            }
        }
    });

    // For TinyMCE editors, listen to content changes
    if (typeof tinymce !== 'undefined') {
        tinymce.on('AddEditor', function(e) {
            const editor = e.editor;
            if (editor.id === 'textarea_site' || editor.id === 'textarea_reporter' || editor.id === 'textarea_other') {
                editor.on('input keyup', function() {
                    const field = $('#' + editor.id);
                    field.removeClass('validation-error');
                    field.siblings('.validation-error-message').remove();
                });
            }
        });
    }

    // For Select2 location field
    $('#location_ids').on('select2:select select2:unselect', function() {
        $(this).removeClass('validation-error');
        $(this).siblings('.validation-error-message').remove();
        
        // If "other" is unselected, clear validation from other site field
        const selectedValues = $(this).val();
        if (!selectedValues || !selectedValues.includes('other')) {
            $('#selectedValuesLocations').removeClass('validation-error').siblings('.validation-error-message').remove();
        }
    });

    // For reporter select field
    $('#user_feedback_input').on('change', function() {
        $(this).removeClass('validation-error');
        $(this).siblings('.validation-error-message').remove();
    });

    // For contact Select2 field
    $('#contact_ids').on('select2:select select2:unselect', function() {
        $(this).removeClass('validation-error');
        $(this).siblings('.validation-error-message').remove();
    });

    // For the other site hidden field (when treeselect updates it)
    $(document).on('change', '#selectedValuesLocations', function() {
        $(this).removeClass('validation-error');
        $(this).siblings('.validation-error-message').remove();
    });

    // Clear validation when checkboxes are unchecked
    $('#send_feedback_to_reporter_user_input, #send_feedback_to_reporter_input, #send_feedback_to_contact_input').on('change', function() {
        if (!$(this).is(':checked')) {
            // Clear validation for the corresponding fields
            const checkboxId = $(this).attr('id');
            if (checkboxId === 'send_feedback_to_reporter_user_input') {
                $('#textarea_reporter, #user_feedback_input').removeClass('validation-error').siblings('.validation-error-message').remove();
            } else if (checkboxId === 'send_feedback_to_reporter_input') {
                $('#textarea_site, #location_ids, #selectedValuesLocations').removeClass('validation-error').siblings('.validation-error-message').remove();
            } else if (checkboxId === 'send_feedback_to_contact_input') {
                $('#textarea_other, #contact_ids').removeClass('validation-error').siblings('.validation-error-message').remove();
            }
        }
    });

    // Task management functionality
    const selectAllTasks = customModal.querySelector("#selectAllTasks");
    const taskCheckboxes = customModal.querySelectorAll(".task-checkbox");
    const bulkActionButtons = customModal.querySelector("#bulk-action-buttons");
    const bulkCloseBtn = customModal.querySelector("#bulkCloseTasksBtn");
    const bulkKeepOpenBtn = customModal.querySelector("#bulkKeepOpenBtn");
    const saveBtn = customModal.querySelector("#saveTaskActionsBtn");

    const updateBulkActionButtonsVisibility = () => {
        if (!bulkActionButtons) return;
        const anyChecked = Array.from(taskCheckboxes).some(cb => cb.checked);
        bulkActionButtons.style.display = anyChecked ? "flex" : "none";
    };

    if (selectAllTasks) {
        selectAllTasks.addEventListener("change", function () {
            taskCheckboxes.forEach(cb => (cb.checked = this.checked));
            updateBulkActionButtonsVisibility();
        });
    }

    taskCheckboxes.forEach(cb => {
        cb.addEventListener("change", updateBulkActionButtonsVisibility);
    });

    const setActionForSelectedTasks = (action) => {
        taskCheckboxes.forEach(cb => {
            if (cb.checked) {
                const row = cb.closest('tr');
                if (row) {
                    const dropdown = row.querySelector('.task-action-dropdown');
                    if (dropdown) dropdown.value = action;
                }
            }
        });
    };

    if (bulkCloseBtn) {
        bulkCloseBtn.addEventListener('click', () => setActionForSelectedTasks('close_task'));
    }

    if (bulkKeepOpenBtn) {
        bulkKeepOpenBtn.addEventListener('click', () => setActionForSelectedTasks('keep_open'));
    }
    
    const submitCloseCaseForm = (comment) => {
        const form = document.getElementById("close_case_form");
        if (!form) {
            alert("Error: Could not find the case closure form.");
            return;
        }
        
        const commentField = form.querySelector('[name="close_comment"]');
        if (commentField && !commentField.value.trim()) {
            commentField.value = comment;
        }

        const feedbackMode = form.querySelector('[name="feedback_mode"]');


        // Use a temporary submit button to trigger form submission
        const tempSubmit = document.createElement('button');
        tempSubmit.type = 'submit';
        tempSubmit.style.display = 'none';
        form.appendChild(tempSubmit);
        tempSubmit.click();
        form.removeChild(tempSubmit);
    };

    if (saveBtn) {
        saveBtn.addEventListener("click", () => {
            const tasksToClose = Array.from(taskCheckboxes)
                .filter(cb => {
                    const row = cb.closest('tr');
                    const dropdown = row.querySelector('.task-action-dropdown');
                    return dropdown && dropdown.value === 'close_task';
                })
                .map(cb => cb.value);

            hideCustomModal();
            $('#loader').show();

            setTimeout(() => {
                if (tasksToClose.length > 0) {
                    if (window.livewire) {
                        const onTasksClosed = () => {
                            submitCloseCaseForm("Case closed - selected tasks closed");
                            window.livewire.removeListener("tasksBulkClosed", onTasksClosed);
                        };
                        window.livewire.on("tasksBulkClosed", onTasksClosed);
                        window.livewire.emit("bulkCloseTasks", tasksToClose);
                    } else {
                        console.error("Livewire not available to close tasks.");
                        submitCloseCaseForm("Case closed - selected tasks closed.");
                    }
                } else {
                    submitCloseCaseForm("Case closed - pending tasks kept open.");
                }
            }, 500); 
        });
    }
    
    // Initial check in case some checkboxes are pre-checked
    updateBulkActionButtonsVisibility();
});
</script>

@endsection