@extends('layouts.head_office_app')
@section('title', 'Case Manager')


@section('sidebar')
@include('layouts.company.sidebar')
@endsection
@section('sub-header')
        <ul style="padding-left: 270px">
            <li> <a class="{{request()->route()->getName() == 'case_manager.index' ? 'active' : ''}}"
                    href="{{route('case_manager.index')}}">Cases <span></span></a> </li>
            <li> <a class="{{request()->route()->getName() == 'case_manager.overview' ? 'active' : ''}}"
                    href="{{route('case_manager.overview')}}">Overview <span></span></a></li>
            <li> <a data-toggle="tooltip" data-placement="top" title="Coming Soon" class="{{request()->route()->getName() == 'case_manager.case_updates' ? 'active' : ''}} placeholder-link"
                    href="{{route('case_manager.case_archives')}}">Case Updates <span></span></a></li>
            <li> <a class="{{request()->route()->getName() == 'case_manager.case_archives' ? 'active' : ''}}"
                    href="{{route('case_manager.case_archives')}}">Archived Cases <span></span></a></li>
        </ul>

@endsection
@section('content')
<style>

.popup {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 200px;
    height: 200px 
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

    .cm_case_number {
        font-size: 18px;
        font-weight: 400;
    }

    .bg-success {
        background: rgb(0, 205, 69) !important;
    }

    .text-success {
        color: rgb(0, 205, 69) !important;
    }
    .bg-primary{
        background: rgb(0, 89, 205) !important;
    }

    .bg-info{
        background: rgb(205, 198, 0) !important;
    }

    .border-both {
        border: 1px solid rgb(188, 188, 188);
        border-top: none;
        border-bottom: none;
    }
</style>
<style>
    .tooltip-container {
        position: relative;
        display: inline-block;
        cursor: pointer;
        }
        
        .tooltip-container .tooltip-text {
        visibility: hidden;
        width: 250px; 
        background-color: white;
        color: black; 
        text-align: center;
        padding: 8px;
        border-radius: 5px;
        position: absolute;
        top: 130%; 
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
        font-size: 14px;
        font-family: Arial, sans-serif;
        white-space: normal; 
        border: 1px solid #ccc;
        z-index: 10000;
        opacity: 0;
        font-weight: 0 !important;
        transition: opacity 0.2s ease-in-out;
        word-wrap: break-word;
        }
        
        /* .tooltip-container .tooltip-text::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 6px;
        border-style: solid;
        border-color: white transparent transparent transparent;
        } */
        
        .tooltip-container:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
        }
        .groups-container {
        
        display: flex;
        
        flex-wrap: wrap;
        
        justify-content: center;
        
        margin-top: 10px;
        
        }
        
        
        .groups-container .case-tags {
        
        margin: 5px;
        
        padding: 5px 10px;
        
}

.treeselect-list.treeselect-list--top-to-body.treeselect-list--focused{
    width: fit-content !important;
}
</style>

<div id="content" class="content-custom-scroll">
    <link href="{{ asset('admin_assets/file_pond/filepond.min.css') }}" rel="stylesheet" />

    <style>
        .case-tags{
            font-size: 12px !important;
            padding: 5px !important;
        }
        .case-tags svg{
            width: 18px;
        }
        .input-group {
            position: relative;
            width: 320px;
        }

        .search-input {
            padding-left: 30px;
            z-index: 2;
            position: relative;
            background-color: white !important;
            transition: padding-left 0.2s ease;
        }

        .search-input:focus {
            padding-left: 12px;
        }

        .search-addon {
            position: absolute;
            left: 0px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 3;
            pointer-events: none;
            transition: opacity 0.2s ease;
        }

        .search-input:focus + .search-addon,
        .search-input:focus ~ .search-addon {
            opacity: 0;
        }

        input:-webkit-autofill {
            background-color: white !important;
            color: black !important;
            box-shadow: 0 0 0px 1000px white inset !important;
        }

        textarea[name="close_comment"]::placeholder {
            color: #686868 !important;
            font-size: 14px !important;
            opacity: 1 !important;
        }
        
        textarea[name="close_comment"] {
            color: #333;
        }
        .highlighted-search {
            background-color: yellow;
            font-weight: bold;
            padding: 0px 3px;
            border-radius: 3px;
        }

        #clearSearch {
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            z-index: 10;
            border: none;
            background: transparent;
            transition: opacity 0.2s ease;
        }

        #clearSearch:hover {
            opacity: 0.7;
        }

        .input-group {
            position: relative;
        }

  </style>
    <link href="{{ asset('admin_assets/tree_select/treeselect.css') }}" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

    <form id="caseSearchForm" autocomplete="off">
        <div class=" headingWithSearch ">
                <div class="input-group rounded " style="width: 320px;">
                    <span class="input-group-text border-0 bg-transparent search-addon" id="search-addon">
                        <i class="fas fa-search" style="color: #969697;z-index: 2"></i>
                    </span>
                        <input id="caseSearch" value="{{ request()->search }}" type="text" autocomplete="off" name="search" class="form-control search-input rounded" placeholder="Search (Ctrl+K)" aria-label="Search" aria-describedby="search-addon">
                    <button type="button" id="clearSearch" class="input-group-text border-0 bg-transparent" style="display: none; cursor: pointer;" title="Clear search">
                        <i class="fas fa-times" style="color: #969697;"></i>
                    </button>
                </div>
                
                <button type="submit" id="searchSubmitButton" class="ms-2 primary-btn text-white" style="color:white !important;">Search more cases</button>
            </div>
            <p class="mb-0 text-secondary ms-2" style="font-size: 13px;">Filter by</p>
            <div class="d-flex align-items-center gap-2">
                <div class="custom-buttons ms-2">
                    <input type="radio" name="filter_type" value="id" id="filter_pink" class="filter-input" {{ request('filter_type') == 'id' || !request('filter_type') ? 'checked' : '' }}>
                    <label for="filter_pink" class="filter-label green {{ request('filter_type') == 'id' ? 'selected' : '' }}" >Case ID</label>
                    
                    <input type="radio" name="filter_type" value="summary" id="filter_green" class="filter-input" {{ request('filter_type') == 'summary' ? 'checked' : '' }}>
                    <label for="filter_green" class="filter-label green {{ request('filter_type') == 'summary' ? 'selected' : '' }}">Summary</label>

                    <input type="radio" name="filter_type" value="pharmacy" id="filter_green_pharmacy" class="filter-input" {{ request('filter_type') == 'pharmacy' ? 'checked' : '' }}>
                    <label for="filter_green_pharmacy" class="filter-label green {{ request('filter_type') == 'pharmacy' ? 'selected' : '' }}">Site</label>
                </div>
                <p class="mb-0 text-secondary" style="font-size: 13px;">|</p>
                <div class="">
                    <div class="custom-buttons filters" role="group" aria-label="Date Filter">
                        <input type="radio" class="filter-input" name="date_filter_short" id="date_last_month" value="last_month" autocomplete="off" {{ request('date_filter_short') == 'last_month' ? 'checked' : '' }}>
                        <label class="filter-label" for="date_last_month">Last Month</label>
                
                        <input type="radio" class="filter-input" name="date_filter_short" id="date_last_3_months" value="last_3_months" autocomplete="off" {{ request('date_filter_short') == 'last_3_months' ? 'checked' : '' }}>
                        <label class="filter-label" for="date_last_3_months">Last 3 Months</label>
                
                        <input type="radio" class="filter-input" name="date_filter_short" id="date_last_12_months" value="last_12_months" autocomplete="off" {{ request('date_filter_short') == 'last_12_months' ? 'checked' : '' }}>
                        <label class="filter-label" for="date_last_12_months">Last 12 Months</label>
                    </div>
                </div>
                <p class="mb-0 text-secondary" style="font-size: 13px;">|</p>
                <div>
                    <p class="mb-0 text-secondary" style="font-size: 13px;">Total: {{ $total }} cases</p>
                </div>
            </div>
        
        
    </form>

    <div class="cm_content pt-2">
        <div id="noResultsMessage" style="display: none; text-align: left;">
            <p class="font-italic no-case-hide">There are no cases</p>
        </div>
        
        @if(!count($cases))
        @if (request()->route()->getName() == 'case_manager.case_archives')
        <p class="font-italic no-case-hide">There are no archived cases</p>
        @else
        <p class="font-italic no-case-hide">There are no cases</p>
        @endif
        
        @endif
        <div id="cases-wrapper">
            @include('head_office.case_manager.cases',['cases' => $cases])
        </div>
        <div class="line-reloading" style="display:none">
            <div class="skeleton-gjdnnl5vvii"></div>
        </div>


        {{-- <div>{!! $cases->render('pagination::bootstrap-5') !!}</div> --}}
    </div>
</div>


<div id="draggable" class="bottom-nav position-fixed display_cases_nav" style="z-index: 10;" aria-describedby="drag" >
    <div class="left-side">
        <div class="info-wrapper">
            <div class="selected-show">
                <h5 id="count">0</h5>
            </div>
            <div class="info-heading" style="max-width: 180px;overflow:hidden;">
                <p>Items Selected</p>
                <div class="dots-wrapper">
                    <span class="dot"></span>
                </div>
            </div>
        </div>

        <div style="max-width: 570px;overflow-x:scroll;height:100%;" class="custom-drag-scroll">
        <div class="btn-wrapper" style="width: {{request()->route()->getName() == 'case_manager.case_archives' ? 'fit-content': '1150px'}};">
            @if (request()->route()->getName() == 'case_manager.index')
                <button data-toggle="tooltip" id='lfpse-case-btn' class="bar-btn" data-route="{{route('case_manager.submit_nhs_lfpse_bulk')}}" data-token="{{csrf_token()}}" title="Submits the selected cases to NHS LFPSE" style="width: 90px;">
                    <img src="{{ asset('images/shield-plus.svg') }}" alt="icon">
                    <p>LFPSE</p>
                </button>
                <button data-bs-target="#open_case_model" data-bs-toggle="modal" id='open-case-btn' class="bar-btn" title="open selected cases" style="width: 90px;">
                    <img src="{{ asset('images/file-02.svg') }}" alt="icon">
                    <p>Reopen</p>
                </button>
                <button data-bs-target="#close_case_comment" data-bs-toggle="modal" id='close-case-btn' class="bar-btn" title="close selected cases" style="width: 140px;">
                    <img src="{{ asset('images/file-x-02.svg') }}" alt="icon">
                    <p>Complete Case</p>
                </button>
            @endif
            <button id='export-case-btn' class="bar-btn" title="Export selected cases" style="width: 112px;">
                <img src="{{ asset('images/file-download-02.svg') }}" alt="icon">
                <p>Export Case</p>
            </button>
            @if (request()->route()->getName() == 'case_manager.index')
            <button data-bs-target="#case_approval_request" data-bs-toggle="modal" id='approve-case-btn' class="bar-btn" title="Approve closure for selected cases" style="width: 130px;">
                <img src="{{ asset('images/file-x-03.svg') }}" alt="icon">
                <p>Approve closure</p>
            </button>
            <button class="bar-btn" data-bs-toggle="modal" data-bs-target="#archiveModal" >
                <img src="{{ asset('images/folder-lock.svg') }}" alt="icon">
                <p>Archive</p>
            </button>

            @endif
            {{-- id='unarchive-btn' --}}
            <button style="width: 100px;" data-bs-toggle="modal" data-bs-target="#unarchiveModal"  class="bar-btn" title="Unarchive selected cases">
                <img src="{{ asset('images/folder.svg') }}" alt="icon">
                <p>Unarchive</p>
            </button>
            @if (request()->route()->getName() == 'case_manager.index')
            <button id='transfer-case-btn' data-bs-toggle="modal" data-bs-target="#transfer_case_responsibility" class="bar-btn" title="Transfer selected cases" style="width: 112px;">
                <img src="{{ asset('images/upload-cloud-02.svg') }}" alt="icon">
                <p>Transfer case</p>
            </button>
            <button id='share-case-btn' data-bs-toggle="modal" data-bs-target="#share_case_responsibility" class="bar-btn" title="Share selected cases" style="width: 200px;">
                <img src="{{ asset('images/users-plus.svg') }}" alt="icon">
                <p>Share Case Responsibility</p>
            </button>
                
            @endif

        </div>
    </div>
    
    </div>
    <button class="drag-btn">
        <img src="{{ asset('images/dots-horizontal.svg') }}" alt="svg">
        <img style="margin-top:-15px;" src="{{ asset('images/dots-horizontal.svg') }}" alt="svg">
    </button>
</div>
<input type="hidden" value="{{csrf_token()}}" id="token_id"/>


{{-- Php for Modals --}}


{{-- All the draggable Modals are here --}}
<form method="post" action="{{route('case_manger.export_cases_bulk')}}" id="export_bulk">
    @csrf
    <input type="text" hidden name="case_ids[]" class="case_ids_input">
</form>
<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;
    }

</style>
<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">
            <div class="modal-header">
                <h5 class="modal-title" id="archiveModalLabel">Archive Cases</h5>
               
            </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" minlength="8" required>

                <label style="margin: 0; font-size: 12px;" for="reason">Reason</label>
                <input 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 type="button" class="btn primary-btn" id="archive-btn"
                    data-token="{{ csrf_token() }}"
                    data-route="{{ route('case_manager.archive_bulk') }}">
                    Archive
                </button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="unarchiveModal" tabindex="-1" role="dialog" aria-labelledby="unarchiveModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="unarchiveModalLabel">Unarchive Cases</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" placeholder="Password" class="form-control" required>
                <label for="reason">Reason</label>
                <input type="text" id="reason" name="reason" placeholder="Reason" class="form-control" required>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" >close</button>
                <button class="btn btn-primary" type="button" id="unarchive-btn" data-token="{{csrf_token()}}" data-route="{{route('case_manager.unarchive_bulk')}}">Unarchive</button>
            </div>
        </div>
    </div>
</div>
{{-- data-token="{{csrf_token()}}" data-route="{{route('case_manager.archive_bulk')}}" --}}
<div class="modal fade" id="close_case_comment" 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">
                    {{-- <p class="text-success"><i class="fa fa-paperclip fa-flip-horizontal fa-3x"></i></p>
                    --}}
                    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 method="post" action="{{ route('case_manager.view.close_case_bulk') }}" id="reset_form" enctype="multipart/form-data">
                    @csrf
                    <div class="new_link_wrapper">
                        {{-- <label class="form-label fw-bold mb-2">Please provide reason to close case</label> --}}
                        <textarea  rows="3" name="close_comment" class="form-control" placeholder="Please provide reason for closing case (optional)"></textarea>
            
                        <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>
                        
                        
            
                        <h5 class="text-info">Provide Feedback</h5>
            
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" id="send_feedback_to_reporter_user_input" name="send_feedback_to_reporter_user" onchange="show_reporter_user(this)">
                            <label class="form-check-label fw-semibold" for="send_feedback_to_reporter_user_input">To the Reporter</label>
                        </div>
                        <div style="display: none;" id="send_feedback_to_reporter_user">
                            {{-- <input type="text" hidden id="user_feedback_ids" name="user_feedback_ids[]"> --}}
                            <select id="user_ids" name="user_feedback_ids[]" class="form-control select2 mb-2" multiple></select>
                            <label class="form-label w-10">Feedback</label>
                            <textarea name="feedback_user" class="form-control tinymce"></textarea>
                        </div>
            
                        <!-- Feedback to Site -->
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="send_feedback_to_reporter_input" name="send_feedback_to_reporter" onchange="show_reporter(this)">
                            <label class="form-check-label fw-semibold" for="send_feedback_to_reporter_input">To the site</label>
                        </div>
                        <div style="display: none;" id="send_feedback_to_reporter">
                            {{-- <input type="text" hidden id="location_feedback_ids" name="location_feedback_ids[]"> --}}
                            <select id="location_ids" name="location_feedback_ids[]" class="form-control select2 mb-2 w-100" multiple></select>
                            <label class="form-label w-100">Feedback</label>
                            <textarea name="feedback" class="form-control tinymce"></textarea>
                        </div>
            
                        <input type="text" hidden name="case_ids[]" class="case_ids_input">
            
                        <div class="text-end mt-4">
                            <button type="submit" class="btn btn-info btn-submit inline-block mb-0" style="width: 100%; border-radius: 2%;">Complete</button>
                        </div>
                    </div>
                </form>
            </div>
            
            </form>
        </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">
                    {{-- <p class="text-success"><i class="fa fa-paperclip fa-flip-horizontal fa-3x"></i></p>
                    --}}
                    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_bulk')}}"  id="reset_form" enctype="multipart/form-data">
                    <div class="new_link_wrapper">
                        @csrf
                        <!-- <input type="hidden" name="links[]" value=""> -->
                        <span class="h5 inline-block links relative my-2">Please provide reason to Reopen case</span>
                        <textarea spellcheck="true"  spellcheck="true" required rows="3" class="cm_comment_box case-close-textarea-border spellcheck"
                            name="close_comment" placeholder="Type reaseon here"></textarea>
                        <br />
                        <input type="text" hidden name="case_ids[]" class="case_ids_input">
                    </div>
                    <br>
                    
                    
                    <button type="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="loader-container" id="loader" style="top: 0;z-index:9999999;display:none;">
    <div class="loader"></div>
</div>

<div class="modal fade" id="case_approval_request" 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">
                    {{-- <p class="text-success"><i class="fa fa-paperclip fa-flip-horizontal fa-3x"></i></p>
                    --}}
                    Closure Approvals
                </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.case_approval_bulk')}}"
                    id="reset_form">
                    <div class="new_link_wrapper">
                        @csrf
                        <!-- <input type="hidden" name="links[]" value=""> -->
                        <select name="reason" id="closure_select" class="form-select my-2">
                            <option value="accept" selected>Accept closure Approvals</option>
                            <option value="reject" >Reject closure Approvals</option>
                        </select>
                        <input type="text" hidden name="case_ids[]" class="case_ids_input">
                        <span class="h5 inline-block links relative" id="case_placeholder">Please provide reason for acceptance.</span>
                        <p class="inline-block cm_comment_box case-close-textarea-border" 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 spellcheck"
                            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"  class="btn btn-info btn-submit inline-block mb-0"><i
                            class="fa fa-location-arrow"></i> </button>

            </div>
            </form>
        </div>
    </div>
</div>
<form method="post" action="{{ route('case_manager.transfer_case_responsibity_bulk') }}" id="transfer_case_form" class="cm_task_form">
    @csrf
    <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">
                <div class="modal-header text-center">
                    <h4 class="modal-title text-info w-100">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>
                        @if(count($headOffice->users) > 0)
                            <table class="table new-table mx-auto dataTable w-100">
                                <thead class="text-center">
                                    <tr>
                                        <th>Users</th>
                                        <th>Can Manage</th>
                                    </tr>
                                </thead>
                                <tbody class="all_locations">
                                    @foreach($headOffice->users as $user_raw)
                                        @php
                                            $user_id = $user_raw->user->id;
                                            $isEligible = isset($eligible_user_raw[$user_id]);
                                            $userData = $isEligible ? $eligible_user_raw[$user_id] : [
                                                'name' => $user_raw->user->name,
                                            ];
                                        @endphp
                                        <tr class="{{ $isEligible ? '' : 'd-none eligible-hidden' }}">
                                            <td class="email">
                                                <input type="checkbox" name="head_office_user_id[]" value="{{ $user_id }}">
                                                <span class="fw-semibold">{{ $user_raw->user->name }}</span>
                                                <p>(
    {{ isset($user_raw->user->position->name) ? $user_raw->user->position->name : 'No Position' }}
)</p>
                                            </td>
                                            <td>
                                                @if ($isEligible)
                                                    <div style="text-align: left;">
                                                        @foreach ($userData['other_case_types'] as $other_case_type)
                                                            @if (is_array($other_case_type) && isset($other_case_type['form_name']) && $other_case_type['form_name'] !== 'Near Miss')
                                                                <p class="m-0" style="color:rgb(0, 0, 0);">
                                                                    {{ $other_case_type['form_name'] }}
                                                                </p>
                                                            @endif
                                                        @endforeach
                                                    </div>
                                                @else
                                                    <div class="text-center">
                                                        <p class="m-0">-</p>
                                                    </div>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        @else
                            <p class="text-center">No users available for transfer.</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" id="note" class="form-control spellcheck"></textarea>
                    </div>

                    <input type="hidden" name="case_ids[]" class="case_ids_input">
                </div>

                <div class="modal-footer">
                    <div class="btn-group right">
                        <button type="button" class="btn btn-outline-secondary" onclick="document.getElementById('transfer_case_form').reset();" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-info">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- 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(".all_locations tr");

            rows.forEach(row => {
                const nameCell = row.querySelector(".email span");
                const positionCell = row.querySelector(".email p");

                const nameText = nameCell ? nameCell.textContent.toLowerCase() : '';
                const positionText = positionCell ? positionCell.textContent.toLowerCase() : '';
                const combinedText = nameText + ' ' + positionText;

                const matches = filterWords.every(word => combinedText.includes(word));
                row.style.display = matches ? "" : "none";
            });
        });

        document.querySelector(".showAllUsersBtn")?.addEventListener("click", function () {
            document.querySelectorAll(".eligible-hidden").forEach(row => {
                row.classList.remove("d-none");
            });
            this.style.display = 'none';
        });
    });
</script>


<form method="post"
    action="{{route('case_manager.share_case_responsibity_bulk')}}"
    id="transfer_case_form"
    class="cm_task_form">
    @csrf
    <div class="modal fade file_upload_model" id="share_case_responsibility" 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">
                        Share Case Responsibility
                    </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="shareCaseSearchInput" class="form-control" placeholder="Search users...">
    </div>
</div>
                <div class="modal-body">
                    <div>
                        @if(count($all_users_raw) > 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">Can Manage</th>
                                    </tr>
                                </thead>
                                <tbody class="all_locations ">
                                    @foreach($all_users_raw as $key => $user_raw)
                                        @php
                                            $isEligible = isset($eligible_user_raw[$key]);
                                            $userData = $isEligible ? $eligible_user_raw[$key] : ['name' => $user_raw, 'current_case_type' => 'N/A', 'other_case_types' => []];
                                        @endphp

                                        <tr style="{{$isEligible ? '' : 'display:none'}}" class="{{$isEligible ? '' : 'eligible-hidden'}}">
                                            <td class="fw-semibold email">
                                                <input type="checkbox" name="caseHandalers[]" class="caseHandalers-input" value="{{ $key }}">
                                                {{ $userData['name'] }}
                                            </td>
                                            <td>
                                                @if ($isEligible)
                                                <div style="text-align: left !important;" >
                                                        {{-- <p class="m-0 fw-semibold" style="color: #249b91;">
                                                            {{ $userData['current_case_type'] }}
                                                        </p> --}}
                                                        @foreach ($userData['other_case_types'] as $other_case_type)
                                                            <p class="m-0" data-selected_case_id="{{json_encode($other_case_type['case_ids'])}}" >{{ $other_case_type['form_name'] }}</p>
                                                        @endforeach
                                                </div>        
                                                    @else
                                                <div style="text-align: center !important;">
                                                    <p class="m-0">-</p>

                                                </div>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach

                                </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>
                    <input type="text" hidden name="case_ids[]" class="case_ids_input">
                </div>
                <div class="modal-footer">
                    <div class="btn-group right">
                        <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 shareSearchInput = document.getElementById('shareCaseSearchInput');
        const rows = document.querySelectorAll('#share_case_responsibility tbody.all_locations tr');

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

@endsection
@section('top_bar_search')
<form method="get" class="form print-display-none header_search_bar">
    <div class="input-group form-group mb-3">
        <input type="text" class="form-control search-nearmiss" name="search" @if(request()->query('search'))
        value="{{request()->query('search')}}" @endif>
        <button type="submit" class="btn btn-info search_button"><i class="fa fa-search"></i></button>
    </div>
</form>

@endsection
@section('case_manager_tabs')

@endsection


@section('styles')
<link rel="stylesheet" href="{{asset('css/alertify.min.css')}}">
@endsection

@section('scripts')

<script src="{{ asset('admin_assets/tree_select/treeselect.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="{{ asset('admin_assets/file_pond/filepond.min.js') }}"></script>
<script src="{{ asset('admin_assets/file_pond/filepond.jquery.js') }}"></script>
<script>

$('.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
                    }
                }
            });
        function getQueryParam(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }
        const sites_params = getQueryParam("sites");
        // Tree structure start
        const options = @json($headOffice->getOrganisationTree());
        const domEl = document.querySelector('.treeselect')
        const treeselect = new Treeselect({
        parentHtmlContainer: domEl,
        value: sites_params != undefined ? sites_params.split(",") : [],
        options: options,
        alwaysOpen: false,
        appendToBody: true,
        listSlotHtmlComponent: null,
        disabled: false,
        emptyText: 'No data text',
        showCount:true,
        isGroupedValue:true,
        isIndependentNodes:true
        })
        let loc_params = [];
        treeselect.srcElement.addEventListener('input', (e) => {
            loc_params = e.detail
        })

        $(document).ready(function () {
        // Initialize Flatpickr instances
        

        let dateType = getQueryParam("date_type");   // single | multiple | range
        let dateValue = getQueryParam("date_value");

        $("#single_date").flatpickr({defaultDate: (dateType === "single" && dateValue) ? dateValue : null});
        $("#multiple_dates").flatpickr({
            mode: "multiple",
            dateFormat: "Y-m-d",
            defaultDate: (dateType === "multiple" && dateValue) ? dateValue.split(",") : null
        });
        console.log(dateType, dateValue);
        $("#date_range").flatpickr({
            mode: "range",
            defaultDate: (dateType === "range" && dateValue) 
            ? dateValue.split(" to ").map(d => d.trim()) 
            : null
        });

        // Handle dropdown change
        $("#date_type").change(function () {
            var selectedType = $(this).val();
            $("#single_date_wrapper, #multiple_dates_wrapper, #date_range_wrapper").hide();
            if (selectedType === "single") {
                $("#single_date_wrapper").show();
            } else if (selectedType === "multiple") {
                $("#multiple_dates_wrapper").show();
            } else if (selectedType === "range") {
                $("#date_range_wrapper").show();
            }
        });
    });

    // Initialize Date Range Picker
    let params = new URLSearchParams(window.location.search);





    $(document).ready(function () {
        $(".case-filter-checkbox").on("change", updateURL);
        $("#applyFilters").on("click", function () {
            updateURL();
            window.location.reload();
        });
        $("#clearFilters").on("click", clearFilters);
    });

    $('#searchSubmitButton').on('click', function (event) {
        event.preventDefault();
        updateURL(false,false);
        window.location.reload();
    });



    function updateURL(clearDates = false,is_clear_search = true) {
        let params = new URLSearchParams(window.location.search);
        // Remove previously set filter params to prevent duplicates
        params.delete("stages");
        params.delete("form");
        params.delete("status");
        params.delete("sharing");
        params.delete("awaiting");
        params.delete("case_tags");
        params.delete("loc_tags");
        params.delete("contact_tags");
        params.delete("sites");
        params.delete("case_investigator");
        params.delete("case_handler");
        params.delete("date_filter");
        params.delete("date_type");
        params.delete("date_value");
        params.delete("filter_type");
        params.delete("search");

        let selectedCategories = {};

        // Collect checked values
        $(".case-filter-checkbox:checked").each(function () {
            let category = $(this).data("category");
            let value = $(this).val();
            if (!selectedCategories[category]) {
                selectedCategories[category] = [];
            }
            selectedCategories[category].push(value);
        });

        let filterType = $("input[name='filter_type']:checked").val();
        let dateFilterShort = $('input[name="date_filter_short"]:checked').val();
        let search = $("#caseSearch").val();

        // Add selected checkboxes to URL
        Object.keys(selectedCategories).forEach(category => {
            if (selectedCategories[category].length > 0) {
                params.set(category, selectedCategories[category].join(",")); // Store as CSV
            }
        });

        // **Case Tags Filter**
        let caseTags = $(".case-tags").val();
        if (caseTags && caseTags.length > 0) {
            params.set("case_tags", caseTags.join(","));
        }
        let loc_tags = $(".loc-tags").val();
        if (loc_tags && loc_tags.length > 0) {
            params.set("loc_tags", loc_tags.join(","));
        }
        let contact_tags = $(".contact-tags").val();
        if (contact_tags && contact_tags.length > 0) {
            params.set("contact_tags", contact_tags.join(","));
        }

        // **Case Investigator Filter**
        let caseInvestigators = $(".case-investigator-select").val();
        if (caseInvestigators && caseInvestigators.length > 0) {
            params.set("case_investigator", caseInvestigators.join(","));
        }

        // **Case Handler Filter**
        let caseHandlers = $(".case-handler-select").val();
        if (caseHandlers && caseHandlers.length > 0) {
            params.set("case_handler", caseHandlers.join(","));
        }

        // **Sites Filter**
        if (loc_params && loc_params.length > 0) {
            params.set("sites", loc_params.join(","));
        }

        // **Date Filters**
        let dateFilter = $("#dateFilter").val();
        let dateType = $("#date_type").val();
        let dateValue = "";

        if (dateType === "single") {
            dateValue = $("#single_date").val();
        } else if (dateType === "multiple") {
            dateValue = $("#multiple_dates").val();
        } else if (dateType === "range") {
            dateValue = $("#date_range").val();
        }

        if (dateFilter) params.set("date_filter", dateFilter);
        if (dateType) params.set("date_type", dateType);
        if (dateValue) params.set("date_value", dateValue);

        if(is_clear_search == false){
            if (filterType) params.set("filter_type", filterType);
            if (search) params.set("search", search);
            if (dateFilterShort) params.set("date_filter_short", dateFilterShort);
        }


        // Update URL
        params.set('user',true);
        window.history.replaceState({}, "", "?" + params.toString());
}



    function clearFilters() {
        let params = new URLSearchParams(window.location.search);
        
        // Remove all filter parameters
        params.delete("stages");
        params.delete("form");
        params.delete("status");
        params.delete("sharing");
        params.delete("awaiting");
        params.delete("case_tags");
        params.delete("loc_tags");
        params.delete("contact_tags");
        params.delete("sites");
        params.delete("case_investigator");
        params.delete("date_filter");
        params.delete("date_type");
        params.delete("date_value");
        params.delete("filter_type");
        params.delete("search");

        // Clear all checkboxes
        $(".case-filter-checkbox").prop("checked", false);

        // Clear case tags select
        $(".select2").val(null).trigger("change"); 

        // Clear sites select
        $(".treeselect").val(null).trigger("change");

        // Clear date inputs
        $("#single_date").val("");
        $("#multiple_dates").val("");
        $("#date_range").val("");

        // Reset the URL and reload
        window.history.replaceState({}, "", window.location.pathname);
        window.location.reload();
    }

</script>

<script src="{{asset('admin_assets/js/view_case.js')}}"></script>
<script src="{{asset('js/alertify.min.js')}}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var placeholderLinks = document.querySelectorAll('.placeholder-link');
        
        placeholderLinks.forEach(function(link) {
            link.addEventListener('click', function(event) {
                event.preventDefault();
            //     alert('Coming Soon');
            });
        });
    });
</script>
<script>
    $('.showAllUsersBtn').on('click', function() {
    const table = $(this).parent().siblings().find('table');
    table.find('.eligible-hidden').fadeToggle();
    if($(this).text() == 'Show Less Users') {
        $(this).text('Show All Users');
    } else {
        $(this).text('Show Less Users');
    }
})


    let searchTimeout;
    let lastSearchValue = '';

    function filterCases() {
        var query = $('#caseSearch').val().toLowerCase();
        var anyVisible = false;

        // Show/hide clear button
        if (query.length > 0) {
            $('#clearSearch').show();
        } else {
            $('#clearSearch').hide();
        }

        $('.case-item').each(function () {
            var text = $(this).text().toLowerCase();
            var isMatch = text.indexOf(query) !== -1;
            $(this).toggle(isMatch);
            if (isMatch) anyVisible = true;
        });

        // Show or hide the search button based on visibility
        if (query.length > 3) {
            $('#searchSubmitButton').show();
        } else {
            $('#searchSubmitButton').hide();
        }

        // Handle URL parameter updates with debouncing
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.has('search') && query.length === 0) {
            // Clear the timeout if it exists
            if (searchTimeout) {
                clearTimeout(searchTimeout);
            }
            
            // Set a timeout to reload the page after 1 second of no typing
            searchTimeout = setTimeout(function() {
                urlParams.delete('search');
                const newUrl = window.location.pathname + '?' + urlParams.toString();
                window.location.href = newUrl;
                $('#searchSubmitButton').show();
            }, 1000);
        } else if (searchTimeout) {
            // Clear the timeout if user starts typing again
            clearTimeout(searchTimeout);
            searchTimeout = null;
        }
    }

    $('#caseSearch').on('input', function() {
        var currentValue = $(this).val();
        
        // If user is typing, clear any existing timeout
        if (searchTimeout) {
            clearTimeout(searchTimeout);
            searchTimeout = null;
        }
        
        filterCases();
        lastSearchValue = currentValue;
    });

    // Clear search button functionality
    $('#clearSearch').on('click', function() {
        $('#caseSearch').val('').focus();
        filterCases();
        
        // Immediately reload the page when clear button is clicked
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.has('search')) {
            urlParams.delete('search');
            const newUrl = window.location.pathname + '?' + urlParams.toString();
            window.location.href = newUrl;
        }
    });

    $('#caseSearchForm').on('submit', function () {
    $('#searchSubmitButton').prop('disabled', true).text('Searching...');
    $('.line-reloading').fadeIn();
    $('.no-case-hide').fadeOut();
});

    
    $(document).ready(function(){
        // Initialize clear button visibility
        var initialSearchValue = $('#caseSearch').val();
        if (initialSearchValue && initialSearchValue.length > 0) {
            $('#clearSearch').show();
        }

        // Keyboard shortcut for search focus (Ctrl+K)
        $(document).on('keydown', function(e) {
            // Check if Ctrl+K is pressed and not already in a form input
            if (e.ctrlKey && e.key === 'k' && !$(e.target).is('input, textarea, select')) {
                e.preventDefault();
                $('#caseSearch').focus();
            }
        });

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

                // Side bar Close =============
                // var sidebar = $('#sidebar');
                // const imgTag = $('#side-img');
                // const imgPath = imgTag.attr('src').replace('chevron-left-double','chevron-right-double');
                // imgTag.attr('src',imgPath)
                // sidebar.animate({ width: 0,opacity:0 }, 300);

    
    })
    function approved(val)
    {
        document.getElementById('is_approved').value = val;
    }

    $('#share-case-btn').on('click',function(){
        $('#transfer_case_form').attr('action','{{route('case_manager.share_case_responsibity_bulk')}}')
    })
    $('#transfer-case-btn').on('click',function(){
        $('#transfer_case_form').attr('action','{{route('case_manager.transfer_case_responsibity_bulk')}}')
    })

    $('#export-case-btn').on('click',function(){
        $('#export_bulk').submit();
    })

    function highlightSearchTerm(containerSelector, searchTerm) {
    if (!searchTerm) return; // Exit if no term is provided

    $(containerSelector).each(function () {
        let html = $(this).html();
        const regex = new RegExp(`(${searchTerm})`, 'gi');
        html = html.replace(regex, '<span class="highlighted-search">$1</span>');
        $(this).html(html);
    });
    }

    $(document).ready(function () {
    // Get the search parameter from URL
    const urlParams = new URLSearchParams(window.location.search);
    const searchTerm = urlParams.get('search');
    const filterType = urlParams.get('filter_type');

    if (searchTerm && filterType == 'summary') {
        highlightSearchTerm('.cm_description_tab', searchTerm);
    }

    if(searchTerm){
        var sidebar = $('#sidebar');
        const imgTag = $('#side-img');
        if (sidebar.width() > 0) {
            const imgPath = imgTag.attr('src').replace('chevron-left-double', 'chevron-right-double');
            imgTag.attr('src', imgPath)
            sidebar.animate({
                width: 0,
                opacity: 0
            }, 300);
        }
    }
});


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