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



@section('content')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link href="{{ asset('admin_assets/file_pond/filepond.min.css') }}" rel="stylesheet" />
    <style>
        .filepond--credits{
            display: none !important;
        }
        .select2-modal-zindex {
            z-index: 1 !important;
        }
        .sub-header {
            display: none;
        }

        .custom-new-bg {
            background: #e8ecf5;
        }

        .main-container {
            min-height: 93vh;
        }
        
        .button-group {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .button-group .primary-btn {
            margin: 0;
        }

        /* From Uiverse.io by Na3ar-17 */
        .radio-input {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .radio-input * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        .radio-input label {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 0px 20px;
            width: 220px;
            cursor: pointer;
            height: 30px;
            position: relative;
        }

        .radio-input label::before {
            position: absolute;
            content: "";
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 220px;
            height: 45px;
            z-index: -1;
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            border-radius: 10px;
            border: 2px solid transparent !important;
        }

        .radio-input label:hover::before {
            transition: all 0.2s ease;
            background: #2a2e3c0b !important;
        }

        .radio-input .label:has(input:checked)::before {
            background-color: #e8ecf5;
            border-color: #435dd8 !important;
            height: 50px;

        }

        .radio-input .label .text {
            color: #64676a;
        }

        .radio-input .label input[type="radio"] {
            background-color: #e8ecf5;
            appearance: none;
            width: 17px;
            height: 17px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .radio-input .label input[type="radio"]:checked {
            background-color: #435dd8;
            -webkit-animation: puls 0.7s forwards;
            animation: pulse 0.7s forwards;
        }

        .radio-input .label input[type="radio"]:before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
            background-color: #fff;
            transform: scale(0);
        }

        .radio-input .label input[type="radio"]:checked::before {
            transform: scale(1);
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
            }

            70% {
                box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
            }
        }

        .card {
            background: #e8ecf5;
        }

        .card-header {
            background: #e8ecf5;
            border-bottom: none;
        }


        .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;
            bottom: 130%;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
            font-size: 14px;
            font-family: Arial, sans-serif;
            white-space: normal;
            border: 1px solid #ccc;
            z-index: 10000;
            opacity: 0;
            font-weight: 0 !important;
            transition: opacity 0.2s ease-in-out;
            word-wrap: break-word;
        }

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

        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }

        .radio-input label {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            padding: 5px 0;
        }

        .radio-input .label input {
            margin-right: 10px;
            accent-color: #2bafa5;
        }

        .text {
            font-size: 16px;
            line-height: 1.4;
        }


        .gap-2 {
            gap: 10px;
        }
        [data-status="hidden"] {
            display: none !important;
        }
        .search-container {
            position: relative;
            width: 300px;
            padding-bottom: 10px;
            border: 1px #64676a;
        }

        .search-input {
            width: 100%;
            padding: 10px 40px;
            border-radius: 100px;
            border: 1px solid #777777 !important;
            border: none;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            outline: none;
            font-size: 14px;
            background-color: white;
        }

        .search-icon {
            position: absolute;
            left: 15px;
            top: 40%;
            transform: translateY(-50%);
            color: #666;
            pointer-events: none;
        }

    </style>
    @php
        $case_involved_locations = isset($case) ? $case->link_case_with_form->getInvolvedLocations() : collect();
        $involved_location_ids_sorted = isset($case->link_case_with_form) && $case->link_case_with_form->hide == 0 && isset($case_involved_locations) ? $case_involved_locations->pluck('id')->toArray() : [];
    @endphp
    <div class="container-fluid custom-new-bg p-3 main-container">
        <div class="row mb-3">
            <div class="col-12 d-flex justify-content-end">
                <button onclick="window.close()" class="btn btn-outline-secondary">
                    <i class="fa-solid fa-arrow-left me-2"></i>Back
                </button>
            </div>
        </div>
        
        <div class="row gap-3">
            <div class="col-2 bg-white ms-5 rounded" style="min-height: 90vh;">
                <div>
                    <h5 class="mt-2 mb-0">{{isset($new_task) ? 'Edit task' : 'Create new task'}}</h5>
                </div>
                <p class="lead" style="font-size: 14px;">Easily assign tasks based on your needs.</p>
                <div>
                    <!-- From Uiverse.io by Na3ar-17 -->
                    <div class="radio-input">
                        @if (isset($case))
                            <label class="label">
                                <input type="radio" id="value-1" checked="" name="case_type" value="case_task" {{isset($new_task) ? 'disabled' : ''}} style="cursor: not-allowed;background-color: {{isset($new_task) ? '#97a3da' : ''}};" {{isset($new_task) && isset($new_task->case_id) && !isset($new_task->shared_with) ? 'checked' : ''}} />
                                <p class="text">For investigator of this case
                                    <span class="tooltip-container">
                                        <svg style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round">
                                            <circle cx="12" cy="12" r="10" />
                                            <line x1="12" y1="8" x2="12" y2="8" />
                                            <line x1="12" y1="12" x2="12" y2="16" />
                                        </svg>
                                        <span class="tooltip-text">
                                            Create a task for the investigation team for this case. Only individuals with
                                            access to this case can view the task.
                                        </span>
                                    </span>
                                </p>
                            </label>
                        @endif
                        <label class="label">
                            <input type="radio" id="value-3" name="case_type" value="sites"
                                {{ isset($case) ? '' : 'checked' }} {{isset($new_task) ? 'disabled' : ''}} style="background-color: {{isset($new_task) ? '#97a3da' : ''}};" {{isset($new_task) && isset($new_task->shared_with) && $new_task->shared_with == 'location' ? 'checked' : ''}} />
                            <p class="text">Send to site
                                <span class="tooltip-container">
                                    <svg style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <circle cx="12" cy="12" r="10" />
                                        <line x1="12" y1="8" x2="12" y2="8" />
                                        <line x1="12" y1="12" x2="12" y2="16" />
                                    </svg>
                                    <span class="tooltip-text">
                                        Send this task to one of your sites. This task will be visible to all users logged
                                        into the site account.
                                    </span>
                                </span>
                            </p>
                        </label>
                        @if(!request()->query('loc_id'))
                            <label class="label pe-0 w-100">
                                <input type="radio" id="value-2" name="case_type" value="user" {{isset($new_task) ? 'disabled' : ''}} style="background-color: {{isset($new_task) ? '#97a3da' : ''}};" {{isset($new_task) && isset($new_task->shared_with) && $new_task->shared_with == 'user' ? 'checked' : ''}} />
                                <p class="text" style="line-height: 1;font-size:16px; width: 70%;">
                                    {{!isset($case) ? 'Send a task to another company user' : 'Send a task to a user outside this case'}}
                                    <span class="tooltip-container">
                                        <svg style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round">
                                            <circle cx="12" cy="12" r="10" />
                                            <line x1="12" y1="8" x2="12" y2="8" />
                                            <line x1="12" y1="12" x2="12" y2="16" />
                                        </svg>
                                        <span class="tooltip-text">
                                            {{!isset($case) ? 'Assign task to another user in your company' : 'Assign this task to a user who is not part of the investigation team for this case.'}}
                                        </span>
                                    </span>
                                </p>
                            </label>
                        @endif
                    </div>

                    <div id="task-form-wrapper" style="{{ request()->has('loc_id') ? '' : 'display: none;' }} {{isset($new_task) && isset($new_task->shared_with) ? 'display: block;' : ''}}">
                        <hr>
                        <div>
                            <button data-bs-toggle="modal" data-bs-target="#single-task"
                                class="light-btn w-100 d-flex justify-content-center align-items-center gap-2">
                                Single task
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M8 8V7M8 12.5V11.5M8 17V16M6.8 20H17.2C18.8802 20 19.7202 20 20.362 19.673C20.9265 19.3854 21.3854 18.9265 21.673 18.362C22 17.7202 22 16.8802 22 15.2V8.8C22 7.11984 22 6.27976 21.673 5.63803C21.3854 5.07354 20.9265 4.6146 20.362 4.32698C19.7202 4 18.8802 4 17.2 4H6.8C5.11984 4 4.27976 4 3.63803 4.32698C3.07354 4.6146 2.6146 5.07354 2.32698 5.63803C2 6.27976 2 7.11984 2 8.8V15.2C2 16.8802 2 17.7202 2.32698 18.362C2.6146 18.9265 3.07354 19.3854 3.63803 19.673C4.27976 20 5.11984 20 6.8 20Z"
                                        stroke="black" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg>
                            </button>
                        </div>
                        <div class="mt-2" data-toggle='tooltip' title='Create a mission with multiple tasks  Coming Soon'>
                            <button class="light-btn w-100 d-flex justify-content-center align-items-center gap-2">
                                Create Mission
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M12.9996 10.9999L3.49964 20.4999M14.0181 3.53838C15.2361 4.34658 16.4068 5.29941 17.5008 6.3934C18.6042 7.49683 19.564 8.67831 20.3767 9.90766M9.2546 7.89605L6.37973 6.93776C6.04865 6.8274 5.68398 6.89763 5.41756 7.12306L2.56041 9.54065C1.97548 10.0356 2.14166 10.9775 2.86064 11.2424L5.56784 12.2398M11.6807 18.3524L12.6781 21.0596C12.943 21.7786 13.8849 21.9448 14.3798 21.3599L16.7974 18.5027C17.0228 18.2363 17.0931 17.8716 16.9827 17.5405L16.0244 14.6657M19.3482 2.27063L14.4418 3.08838C13.9119 3.17668 13.426 3.43709 13.0591 3.82932L6.446 10.8985C4.73185 12.7308 4.77953 15.5924 6.55378 17.3667C8.32803 19.1409 11.1896 19.1886 13.022 17.4744L20.0911 10.8614C20.4834 10.4944 20.7438 10.0085 20.8321 9.47869L21.6498 4.57222C21.8754 3.21858 20.7019 2.04503 19.3482 2.27063Z"
                                        stroke="black" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg>
                            </button>
                        </div>
                    </div>

                    @if (isset($case))
                        <p class="py-2 text-muted">Case ID: #{{$case->id}}</p>
                    @endif
                </div>

                <hr>
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h6 class="mb-0" style="font-size:13px;font-weight:600;">Saved Templates</h6>
                    <button type="button" class="btn btn-primary px-2 py-0"
                        style="font-size:12px;" data-bs-toggle="modal" data-bs-target="#create-template-modal"
                        title="Create new template">
                        <i class="fa-solid fa-plus"></i> New
                    </button>
                </div>
                <div id="templates-list" style="max-height:55vh;overflow-y:auto;">
                    <p class="text-muted" style="font-size:12px;" id="no-templates-msg">Loading...</p>
                </div>
            </div>
            <div class="col bg-white rounded pt-3 pb-3">
            @if (
    (isset($case) && !isset($new_task)) || 
    (isset($new_task) && is_null($new_task->shared_with))
)
                    <div class="case_task-tab" id="case_task">
                        <form action="{{ route('case_manager.save_task_independent') }}" method="post" multifile
                            enctype="multipart/form-data">
                            @csrf
                            @include('head_office.case_manager.notes.create_task_component', [
                                'type' => 'case_task',
                            ])
                        </form>
                    </div>
                @endif
                <div class="location-tab" id="sites" style="{{ isset($case) ? 'display: none;' : '' }} {{( !isset($new_task)&& !isset($case) || (isset($new_task) && isset($new_task->shared_with) && $new_task->shared_with == 'location')) ? 'display: block;' : 'display: none;'}}">
                    <div class="search-container">
                        <div class="search-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#8e8e93" viewBox="0 0 16 16">
                                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                            </svg>
                        </div>
                        <input type="text" class="search-input" placeholder="Search Sites" id="locationSearchInput" onkeyup="searchLocations()">
                    </div>
                    @if (isset($case_involved_locations) && count($case_involved_locations) > 0)
                        @foreach ($case_involved_locations as $ho_loc)
                            @php
                                // Skip if this location is already in preselected (task-assigned) locations
                                $isTaskAssigned = request()->query('loc_id') == $ho_loc->head_office_location->id || (isset($new_task) && $new_task->loc_allocations->contains('ho_location_id', $ho_loc->head_office_location->id));
                            @endphp
                            @if (!$isTaskAssigned)
                            <!-- From Uiverse.io by 00Kubi -->
                            <div class="d-flex align-items-center gap-2" >
                                <label class="cyber-checkbox">
                                    <input type="checkbox" {{in_array($ho_loc->id, $involved_location_ids_sorted) ? 'data-case-loc=true' : ''}} {{in_array($ho_loc->head_office_location->id, $involved_location_ids_sorted) ? 'checked' : ''}} value="{{ $ho_loc->head_office_location->id }}" name="locations[]" class="involved-location-checkbox"
                                         />
                                    <span class="cyber-checkbox__mark">
                                        <div class="cyber-checkbox__box">
                                            <svg class="cyber-checkbox__check" viewBox="0 0 12 10">
                                                <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                            </svg>
                                        </div>
                                    </span>
                                </label>

                                <div class="card w-100 mb-2">
                                    <div class="card-head" style="display: flex; width: 100%; justify-content: space-between;">
                                        <div class="d-flex align-items-center">
                                            <h5 class="card-header" style="color: #435DD8;font-size: 16px;"> <i
                                                    class="fa-solid fa-location-dot" style="font-size: 14px;"></i>
                                                {{ $ho_loc->username }}</h5>
                                            @if (isset($ho_loc->location_type))
                                                <div class="border border-2 p-1 mt-0 rounded"
                                                    style="width: fit-content;font-size:10px;">
                                                    {{ $ho_loc->location_type->name }}
                                                </div>
                                            @endif
                                        </div>
                                        <div>
                                            @if ($ho_loc->id == $case->link_case_with_form->location_id)
                                            <span style="margin: 10px;" class="badge bg-success">Reported From</span>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <h5 class="card-title mb-3">
                                            @if (isset($ho_loc->location_code))
                                                #{{ $ho_loc->location_code . ' | ' }}
                                            @endif
                                            {{ $ho_loc->trading_name }}
                                        </h5>
                                        <div>
                                            <img src="{{ asset('admin_assets/svgs/address.svg') }}" alt="address">
                                            {{ $ho_loc->full_address }}
                                        </div>
                                        <div>
                                            <img src="{{ asset('admin_assets/svgs/email.svg') }}" alt="email">
                                            {{ $ho_loc->email }}
                                        </div>
                                        <div>
                                            <img src="{{ asset('admin_assets/svgs/phone.svg') }}" alt="phone">
                                            {{ $ho_loc->telephone_no }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif
                        @endforeach
                    @endif

                    @if (isset($head_office->locations) && count($head_office->locations) > 0)
                        @php
                            // Get IDs of already involved locations to filter them out
                            $involved_location_ids = isset($case_involved_locations) ? $case_involved_locations->pluck('id')->toArray() : [];
                            // Collect task-related preselected HO location ids 
                            $preselected_location_ids = [];
                            foreach ($head_office->locations as $ho_loc_pre) {
                                $isPreselected = request()->query('loc_id') == $ho_loc_pre->id || (isset($new_task) && $new_task->loc_allocations->contains('ho_location_id', $ho_loc_pre->id));
                                // Include preselected locations even if they are in involved locations (for task editing)
                                if ($isPreselected) {
                                    $preselected_location_ids[] = $ho_loc_pre->id;
                                }
                            }
                        @endphp
                        @if (!empty($preselected_location_ids))
                            @foreach ($head_office->locations as $ho_loc)
                                @if (in_array($ho_loc->id, $preselected_location_ids))
                                    <div class="d-flex align-items-center gap-2" data-status="visible"
                                        data-search-name="{{ strtolower($ho_loc->location->username) }}"
                                        data-search-trading-name="{{ strtolower($ho_loc->location->trading_name) }}">
                                        <label class="cyber-checkbox">
                                            <input type="checkbox" {{in_array($ho_loc->location->id, $involved_location_ids_sorted) ? 'data-case-loc=true' : ''}} value="{{ $ho_loc->id }}" name="locations[]" checked />
                                            <span class="cyber-checkbox__mark">
                                                <div class="cyber-checkbox__box">
                                                    <svg class="cyber-checkbox__check" viewBox="0 0 12 10">
                                                        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                                    </svg>
                                                </div>
                                            </span>
                                        </label>

                                        <div class="card w-100 mb-2">
                                            <div class="card-head" style="display: flex; width: 100%; justify-content: space-between;">
                                                <div class="d-flex align-items-center">
                                                    <h5 class="card-header" style="color: #435DD8;font-size: 16px;"> <i
                                                            class="fa-solid fa-location-dot" style="font-size: 14px;"></i>
                                                        {{ $ho_loc->location->username }}</h5>
                                                    @if (isset($ho_loc->location->location_type))
                                                        <div class="border border-2 p-1 mt-0 rounded"
                                                            style="width: fit-content;font-size:10px;">
                                                            {{ $ho_loc->location->location_type->name }}
                                                        </div>
                                                    @endif
                                                </div>
                                                <div>
                                                    @if (isset($case) && isset($case->link_case_with_form) && $ho_loc->location->id == $case->link_case_with_form->location_id)
                                                    <span style="margin: 10px;" class="badge bg-success">Reported From</span>
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="card-body">
                                                <h5 class="card-title mb-3">
                                                    @if (isset($ho_loc->location->location_code))
                                                        #{{ $ho_loc->location->location_code . ' | ' }}
                                                    @endif
                                                    {{ $ho_loc->location->trading_name }}
                                                </h5>
                                                <div>
                                                    <img src="{{asset('admin_assets/svgs/address.svg')}}" alt="address">
                                                    {{ $ho_loc->location->full_address }}
                                                </div>
                                                <div>
                                                    <img src="{{asset('admin_assets/svgs/email.svg')}}" alt="email">
                                                    {{ $ho_loc->location->email }}
                                                </div>
                                                <div>
                                                    <img src="{{asset('admin_assets/svgs/phone.svg')}}" alt="phone">
                                                    {{ $ho_loc->location->telephone_no }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        @endif
                        <div style="{{isset($case) ? 'display: flex;' : 'display: none;'}} justify-content: center;" class="text-center mt-3 mb-3 button-group">
                            <button type="button" class="primary-btn" id="showAllSitesBtn"
                                onclick="toggleAllSites()">
                                <i class="fa-solid fa-eye"></i> Show Other Sites
                            </button>
                        </div>
                        <div id="allSitesContainer" style="{{isset($case) ? 'display: none;' : ''}}">
                            @php
                                if($profile->super_access == 1){
                                    $assigned_locations = $head_office->locations;
                                }else{
                                    $assigned_locations = $head_office_user->get_assigned_locs();
                                }
                            @endphp
                            @foreach ($assigned_locations as $ho_loc)
                                @if (!in_array($ho_loc->id, $preselected_location_ids) && !in_array($ho_loc->location->id, $involved_location_ids))
                                    <div class="d-flex align-items-center gap-2" data-status="visible"
                                        data-search-name="{{ strtolower($ho_loc->location->username) }}"
                                        data-search-trading-name="{{ strtolower($ho_loc->location->trading_name) }}">
                                        <label class="cyber-checkbox">
                                            <input type="checkbox" value="{{ $ho_loc->id }}" name="locations[]"
                                                @if (request()->query('loc_id') == $ho_loc->id || (isset($new_task) && $new_task->loc_allocations->contains('ho_location_id', $ho_loc->id))) checked @endif />
                                            <span class="cyber-checkbox__mark">
                                                <div class="cyber-checkbox__box">
                                                    <svg class="cyber-checkbox__check" viewBox="0 0 12 10">
                                                        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                                    </svg>
                                                </div>
                                            </span>
                                        </label>

                                        <div class="card w-100 mb-2">
                                            <div class="d-flex align-items-center">
                                                <h5 class="card-header" style="color: #435DD8;font-size: 16px;"> <i
                                                        class="fa-solid fa-location-dot" style="font-size: 14px;"></i>
                                                    {{ $ho_loc->location->username }}</h5>
                                                @if (isset($ho_loc->location->location_type))
                                                    <div class="border border-2 p-1 mt-0 rounded"
                                                        style="width: fit-content;font-size:10px;">
                                                        {{ $ho_loc->location->location_type->name }}
                                                    </div>
                                                @endif
                                            </div>

                                            <div class="card-body">
                                                <h5 class="card-title mb-3">
                                                    @if (isset($ho_loc->location->location_code))
                                                        #{{ $ho_loc->location->location_code . ' | ' }}
                                                    @endif
                                                    {{ $ho_loc->location->trading_name }}
                                                </h5>
                                                <div>
                                                    <img src="{{asset('admin_assets/svgs/address.svg')}}" alt="address">
                                                    {{ $ho_loc->location->full_address }}
                                                </div>
                                                <div>
                                                    <img src="{{asset('admin_assets/svgs/email.svg')}}" alt="email">
                                                    {{ $ho_loc->location->email }}
                                                </div>
                                                <div>
                                                    <img src="{{asset('admin_assets/svgs/phone.svg')}}" alt="phone">
                                                    {{ $ho_loc->location->telephone_no }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>

                    @endif
                </div>




                <div class="user-tab" id="user" style="display: none; {{isset($new_task) && isset($new_task->shared_with) && $new_task->shared_with == 'user' ? 'display: block;' : 'display: none;'}}" >
                    <div class="search-container">
                        <div class="search-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#8e8e93" viewBox="0 0 16 16">
                                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                            </svg>
                        </div>
                        <input type="text" class="search-input" placeholder="Search Head Office Users" id="userSearchInput" onkeyup="searchUsers()">
                    </div>
                
                    @if (isset($head_office->users) && count($head_office->users) > 0)
                        @php
                            $selectedUsers = collect();
                            $unselectedUsers = collect();
                            
                            foreach ($head_office->users as $ho_user) {
                                $isSelected = isset($new_task) && isset($new_task->ho_allocations) && $new_task->ho_allocations->contains('head_office_user_id', $ho_user->id);
                                if ($isSelected) {
                                    $selectedUsers->push($ho_user);
                                } else {
                                    $unselectedUsers->push($ho_user);
                                }
                            }
                        @endphp

                        <!-- Selected Users Section -->
                        @if ($selectedUsers->count() > 0)
                            <div class="selected-users-section mb-3">
                                <h6 class="text-success mb-2">
                                    <i class="fa-solid fa-check-circle me-2"></i>
                                    Selected Users ({{ $selectedUsers->count() }})
                                </h6>
                                @foreach ($selectedUsers as $ho_user)
                                    <div class="d-flex align-items-center gap-2" data-status="visible" data-search-name="{{ strtolower($ho_user->user->name) }}">
                                        <label class="cyber-checkbox">
                                            <input type="checkbox" value="{{ $ho_user->id }}" name="users[]" checked />
                                            <span class="cyber-checkbox__mark">
                                                <div class="cyber-checkbox__box">
                                                    <svg class="cyber-checkbox__check" viewBox="0 0 12 10">
                                                        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                                    </svg>
                                                </div>
                                            </span>
                                        </label>

                                        <div class="card w-100 mb-2">
                                            <div class="d-flex align-items-center">
                                                <h5 class="card-header" style="color: #435DD8;font-size: 16px;"> <i
                                                        class="fa-solid fa-user" style="font-size: 14px;"></i>
                                                    {{ \Illuminate\Support\Str::title($ho_user->user->name) }}</h5>
                                            </div>

                                            <div class="card-body">

                                                <div class="d-flex align-items-start gap-2">
                                                    @if (isset($ho_user->user->logo))
                                                        <img src="{{ $ho_user->user->logo }}" class="rounded-circle"
                                                            style="width: 35px;height:35px;" alt="png_img">
                                                    @endif
                                                    <h5 class="card-title mb-3">
                                                        {{ \Illuminate\Support\Str::title($ho_user->user->name) }}
                                                    </h5>
                                                    @if ($ho_user->user->getHeadOfficeUser() != null)
                                                        <div class="border border-2 p-1 mt-0 rounded"
                                                            style="width: fit-content;font-size:10px;">
                                                            {{ $ho_user->user->getHeadOfficeUser()->position }}
                                                        </div>
                                                    @endif

                                                </div>
                                                <div>
                                                    <img src="{{asset('admin_assets/svgs/address.svg')}}" alt="address">
                                                    {{ $ho_user->location ?? 'Not available' }}
                                                </div>
                                                <div>
                                                    <img src="{{asset('admin_assets/svgs/email.svg')}}" alt="email">
                                                    {{ $ho_user->user->email }}
                                                </div>
                                                <div>
                                                    <img src="{{asset('admin_assets/svgs/phone.svg')}}" alt="phone">
                                                    {{ $ho_user->user->mobile_no }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <!-- Divider -->
                            @if ($unselectedUsers->count() > 0)
                                <div class="divider-section my-4">
                                    <hr class="border-2 border-secondary">
                                    <div class="text-center">
                                        <span class="bg-white px-3 text-muted">Available Users</span>
                                    </div>
                                </div>
                            @endif
                        @endif

                        <!-- Unselected Users Section -->
                        @if ($unselectedUsers->count() > 0)
                            <div class="unselected-users-section">
                                @if ($selectedUsers->count() == 0)
                                    <h6 class="text-muted mb-2">
                                        <i class="fa-solid fa-users me-2"></i>
                                        Available Users ({{ $unselectedUsers->count() }})
                                    </h6>
                                @endif
                                @foreach ($unselectedUsers as $ho_user)
                                    <div class="d-flex align-items-center gap-2" data-status="visible" data-search-name="{{ strtolower($ho_user->user->name) }}">
                                        <label class="cyber-checkbox">
                                            <input type="checkbox" value="{{ $ho_user->id }}" name="users[]" />
                                            <span class="cyber-checkbox__mark">
                                                <div class="cyber-checkbox__box">
                                                    <svg class="cyber-checkbox__check" viewBox="0 0 12 10">
                                                        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                                    </svg>
                                                </div>
                                            </span>
                                        </label>

                                        <div class="card w-100 mb-2">
                                            <div class="d-flex align-items-center">
                                                <h5 class="card-header" style="color: #435DD8;font-size: 16px;"> <i
                                                        class="fa-solid fa-user" style="font-size: 14px;"></i>
                                                    {{ \Illuminate\Support\Str::title($ho_user->user->name) }}</h5>
                                            </div>

                                            <div class="card-body">

                                                <div class="d-flex align-items-start gap-2">
                                                    @if (isset($ho_user->user->logo))
                                                        <img src="{{ $ho_user->user->logo }}" class="rounded-circle"
                                                            style="width: 35px;height:35px;" alt="png_img">
                                                    @endif
                                                    <h5 class="card-title mb-3">
                                                        {{ \Illuminate\Support\Str::title($ho_user->user->name) }}
                                                    </h5>
                                                    @if ($ho_user->user->getHeadOfficeUser() != null)
                                                        <div class="border border-2 p-1 mt-0 rounded"
                                                            style="width: fit-content;font-size:10px;">
                                                            {{ $ho_user->user->getHeadOfficeUser()->position }}
                                                        </div>
                                                    @endif

                                                </div>
                                                <div>
                                                    <img src="{{asset('admin_assets/svgs/address.svg')}}" alt="address">
                                                    {{ $ho_user->location ?? 'Not available' }}
                                                </div>
                                                <div>
                                                    <img src="{{asset('admin_assets/svgs/email.svg')}}" alt="email">
                                                    {{ $ho_user->user->email }}
                                                </div>
                                                <div>
                                                    <img src="{{asset('admin_assets/svgs/phone.svg')}}" alt="phone">
                                                    {{ $ho_user->user->mobile_no }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    @endif
                </div>
            </div>
        </div>
    </div>


    {{-- ====== CREATE TEMPLATE MODAL (fullscreen, all task fields) ====== --}}
    <div class="modal fade" id="create-template-modal" tabindex="-1" aria-labelledby="createTemplateLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content rounded-4 border-0 py-0 m-2">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="createTemplateLabel">
                        <i class="fa-solid fa-layer-group me-2" style="color:#435dd8;"></i>Save as Template
                    </h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" style="overflow-y:auto;">
                    {{-- Template name --}}
                    <input type="hidden" id="tpl_editing_id" value="">
                    <div class="mb-3" style="max-width:500px;">
                        <label class="text-muted fw-semibold">Template Name <span class="text-danger">*</span></label>
                        <input type="text" id="tpl_template_name" class="form-control form-control-sm mt-1"
                            placeholder="e.g. Standard Site Audit" maxlength="255">
                        <small id="tpl_name_error" class="text-danger"></small>
                    </div>
                    <hr>

                    {{-- Title --}}
                    <div class="mb-3" style="max-width:600px;">
                        <label class="text-muted">Title</label>
                        <input type="text" id="tpl_task_name" class="form-control form-control-sm mt-1 px-2 border" maxlength="250" placeholder="Task title">
                    </div>

                    {{-- Description --}}
                    <div class="mb-3">
                        <label class="text-muted">Description</label>
                        <textarea id="tpl_task_description" class="tinymce-inline border form-control mt-1" style="min-height:170px;"></textarea>
                    </div>
                    <hr>

                    {{-- Priority + Repeat + Assign to + Approval --}}
                    <div class="row gap-lg-2 gap-xl-3 mb-3">

                        {{-- Priority --}}
                        <div class="mt-2 col-6 col-md-5 col-lg-3 col-xl-2">
                            <label class="text-muted d-flex align-items-center gap-2">Priority <i class="fa-regular fa-circle-check"></i></label>
                            <div class="mt-2 priority-wrap" style="width:200px;">
                                <div class="radio-group">
                                    <input class="radio-input" value="low" name="tpl_priority" id="tpl_radio1" type="radio" checked>
                                    <label class="radio-label low" for="tpl_radio1"><span class="radio-inner-circle"></span>Low</label>
                                    <input class="radio-input" value="medium" name="tpl_priority" id="tpl_radio2" type="radio">
                                    <label class="radio-label medium" for="tpl_radio2"><span class="radio-inner-circle"></span>Medium</label>
                                    <input class="radio-input" value="high" name="tpl_priority" id="tpl_radio3" type="radio">
                                    <label class="radio-label high" for="tpl_radio3"><span class="radio-inner-circle"></span>High</label>
                                    <input class="radio-input" value="urgent" name="tpl_priority" id="tpl_radio4" type="radio">
                                    <label class="radio-label urgent" for="tpl_radio4"><span class="radio-inner-circle"></span>Urgent</label>
                                </div>
                            </div>
                        </div>

                        {{-- Repeat --}}
                        <div class="mt-2 col-6 col-md-5 col-lg-3 col-xl-2">
                            <label class="text-muted d-flex align-items-center gap-2">Repeat <i class="fa-solid fa-repeat" style="font-size:14px;"></i></label>
                            <select class="form-control text-muted mt-1" style="width:200px;" id="tpl_repeat">
                                <option value="does_not_repeat" selected>Does not repeat</option>
                                <option value="daily">Daily</option>
                                <option value="weekly">Weekly</option>
                                <option value="monthly">Monthly</option>
                                <option value="annually">Annually</option>
                                <option value="weekday">Every weekday (Monday to Friday)</option>
                                <option value="custom">Custom</option>
                                <optgroup label="Duration">
                                    <option value="until_case_closed">Until case closed</option>
                                    <option value="repeats_certain_times">Certain number of times</option>
                                    <option value="repeats_until_date">Repeat until</option>
                                </optgroup>
                            </select>
                            <div style="width:200px;display:none;" id="tpl_custom_wrapper">
                                <hr>
                                <label class="text-muted">Custom</label>
                                <input type="text" id="tpl_multiDatePicker" class="form-control text-muted bg-white mb-2" placeholder="Pick dates">
                                <input type="number" id="tpl_custom_frequency" min="1" value="1" class="form-control text-muted mb-2" placeholder="Frequency">
                                <input type="date" id="tpl_until_date" class="form-control text-muted">
                            </div>
                        </div>

                        {{-- Assign to --}}
                        <div class="mt-2 col-6 col-md-5 col-lg-3 col-xl-2">
                            <label class="text-muted d-flex align-items-center gap-2">Assign to <i class="fa-regular fa-user" style="font-size:15px;"></i></label>
                            <select class="form-control text-muted mt-2 mb-2" style="width:200px;" id="tpl_assign_to">
                                <option value="everyone" selected>Everyone</option>
                                <option value="user_types">Certain user types</option>
                                <option value="specific_profiles">User profiles</option>
                            </select>
                            <div id="tpl_specific_users_wrapper" style="display:none;">
                                <select name="tpl_user_types[]" style="width:200px;" class="form-control tpl-select2" multiple>
                                    @php
                                        $tplActiveUserTypes = \App\Models\UserJob::where(function($q) use ($head_office) {
                                            $q->where('headoffice_id', $head_office->id)->orWhereNull('headoffice_id');
                                        })->get()->filter(function($ut) use ($head_office) {
                                            $hj = \App\Models\HeadOfficeJob::where('job_id',$ut->id)->where('head_office_id',$head_office->id)->first();
                                            return !$hj || $hj->status == 0;
                                        });
                                    @endphp
                                    @foreach($tplActiveUserTypes as $ut)
                                        <option value="{{ $ut->id }}">{{ $ut->job }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div id="tpl_specific_profiles_wrapper" style="display:none;">
                                <select name="tpl_specific_profiles[]" style="width:200px;" class="form-control tpl-select2" multiple>
                                    @foreach($head_office->head_office_user_profiles as $p)
                                        @if(isset($p->id) && $p->custom_access_rights_id == null)
                                            <option value="{{ $p->id }}">{{ $p->profile_name }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Approval --}}
                        <div class="mt-2 col-6 col-md-5 col-lg-3 col-xl-2">
                            <label class="text-muted" title="Tasks marked as completed must be approved before they can be finalised">
                                Completed tasks require approval <i class="fa-regular fa-thumbs-up"></i>
                            </label>
                            <div class="mt-2">
                                <input type="radio" class="btn-check" name="tpl_approval" id="tpl_approval_yes" value="yes" autocomplete="off">
                                <label class="btn btn-outline-dark" for="tpl_approval_yes">Yes</label>
                                <input type="radio" class="btn-check" name="tpl_approval" id="tpl_approval_no" value="no" autocomplete="off" checked>
                                <label class="btn btn-outline-dark" for="tpl_approval_no">No</label>
                            </div>
                            <div id="tpl_approvers_wrapper" style="display:none;">
                                <select class="form-control text-muted mt-1" style="width:200px;" id="tpl_approvers">
                                    <option disabled selected>Select approvers</option>
                                    <option value="user_to_profiles">Specific profiles</option>
                                </select>
                                <div id="tpl_approver_profiles_wrapper" class="mt-2" style="display:none;">
                                    <select name="tpl_approver_profiles[]" style="width:200px;" class="form-control tpl-select2" multiple>
                                        @foreach($head_office->head_office_user_profiles as $p)
                                            @if(isset($p->id) && $p->custom_access_rights_id == null)
                                                <option value="{{ $p->id }}">{{ $p->profile_name }}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        {{-- Request form --}}
                        <div class="mt-2 col-6 col-md-5">
                            <label class="text-muted">Request form to be completed</label>
                            <div class="mt-2 mb-2">
                                <input type="radio" class="btn-check" name="tpl_form_request" id="tpl_form_req_yes" value="yes" autocomplete="off">
                                <label class="btn btn-outline-dark" for="tpl_form_req_yes">Yes</label>
                                <input type="radio" class="btn-check" name="tpl_form_request" id="tpl_form_req_no" value="no" autocomplete="off" checked>
                                <label class="btn btn-outline-dark" for="tpl_form_req_no">No</label>
                            </div>
                            <div id="tpl_forms_wrapper" style="display:none;">
                                <div class="selected-forms-container">
                                    <h6 class="text-muted mb-2"><i class="fas fa-file-alt me-2"></i>Select Forms</h6>
                                    <div style="max-height:300px;overflow-y:auto;">
                                        @if(isset($head_office->be_spoke_forms) && count($head_office->be_spoke_forms) > 0)
                                            @foreach($head_office->be_spoke_forms as $form)
                                                @if($form->is_external_link == 1 && $form->soft_deleted == false)
                                                    <div class="form-item-card mb-2" data-form-id="{{ $form->id }}">
                                                        <div class="form-item-header">
                                                            <div class="form-check">
                                                                <input class="form-check-input tpl-form-checkbox" type="checkbox"
                                                                    value="{{ $form->id }}" id="tpl_form_{{ $form->id }}">
                                                                <label class="form-check-label fw-bold" for="tpl_form_{{ $form->id }}">{{ $form->name }}</label>
                                                            </div>
                                                            <span class="badge bg-info">External</span>
                                                        </div>
                                                        <div class="form-type-buttons" id="tpl_formType_{{ $form->id }}" style="display:none;">
                                                            <input type="radio" class="btn-check" name="tpl_form_type[{{ $form->id }}]" value="mandatory" id="tpl_mandatory_{{ $form->id }}">
                                                            <label class="btn btn-outline-danger btn-sm" for="tpl_mandatory_{{ $form->id }}">Mandatory</label>
                                                            <input type="radio" class="btn-check" name="tpl_form_type[{{ $form->id }}]" value="optional" id="tpl_optional_{{ $form->id }}" checked>
                                                            <label class="btn btn-outline-secondary btn-sm" for="tpl_optional_{{ $form->id }}">Optional</label>
                                                        </div>
                                                    </div>
                                                @endif
                                            @endforeach
                                        @else
                                            <p class="text-muted">No forms available.</p>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-2">
                        {{-- Display submitted form --}}
                        <div class="col-6 col-md-5">
                            <label class="text-muted">Display submitted form</label>
                            <div class="mt-2 mb-2">
                                <input type="radio" class="btn-check" name="tpl_form_view" id="tpl_form_view_yes" value="yes" autocomplete="off">
                                <label class="btn btn-outline-dark" for="tpl_form_view_yes">Yes</label>
                                <input type="radio" class="btn-check" name="tpl_form_view" id="tpl_form_view_no" value="no" autocomplete="off" checked>
                                <label class="btn btn-outline-dark" for="tpl_form_view_no">No</label>
                            </div>
                        </div>
                        {{-- Display linked case forms --}}
                        <div class="col-6 col-md-5">
                            <label class="text-muted">Display linked case forms</label>
                            <div class="mt-2 mb-2">
                                <input type="radio" class="btn-check" name="tpl_linked_form_view" id="tpl_linked_form_view_yes" value="yes" autocomplete="off">
                                <label class="btn btn-outline-dark" for="tpl_linked_form_view_yes">Yes</label>
                                <input type="radio" class="btn-check" name="tpl_linked_form_view" id="tpl_linked_form_view_no" value="no" autocomplete="off" checked>
                                <label class="btn btn-outline-dark" for="tpl_linked_form_view_no">No</label>
                            </div>
                        </div>
                    </div>

                    {{-- ── Deadline & Reminder note ── --}}
                    <hr>
                    <div class="alert alert-info d-flex align-items-center gap-2 mb-3" role="alert" style="font-size:13px;">
                        <i class="fa-solid fa-circle-info fa-lg"></i>
                        <span>Deadlines and reminders are <strong>not saved</strong> as part of a template. You can set them after creating the task.</span>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="save-template-btn">
                        <i class="fa-solid fa-floppy-disk me-1"></i> <span id="save-template-btn-label">Save Template</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="single-task" tabindex="-1" aria-labelledby="location-single-taskLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content rounded-4 border-0 py-0 m-2">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="location-single-taskLabel">Single task</h1>
                    @if (request()->query('loc_id'))
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                    onclick="window.close();"></button>
                    @else
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                        onclick="location.reload();"></button>
                    @endif
                </div>
                <div class="modal-body">
                    <form action="{{ route('case_manager.save_task_independent') }}" method="post">
                        @csrf
                        @include('head_office.case_manager.notes.create_task_component', [
                            'type' => 'location',
                        ])
                        <input type="hidden" id="user_hidden" name="users[]" hidden />
                        <input type="hidden" id="location_hidden" name="location_ids" hidden />
                        @if (request()->query('loc_id'))
                            <input type="hidden" name="case_type" value="location">
                        @else
                            <input type="hidden" id="type_hidden" name="case_type" value="{{isset($new_task) ? $new_task->shared_with : ''}}">
                        @endif
                    </form>
                </div>
                <div class="modal-footer">
                    {{-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        onclick="location.reload();">Close</button> --}}
                </div>
            </div>
        </div>
    </div>
@endsection

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

    @if (request()->query('loc_id'))
        <script>
            $(document).ready(function() {
                $('#single-task').modal('show');
                $("input[name='locations[]']:checked").trigger('change');
            });
        </script>
    @endif


    <script>

            $(document).ready(function(){
                if($("input[name='locations[]']:checked").length == 1){
                    $("input[name='locations[]']:checked").trigger('change');
                }
            })

            function toggleAllSites() {
                const container = document.getElementById('allSitesContainer');
                const button = document.getElementById('showAllSitesBtn');
                if (container.style.display === 'none') {
                    container.style.display = 'block';
                    button.innerHTML = '<i class="fa-solid fa-eye-slash"></i> Hide Other Sites';
                    button.classList.remove('btn-outline-primary');
                    button.classList.add('btn-outline-secondary');
                } else {
                    container.style.display = 'none';
                    button.innerHTML = '<i class="fa-solid fa-eye"></i> Show Other Sites';
                    button.classList.remove('btn-outline-secondary');
                    button.classList.add('btn-outline-primary');
                }
            }
        
        function showAllInvolvedLocations() {
            // Show all hidden involved locations
            $('.involved-location-checkbox:not(:checked)').each(function() {
                var locationDiv = $(this).closest('.d-flex.align-items-center.gap-2');
                locationDiv.show();
            });
            
            // Show all other sites
            $('#allSitesContainer .d-flex.align-items-center.gap-2').each(function() {
                $(this).show();
            });
            
            // Update the button text and functionality
            var button = document.getElementById('showAllInvolvedBtn');
            if (button) {
                button.innerHTML = '<i class="fa-solid fa-eye-slash"></i> Hide Other Sites';
                button.onclick = function() {
                    hideOtherSites();
                };
            }
        }
        
        function hideOtherSites() {
            // Hide all other sites (non-involved locations)
            $('#allSitesContainer .d-flex.align-items-center.gap-2').each(function() {
                $(this).hide();
            });
            
            // Update the button text and functionality
            var button = document.getElementById('showAllInvolvedBtn');
            if (button) {
                button.innerHTML = '<i class="fa-solid fa-eye"></i> Show All Sites';
                button.onclick = function() {
                    showAllInvolvedLocations();
                };
            }
        }
    </script>
    <script>
        $(document).ready(function() {
            if($("input[name='case_type']:checked").val() == 'user'){
                $('.assign_to_wrapper_location').fadeOut();
            }
            if($("input[name='locations[]']:checked").length > 1){
                $('#task-form-wrapper').fadeOut()
                $('#location-alert').remove();
                // Insert a new Bootstrap alert after the form wrapper
                $('#task-form-wrapper').after(`
                    <div id="location-alert" class="alert alert-danger alert-dismissible fade show mt-2" role="alert">
                        Only one location can be selected.
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                `);

                
            }

            $('#form-view_yes_location').data('default-checked', $('#form-view_yes_location').prop('checked'));
            $('#form-view_yes_location').data('default-disabled', $('#form-view_yes_location').prop('disabled'));

            $('#form-view_no_location').data('default-checked', $('#form-view_no_location').prop('checked'));
            $('#form-view_no_location').data('default-disabled', $('#form-view_no_location').prop('disabled'));
        });
        $(document).on('change', "input[name='locations[]'], input[name='users[]'], input[name='case_type']", function() {
            // Get all checked locations and users
            var hasLocations = $("input[name='locations[]']:checked").length > 0;
            var hasUsers = $("input[name='users[]']:checked").length > 0;
            var loc_val = $("input[name='locations[]']:checked").map(function() {
                return $(this).val();
            }).get();
            // Ensure only unique locations by filtering out duplicates
            loc_val = loc_val.filter(function(item, pos) {
                return loc_val.indexOf(item) === pos;
            });
            var user_val = $("input[name='users[]']:checked").map(function() {
                return $(this).val();
            }).get();

            console.log('Checked locations:', loc_val, 'Checked users:', user_val);
            
            // Handle hiding involved locations when unchecked
            if ($(this).hasClass('involved-location-checkbox')) {
                var locationId = $(this).val();
                var locationDiv = $(this).closest('.d-flex.align-items-center.gap-2');
                
                if (!$(this).is(':checked')) {
                    // Hide the involved location when unchecked
                    locationDiv.hide();
                    // Remove from loc_val array if it exists
                    loc_val = loc_val.filter(function(id) {
                        return id !== locationId;
                    });
                    // Update hasLocations flag
                    hasLocations = loc_val.length > 0;
                    console.log('Involved location unchecked, removed from array. New loc_val:', loc_val);
                } else {
                    // Show the involved location when checked
                    locationDiv.show();
                    console.log('Involved location checked, added to array. New loc_val:', loc_val);
                }
            }
            
            // Ensure only one group is checked at a time
            if ($(this).attr('name') === 'locations[]' && hasLocations) {
                $("input[name='users[]']").prop('checked', false);
                // Clear user hidden field when locations are selected
                $('#user_hidden').val('');
            }
            if ($(this).attr('name') === 'users[]' && hasUsers) {
                $("input[name='locations[]']").prop('checked', false);
                // Clear location hidden field when users are selected
                $('#location_hidden').val('');
            }

            // Toggle visibility of #task-form-wrapper
            if (hasLocations || hasUsers) {
                $('#task-form-wrapper').fadeIn();
            } else {
                $('#task-form-wrapper').fadeOut();
                // Clear hidden fields when no selections
                $('#location_hidden').val('');
                $('#user_hidden').val('');
            }

            // Show responders_details only if users[] is checked AND case_type is 'user'
            var isCaseTypeUser = $('input[name="case_type"]:checked').val() === 'user';
            if (hasUsers && isCaseTypeUser) {
                
                $('#type_hidden').val('user');
                $('#user_hidden').val(user_val);
                $('.main-assign-to-wrapper').fadeOut();
                $('.assign_to_wrapper_case_task').fadeOut();
            } else {
                $('.location #responders_details').fadeOut();
                $('#type_hidden').val('location');
                // Set the hidden field to the array of checked location IDs
                $('#location_hidden').val(loc_val);
                $('.main-assign-to-wrapper').fadeIn();
            }

            if(hasLocations && loc_val.length > 1){
                $('#task-form-wrapper').fadeOut()
                $('#location-alert').remove();

                // Insert a new Bootstrap alert after the form wrapper
                $('#task-form-wrapper').after(`
                    <div id="location-alert" class="alert alert-danger alert-dismissible fade show mt-2" role="alert">
                        Only one location can be selected.
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                `);
            }else{
                $('#location-alert').remove();
            }
            
            if (loc_val.length == 1 && $("input[name='locations[]']:checked").data('case-loc') == true) {
                $('#form-view_yes_location').prop('checked', true).prop('disabled', true);
                $('#form-view_no_location').prop('checked', false).prop('disabled', true);

                $('#location-message').remove();
                $('#form-view-wrapper-location').after(
                    '<small id="location-message" class="text-danger">Form data is already visible on the selected site</small>'
                );
            } else {
                // Restore defaults instead of resetting manually
                $('#form-view_yes_location')
                    .prop('checked', $('#form-view_yes_location').data('default-checked'))
                    .prop('disabled', $('#form-view_yes_location').data('default-disabled'));

                $('#form-view_no_location')
                    .prop('checked', $('#form-view_no_location').data('default-checked'))
                    .prop('disabled', $('#form-view_no_location').data('default-disabled'));

                
                    if($('#form-view_yes_location').data('default-checked') == true){
                        $('#responders_details').fadeIn();
                    }
                $('#location-message').remove();
            }



            

            
            
            // Update console log with final state
            console.log('Final state - hasLocations:', hasLocations, 'hasUsers:', hasUsers);
            console.log('Final loc_val:', loc_val, 'Final user_val:', user_val);
        });

        $(document).on('change', '#forms_filter', function() {
            var parent = $(this).closest('.case_task, .location');
            var formSelect = parent.find('.dropdown-menu');

            // Show all first to reset any previous hiding
            formSelect.find('.all, .internal, .external').show();

            if ($(this).val() === 'all') {
                formSelect.find('.all').fadeIn();
            } else if ($(this).val() === 'external') {
                formSelect.find('.internal').fadeOut();
            } else if ($(this).val() === 'internal') {
                formSelect.find('.external').fadeOut();
            }
        });



        document.addEventListener("DOMContentLoaded", function() {
            // Initialize flatpickr for all multiDatePicker instances
            $('.case_task #multiDatePicker, .location #multiDatePicker').each(function() {
                flatpickr(this, {
                    mode: "multiple",
                    dateFormat: "Y-m-d",
                    defaultDate: "{{isset($new_task) && isset($new_task->multi_dates) ? json_decode($new_task->multi_dates) : ''}}"
                });
            });
            
            // Set initial context for TaskManager components based on selected case type
            var selectedCaseType = $('input[name="case_type"]:checked').val();
            if (selectedCaseType) {
                var isLocationShare = (selectedCaseType === 'sites');
                console.log('Initial case type:', selectedCaseType, 'isLocationShare:', isLocationShare);
                console.log('Emitting initial setShareContext event with:', selectedCaseType, isLocationShare);
                Livewire.emit('setShareContext', selectedCaseType, isLocationShare);
            } else {
                console.log('No initial case type selected');
            }
            
            // Initialize hidden fields based on current checkbox states
            initializeHiddenFields();
        });
        
        function initializeHiddenFields() {
            var loc_val = $("input[name='locations[]']:checked").map(function() {
                return $(this).val();
            }).get();
            var user_val = $("input[name='users[]']:checked").map(function() {
                return $(this).val();
            }).get();
            
            if (loc_val.length > 0) {
                $('#location_hidden').val(loc_val);
            }
            if (user_val.length > 0) {
                $('#user_hidden').val(user_val);
            }
            
            console.log('Initialized hidden fields - loc_val:', loc_val, 'user_val:', user_val);
        }

        $(document).on('change', 'input[name="case_type"]', function() {
            var selectedValue = $(this).val();
            var isLocationShare = (selectedValue === 'sites');
            console.log('Document change handler - Case type changed to:', selectedValue, 'isLocationShare:', isLocationShare);
            console.log('Emitting setShareContext event with:', selectedValue, isLocationShare);
            Livewire.emit('setShareContext', selectedValue, isLocationShare);
            
            // Update hidden field for form submission
            $('#type_hidden').val(selectedValue);
        });

        $(document).ready(function () {
            $('#repeat').trigger('change');
        });

        $(document).on('change', '#repeat', function() {
            var parent = $(this).closest('.case_task, .location');
            var wrapper = parent.find('#custom-wrapper');

            wrapper.fadeOut();
            const selected_value = $(this).val();

            if (selected_value === 'custom') {
                wrapper.fadeIn();
                wrapper.find('#multiDatePicker').fadeIn();
                wrapper.find('input[name="until_date"]').fadeOut();
                wrapper.find('input[name="custom_date"]').fadeOut();
                wrapper.find('input[name="custom_frequency"]').fadeOut();
            }
            if (selected_value === 'until_case_closed' || selected_value === 'repeats_certain_times') {
                wrapper.fadeIn();
                wrapper.find('input[name="custom_frequency"]').fadeIn();
                wrapper.find('input[name="custom_date"]').fadeOut();
                wrapper.find('#multiDatePicker').fadeOut();
                wrapper.find('input[name="until_date"]').fadeOut();
            }
            if (selected_value === 'repeats_until_date') {
                wrapper.fadeIn();
                wrapper.find('input[name="custom_frequency"]').fadeOut();
                wrapper.find('input[name="custom_date"]').fadeOut();
                wrapper.find('#multiDatePicker').fadeOut();
                wrapper.find('input[name="until_date"]').fadeIn();
            }
        });

        $(document).on('change', '#assign_to', function() {
            var parent = $(this).closest('.case_task, .location');
            var assignedUsers = parent.find('#assigned_users');
            var specificUsers = parent.find('#specific_users_wrapper');
            var specificProfiles = parent.find('#specific_profiles_wrapper');


            assignedUsers.fadeOut('fast');
            specificUsers.fadeOut('fast');
            specificProfiles.fadeOut('fast');
            if ($(this).val() === 'everyone') {
                assignedUsers.fadeIn();
            }
            if ($(this).val() === 'specific_users') {
                specificUsers.fadeIn();
            }
            if ($(this).val() === 'user_types') {
                specificUsers.fadeIn();
            }
            if ($(this).val() === 'specific_profiles') {
                specificProfiles.fadeIn();
            }
        });
        $(document).on('change', 'input[name="select_stage_type"]', function() {
            var parent = $(this).closest('.case_task, .location');
            var stage = parent.find('#stage-select');

            if ($(this).val() == 'stage_independent') {
                stage.fadeOut();
            } else {
                stage.fadeIn();
            }
        });
        $("input[name^='user_aprroval_']").change(function() {
            let selectedValue = $(this).val(); // Get the selected value
            var parent = $(this).closest('.case_task, .location');
            var approversWrapper = parent.find('#approvers-wrapper');
            if (selectedValue == 'no') {
                approversWrapper.fadeOut();
            } else if (selectedValue == 'yes') {
                approversWrapper.fadeIn();
            }
        });
        $("input[name^='form_request_']").change(function() {
            let selectedValue = $(this).val(); // Get the selected value
            var parent = $(this).closest('.case_task, .location');
            var requestForm = parent.find('.request-forms-wrapper');
            if (selectedValue == 'no') {
                requestForm.fadeOut();
            } else if (selectedValue == 'yes') {
                requestForm.fadeIn();
            }
        });

        $(document).on('change', '#assign_approvers', function() {
            var parent = $(this).closest('.case_task, .location');
            var userSelect = parent.find('#user_to_select');
            var specific_profiles_investigators = parent.find('#specific_profiles_investigators');
            var specific_users_investigators = parent.find('#specific_users_investigators');

            userSelect.fadeOut();
            specific_profiles_investigators.fadeOut();
            specific_users_investigators.fadeOut();
            if ($(this).val() === 'user_to_select') {
                // userSelect.fadeIn();
                specific_profiles_investigators.fadeOut();
                specific_users_investigators.fadeIn();
            } else if ($(this).val() === 'user_to_profiles') {
                specific_profiles_investigators.fadeIn();
                userSelect.fadeOut();
                specific_users_investigators.fadeOut();
            }
        });

        $(document).on('change', 'input[name="user_approval"]', function() {
            var parent = $(this).closest('.case_task, .location');
            var approversWrapper = parent.find('#approvers-wrapper');

            if ($(this).val() === 'no') {
                approversWrapper.fadeOut();
            } else {
                approversWrapper.fadeIn();
            }
        });







        $(document).on('click', '.filepond--file-action-button', function(e) {
            e.preventDefault();
        });

        $('.file-pond').on('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
            }
        });
        $(document).ready(function() {
            $('.select-2-modal').select2({
                dropdownParent: '.modal-content'
            });
            $('.select-2-modal-simple').select2({
                dropdownParent: '.modal-content',
                dropdownCssClass: 'select2-modal-zindex'
            });
            $('.select-2').select2();

            // Initialize FilePond with existing files if editing a task
            let filePondConfig = {
                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
                    load: (source, load, error, progress, abort, headers) => {
                        // Handle loading existing files from server
                        const request = new Request(source);
                        fetch(request).then(response => {
                            if (response.ok) {
                                return response.blob();
                            }
                            throw new Error('Failed to load file');
                        }).then(blob => {
                            load(blob);
                        }).catch(err => {
                            error('Failed to load file');
                        });
                    },
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}' // Get CSRF token dynamically
                    }
                }
            };

            @if(isset($new_task) && $new_task->task_documents && count($new_task->task_documents->where('is_task_doc',true)) > 0)
                // Add existing files if editing a task
                filePondConfig.files = [
                    @foreach($new_task->task_documents->where('is_task_doc',true) as $taskDoc)
                        @if($taskDoc->document)
                        {
                            source: '{{ route("headoffice.new_view.attachment", $taskDoc->document->unique_id) . $taskDoc->document->extension() }}',
                            options: {
                                type: 'local',
                                file: {
                                    name: '{{ $taskDoc->document->original_file_name() }}',
                                    size: {{ $taskDoc->document->file_size ?? 0 }},
                                    type: '{{ $taskDoc->document->file_type ?? "application/octet-stream" }}'
                                },
                                metadata: {
                                    taskDocumentId: {{ $taskDoc->id }},
                                    documentId: {{ $taskDoc->document_id }},
                                    uniqueId: '{{ $taskDoc->document->unique_id }}'
                                }
                            }
                        },
                        @endif
                    @endforeach
                ];
            @endif

            $('.file-pond').filepond(filePondConfig);
            
            // Handle file removal for existing documents
            $('.file-pond').on('FilePond:removefile', function(e) {
                const file = e.detail.file;
                console.log('File being removed:', file);
                
                if (file && file.getMetadata && file.getMetadata()) {
                    const metadata = file.getMetadata();
                    console.log('File metadata:', metadata);
                    
                    if (metadata.uniqueId) {
                        const uniqueId = metadata.uniqueId;
                        console.log('Removing hidden input for uniqueId:', uniqueId);
                        
                        // Remove corresponding hidden input
                        $(`.existing-document-input[value="${uniqueId}"]`).remove();
                        
                        // Also add to a deletion list if needed
                        if (!window.deletedDocuments) {
                            window.deletedDocuments = [];
                        }
                        window.deletedDocuments.push(uniqueId);
                        
                        // Update hidden input with deleted documents
                        $('#deleted_documents_input').val(JSON.stringify(window.deletedDocuments));
                        console.log('Added to deletion list:', uniqueId);
                    }
                }
            });




            $('input[name="case_type"]').change(function() {
                var selectedValue = $('input[name="case_type"]:checked').val();
                console.log('Radio button change detected:', selectedValue);
                
                if (selectedValue == 'sites') {
                    $('#sites').fadeIn();
                    $('#user').fadeOut()
                    $('#case_task').fadeOut()
                    console.log('Emitting setShareContext event with sites');
                    setTimeout(function(){
                        Livewire.emit('setShareContext', 'sites');
                    }, 0);
                }
                if (selectedValue == 'user') {
                    $('#user').fadeIn()
                    $('#sites').fadeOut()
                    $('#case_task').fadeOut()
                    console.log('Emitting setShareContext event with user');
                    setTimeout(function(){
                        Livewire.emit('setShareContext', 'user');
                    }, 0);
                }
                if (selectedValue == 'case_task') {
                    $('#case_task').fadeIn()
                    $('#user').fadeOut()
                    $('#sites').fadeOut()
                    console.log('Emitting setShareContext event with case_task');
                    setTimeout(function(){
                        Livewire.emit('setShareContext', 'case_task');
                    }, 0);
                }
            });
            $('input[name="select_stage_type"]').change(function() {
                var parent = $(this).closest('.case_task, .location');
                var selectedValue = $('input[name="select_stage_type"]:checked').val();
                if (selectedValue == 'stage') {
                    parent.find('#stage-select').fadeIn();
                } else {
                    parent.find('#stage-select').fadeOut();
                }
            });
        });

        window.addEventListener('DOMContentLoaded', () => {
            tinymce.init({
                selector: '.tinymce-inline',
                font_formats:"Littera Text",
                content_style: "body { font-family: 'Littera Text', sans-serif; }",
                height: 350,
                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',
                setup: function(editor) {
                    editor.on('init change', function() {
                        editor.save();
                    });

                }
            });

        });

        function searchUsers() {
            const searchInput = document.getElementById('userSearchInput');
            const filter = searchInput.value.toLowerCase();
            const userContainers = document.querySelectorAll('.d-flex.align-items-center.gap-2[data-status]');
            userContainers.forEach(container => {
                const userName = container.getAttribute('data-search-name');
                const userContent = container.textContent.toLowerCase();
                if (filter === '' || userName.includes(filter) || userContent.includes(filter)) {
                    container.setAttribute('data-status', 'visible');
                } else {
                    container.setAttribute('data-status', 'hidden');
                }
            });
        }

        function searchLocations() {
            const searchInput = document.getElementById('locationSearchInput');
            const filter = searchInput.value.toLowerCase();

            // Search through all location containers (both involved locations and other sites)
            const locationContainers = document.querySelectorAll('.d-flex.align-items-center.gap-2[data-status]');

            locationContainers.forEach(container => {
                const locationName = container.getAttribute('data-search-name');
                const tradingName = container.getAttribute('data-search-trading-name');

                const locationContent = container.textContent.toLowerCase();

                if (filter === '' ||
                    locationName.includes(filter) ||
                    tradingName.includes(filter) ||
                    locationContent.includes(filter)) {
                    container.setAttribute('data-status', 'visible');
                    container.style.display = 'flex';
                } else {
                    container.setAttribute('data-status', 'hidden');
                    container.style.display = 'none';
                }
            });
        }
    </script>

    {{-- ====== TASK TEMPLATES JS ====== --}}
    <script>
    (function () {
        var TEMPLATES_URL = '{{ route("task_templates.index") }}';
        var STORE_URL     = '{{ route("task_templates.store") }}';
        var DELETE_BASE   = '{{ url("head_office/case/manager/task-templates") }}';
        var CSRF          = '{{ csrf_token() }}';
        var _cachedTemplates = [];
        var _pendingTemplate = null;
        var _activeTemplateId = null;   /* id of template currently applied to the task form */
        var _pendingEditTemplate = null; /* template to pre-fill when edit modal opens */

        /* ── helpers ── */
        function escHtml(str) {
            if (!str) return '';
            return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
        }
        function priorityLabel(p) { return {low:'Low',medium:'Medium',high:'High',urgent:'Urgent'}[p] || p; }
        function priorityColor(p) { return {low:'#28a745',medium:'#fd7e14',high:'#dc3545',urgent:'#6f42c1'}[p] || '#6c757d'; }

        function showToast(msg) {
            var el = document.getElementById('tpl-toast');
            if (el) el.remove();
            el = document.createElement('div');
            el.id = 'tpl-toast';
            el.style.cssText = 'position:fixed;bottom:20px;right:20px;z-index:99999;background:#435dd8;color:#fff;padding:10px 16px;border-radius:8px;font-size:13px;box-shadow:0 4px 12px rgba(0,0,0,0.2);max-width:320px;';
            el.textContent = msg;
            document.body.appendChild(el);
            setTimeout(function(){ el.remove(); }, 3500);
        }

        $('#create-template-modal').on('show.bs.modal', function(){
            /* nothing deadline-related needed — templates don't include deadlines */
        });

        /* ── template list rendering ── */
        function renderTemplates(templates) {
            var list  = document.getElementById('templates-list');
            var noMsg = document.getElementById('no-templates-msg');
            if (!templates || templates.length === 0) {
                list.innerHTML = '';
                if (noMsg) { noMsg.style.display = ''; noMsg.textContent = 'No templates yet. Click New to create one.'; }
                return;
            }
            if (noMsg) noMsg.style.display = 'none';
            list.innerHTML = templates.map(function(t) {
                var isDefault = t.is_default == 1 || t.is_default === true;
                var isInUse   = t.id == _activeTemplateId;
                var borderStyle = isInUse   ? 'border-color:#435dd8!important;background:#eff2ff!important;' :
                                  isDefault ? 'border-color:#f59e0b!important;' : '';
                return '<div class="template-item border rounded p-2 mb-2 bg-light" style="font-size:12px;' + borderStyle + '" data-id="' + t.id + '">' +
                    '<div class="d-flex justify-content-between align-items-start">' +
                        '<div style="flex:1;min-width:0;">' +
                            '<div class="fw-semibold text-truncate" style="color:#435dd8;" title="' + escHtml(t.name) + '">' + escHtml(t.name) + '</div>' +
                            (t.title ? '<div class="text-muted text-truncate" style="font-size:11px;">' + escHtml(t.title) + '</div>' : '') +
                            '<div class="d-flex flex-wrap gap-1 align-items-center mt-1">' +
                                '<span style="font-size:10px;color:' + priorityColor(t.priority) + ';font-weight:600;">' + priorityLabel(t.priority) + '</span>' +
                                (isDefault ? '<span style="font-size:9px;background:#f59e0b;color:#fff;border-radius:3px;padding:1px 4px;font-weight:600;">★ Default</span>' : '') +
                                (isInUse   ? '<span style="font-size:9px;background:#435dd8;color:#fff;border-radius:3px;padding:1px 4px;font-weight:600;">In Use</span>' : '') +
                            '</div>' +
                        '</div>' +
                        '<div class="d-flex flex-column align-items-end gap-1 ms-1">' +
                            '<button type="button" class="btn btn-sm py-0 px-1 star-template-btn ' + (isDefault ? 'btn-warning' : 'btn-outline-secondary') + '" style="font-size:10px;" data-id="' + t.id + '" title="' + (isDefault ? 'Remove default' : 'Set as default') + '"><i class="fa-' + (isDefault ? 'solid' : 'regular') + ' fa-star" style="font-size:9px;"></i></button>' +
                            '<button type="button" class="btn btn-primary btn-sm py-0 px-1 use-template-btn" style="font-size:10px;" data-id="' + t.id + '">Use</button>' +
                            '<button type="button" class="btn btn-outline-secondary btn-sm py-0 px-1 edit-template-btn" style="font-size:10px;" data-id="' + t.id + '" title="Edit template"><i class="fa-solid fa-pen" style="font-size:9px;"></i></button>' +
                            '<button type="button" class="btn btn-outline-danger btn-sm py-0 px-1 delete-template-btn" style="font-size:10px;" data-id="' + t.id + '"><i class="fa-solid fa-trash" style="font-size:9px;"></i></button>' +
                        '</div>' +
                    '</div>' +
                '</div>';
            }).join('');
        }

        function loadTemplates() {
            $.get(TEMPLATES_URL, function(data){
                var templates = (data && data.templates) ? data.templates : (Array.isArray(data) ? data : []);
                _cachedTemplates = templates;
                renderTemplates(templates);
            }).fail(function(){ document.getElementById('templates-list').innerHTML = '<p class="text-danger" style="font-size:12px;">Failed to load.</p>'; });
        }

        /* ── template modal interactions ── */
        $(document).on('change', '#tpl_repeat', function(){
            var v = $(this).val();
            var wrap = $('#tpl_custom_wrapper');
            wrap.toggle(v === 'custom' || v === 'until_case_closed' || v === 'repeats_certain_times' || v === 'repeats_until_date');
            $('#tpl_multiDatePicker').toggle(v === 'custom');
            $('#tpl_custom_frequency').toggle(v === 'until_case_closed' || v === 'repeats_certain_times');
            $('#tpl_until_date').toggle(v === 'repeats_until_date');
        });

        $(document).on('change', '#tpl_assign_to', function(){
            var v = $(this).val();
            $('#tpl_specific_users_wrapper').toggle(v === 'user_types');
            $('#tpl_specific_profiles_wrapper').toggle(v === 'specific_profiles');
        });

        $(document).on('change', 'input[name="tpl_approval"]', function(){
            $('#tpl_approvers_wrapper').toggle($(this).val() === 'yes');
        });

        $(document).on('change', '#tpl_approvers', function(){
            $('#tpl_approver_profiles_wrapper').toggle($(this).val() === 'user_to_profiles');
        });

        $(document).on('change', 'input[name="tpl_form_request"]', function(){
            $('#tpl_forms_wrapper').toggle($(this).val() === 'yes');
        });

        $(document).on('change', '.tpl-form-checkbox', function(){
            var id = $(this).val();
            $('#tpl_formType_' + id).toggle($(this).is(':checked'));
        });

        /* initialise select2 / flatpickr + handle pending edit fill */
        $('#create-template-modal').on('shown.bs.modal', function(){
            $(this).find('.tpl-select2').each(function(){
                if (!$(this).data('select2')) {
                    $(this).select2({ dropdownParent: $('#create-template-modal .modal-content') });
                }
            });
            if (typeof flatpickr !== 'undefined' && !$('#tpl_multiDatePicker')[0]._flatpickr) {
                flatpickr('#tpl_multiDatePicker', { mode: 'multiple', dateFormat: 'Y-m-d' });
            }
            if (_pendingEditTemplate) {
                fillTemplateModal(_pendingEditTemplate);
                _pendingEditTemplate = null;
            }
        });

        /* reset modal fields */
        function resetTemplateModal() {
            $('#tpl_editing_id').val('');
            $('#tpl_template_name, #tpl_task_name').val('');
            $('#tpl_name_error').text('');
            $('#save-template-btn-label').text('Save Template');
            var ed = (typeof tinymce !== 'undefined') && tinymce.get('tpl_task_description');
            if (ed) ed.setContent(''); else $('#tpl_task_description').val('');
            $('input[name="tpl_priority"][value="low"]').prop('checked', true);
            $('#tpl_repeat').val('does_not_repeat').trigger('change');
            $('#tpl_assign_to').val('everyone').trigger('change');
            $('input[name="tpl_approval"][value="no"]').prop('checked', true);
            $('#tpl_approvers_wrapper').hide();
            $('input[name="tpl_form_request"][value="no"]').prop('checked', true);
            $('#tpl_forms_wrapper').hide();
            $('.tpl-form-checkbox').prop('checked', false);
            $('.tpl-form-checkbox').each(function(){ $('#tpl_formType_' + $(this).val()).hide(); });
            $('.tpl-select2').val(null).trigger('change');
            $('input[name="tpl_form_view"][value="no"]').prop('checked', true);
            $('input[name="tpl_linked_form_view"][value="no"]').prop('checked', true);
        }
        $('#create-template-modal').on('hidden.bs.modal', function(){
            resetTemplateModal();
        });

        /* ── SAVE template ── */
        $(document).on('click', '#save-template-btn', function(){
            var name = $('#tpl_template_name').val().trim();
            if (!name) {
                $('#tpl_name_error').text('Please enter a template name.');
                $('#tpl_template_name').focus();
                return;
            }
            $('#tpl_name_error').text('');

            // description from TinyMCE
            var desc = '';
            var tplEd = (typeof tinymce !== 'undefined') && tinymce.get('tpl_task_description');
            if (tplEd) desc = tplEd.getContent(); else desc = $('#tpl_task_description').val();

            // selected forms
            var selectedForms = [];
            $('.tpl-form-checkbox:checked').each(function(){
                var fid = $(this).val();
                var ftype = $('input[name="tpl_form_type[' + fid + ']"]:checked').val() || 'optional';
                selectedForms.push({ id: fid, type: ftype });
            });

            var extraData = {
                assign_to:         $('#tpl_assign_to').val(),
                user_types:        $('select[name="tpl_user_types[]"]').val() || [],
                specific_profiles: $('select[name="tpl_specific_profiles[]"]').val() || [],
                approval:          $('input[name="tpl_approval"]:checked').val() || 'no',
                approvers:         $('#tpl_approvers').val() || '',
                approver_profiles: $('select[name="tpl_approver_profiles[]"]').val() || [],
                form_request:      $('input[name="tpl_form_request"]:checked').val() || 'no',
                selected_forms:    selectedForms,
                form_view:         $('input[name="tpl_form_view"]:checked').val() || 'no',
                linked_form_view:  $('input[name="tpl_linked_form_view"]:checked').val() || 'no',
            };

            var editingId = $('#tpl_editing_id').val();
            var ajaxUrl   = editingId ? DELETE_BASE + '/' + editingId + '/update' : STORE_URL;
            var postData  = {
                _token:      CSRF,
                name:        name,
                title:       $('#tpl_task_name').val().trim(),
                description: desc,
                priority:    $('input[name="tpl_priority"]:checked').val() || 'low',
                repeat:      $('#tpl_repeat').val(),
                data:        JSON.stringify(extraData),
            };

            var btn = $(this);
            btn.prop('disabled', true).html('Saving...');
            $.ajax({
                url: ajaxUrl,
                method: 'POST',
                headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF },
                data: postData,
                success: function(res){
                    if (res && res.success) {
                        $('#create-template-modal').modal('hide');
                        loadTemplates();
                        showToast(editingId ? 'Template updated!' : 'Template saved!');
                    } else {
                        $('#tpl_name_error').text(res && res.message ? res.message : 'Save failed. Please try again.');
                    }
                },
                error: function(xhr){
                    var msg = 'Failed to save template. Please try again.';
                    if (xhr.responseJSON) {
                        if (xhr.responseJSON.errors) {
                            msg = Object.values(xhr.responseJSON.errors).flat().join(' ');
                        } else if (xhr.responseJSON.message) {
                            msg = xhr.responseJSON.message;
                        }
                    }
                    $('#tpl_name_error').text(msg);
                },
                complete: function(){ btn.prop('disabled', false).html('<i class="fa-solid fa-floppy-disk me-1"></i> <span id="save-template-btn-label">' + (editingId ? 'Update Template' : 'Save Template') + '</span>'); }
            });
        });

        /* ── USE template — apply all fields to the visible task form ── */
        function applyTemplate(t) {
            /* title */
            $('input[name="task_name"]').val(t.title || '');

            /* description via TinyMCE (modal is open so editor is ready) */
            var desc = t.description || '';
            if (typeof tinymce !== 'undefined') {
                var ed = tinymce.get('task_description');
                if (ed) {
                    ed.setContent(desc);
                } else {
                    $('textarea[name="task_description"]').not('#tpl_task_description').val(desc);
                }
            } else {
                $('textarea[name="task_description"]').not('#tpl_task_description').val(desc);
            }

            /* priority – set on all main-form priority groups */
            $('input[type="radio"][name^="priority_"]:not([name="tpl_priority"])[value="' + (t.priority || 'low') + '"]').prop('checked', true);

            /* repeat */
            $('select#repeat').val(t.repeat || 'does_not_repeat').trigger('change');

            /* extra fields */
            var extra = {};
            try { extra = JSON.parse(t.data || '{}'); } catch(e) {}

            /* assign_to */
            if (extra.assign_to) {
                $('select#assign_to').val(extra.assign_to).trigger('change');
                setTimeout(function(){
                    if (extra.assign_to === 'user_types' && extra.user_types && extra.user_types.length) {
                        $('select[name="user_types[]"]').val(extra.user_types).trigger('change');
                    }
                    if (extra.assign_to === 'specific_profiles' && extra.specific_profiles && extra.specific_profiles.length) {
                        $('select[name="specific_profiles[]"]').not('[id^="tpl_"]').val(extra.specific_profiles).trigger('change');
                    }
                }, 150);
            }

            /* approval */
            if (extra.approval) {
                $('input[name^="user_aprroval_"][value="' + extra.approval + '"]').prop('checked', true).trigger('change');
                if (extra.approval === 'yes' && extra.approvers) {
                    setTimeout(function(){ $('select#assign_approvers').val(extra.approvers).trigger('change'); }, 150);
                }
            }

            /* form request */
            if (extra.form_request) {
                $('input[name^="form_request_"][value="' + extra.form_request + '"]').prop('checked', true).trigger('change');
                if (extra.form_request === 'yes' && extra.selected_forms && extra.selected_forms.length) {
                    setTimeout(function(){
                        extra.selected_forms.forEach(function(f){
                            var cb = $('input[type="checkbox"][name^="selected_forms"][value="' + f.id + '"]');
                            cb.prop('checked', true).trigger('change');
                            if (f.type) {
                                $('input[name^="form_type"][value="' + f.type + '"]').filter('[name*="[' + f.id + ']"]').prop('checked', true);
                            }
                        });
                    }, 200);
                }
            }

            /* display submitted form */
            if (extra.form_view) {
                $('input[name^="form_view_"][value="' + extra.form_view + '"]').prop('checked', true);
            }
            /* display linked case forms */
            if (extra.linked_form_view) {
                $('input[name^="linked_form_view_"][value="' + extra.linked_form_view + '"]').prop('checked', true);
            }

            _activeTemplateId = t.id;
            renderTemplates(_cachedTemplates);

            /* show info banner inside the task modal */
            var banner = document.getElementById('tpl-applied-banner');
            if (!banner) {
                banner = document.createElement('div');
                banner.id = 'tpl-applied-banner';
                banner.className = 'alert alert-info d-flex align-items-center gap-2 mx-3 mt-2 mb-0';
                banner.style.cssText = 'font-size:13px;';
                var modalBody = document.querySelector('#single-task .modal-body');
                if (modalBody) modalBody.insertBefore(banner, modalBody.firstChild);
            }
            banner.innerHTML = '<i class="fa-solid fa-circle-info"></i> <span>Using template <strong>' + escHtml(t.name) + '</strong>. Deadline &amp; reminders are not included in templates — please set them separately if needed.</span>';
            banner.style.display = 'flex';
        }

        /* When user clicks Use — store it as pending and highlight */
        $(document).on('click', '.use-template-btn', function(e){
            e.stopPropagation();
            var id = $(this).data('id');
            var t = _cachedTemplates.find(function(x){ return x.id == id; });
            if (!t) return;

            _pendingTemplate = t;

            /* visual selection feedback */
            $('.template-item').css({'border-color': '', 'background': ''});
            $(this).closest('.template-item').css({'border-color': '#435dd8', 'background': '#eff2ff'});

            showToast('Template "' + escHtml(t.name) + '" selected — open the task form to apply it.');
        });

        /* Apply pending template (or default) when the single-task modal becomes visible */
        $('#single-task').on('shown.bs.modal', function(){
            if (_pendingTemplate) {
                applyTemplate(_pendingTemplate);
                _pendingTemplate = null;
            } else if (!_activeTemplateId) {
                /* auto-apply the default template on first open if nothing is in use */
                var defaultTpl = _cachedTemplates.find(function(x){ return x.is_default == 1 || x.is_default === true; });
                if (defaultTpl) applyTemplate(defaultTpl);
            }
        });

        /* Clear "In Use" state when task modal closes */
        $('#single-task').on('hidden.bs.modal', function(){
            _activeTemplateId = null;
            renderTemplates(_cachedTemplates);
            var banner = document.getElementById('tpl-applied-banner');
            if (banner) banner.style.display = 'none';
        });

        /* ── Fill template modal for editing ── */
        function fillTemplateModal(t) {
            resetTemplateModal();
            $('#tpl_editing_id').val(t.id);
            $('#tpl_template_name').val(t.name || '');
            $('#tpl_task_name').val(t.title || '');
            $('#save-template-btn-label').text('Update Template');

            /* description */
            var tplEd = (typeof tinymce !== 'undefined') && tinymce.get('tpl_task_description');
            if (tplEd) tplEd.setContent(t.description || ''); else $('#tpl_task_description').val(t.description || '');

            /* priority / repeat */
            $('input[name="tpl_priority"][value="' + (t.priority || 'low') + '"]').prop('checked', true);
            $('#tpl_repeat').val(t.repeat || 'does_not_repeat').trigger('change');

            /* extra data fields */
            var extra = {};
            try { extra = JSON.parse(t.data || '{}'); } catch(e) {}

            if (extra.assign_to) {
                $('#tpl_assign_to').val(extra.assign_to).trigger('change');
                setTimeout(function(){
                    if (extra.assign_to === 'user_types' && extra.user_types) {
                        $('select[name="tpl_user_types[]"]').val(extra.user_types).trigger('change');
                    }
                    if (extra.assign_to === 'specific_profiles' && extra.specific_profiles) {
                        $('select[name="tpl_specific_profiles[]"]').val(extra.specific_profiles).trigger('change');
                    }
                }, 150);
            }

            $('input[name="tpl_approval"][value="' + (extra.approval || 'no') + '"]').prop('checked', true);
            if (extra.approval === 'yes') {
                $('#tpl_approvers_wrapper').show();
                if (extra.approvers) setTimeout(function(){ $('#tpl_approvers').val(extra.approvers).trigger('change'); }, 150);
                if (extra.approver_profiles) setTimeout(function(){ $('select[name="tpl_approver_profiles[]"]').val(extra.approver_profiles).trigger('change'); }, 150);
            }

            $('input[name="tpl_form_view"][value="' + (extra.form_view || 'no') + '"]').prop('checked', true);
            $('input[name="tpl_linked_form_view"][value="' + (extra.linked_form_view || 'no') + '"]').prop('checked', true);

            $('input[name="tpl_form_request"][value="' + (extra.form_request || 'no') + '"]').prop('checked', true);
            if (extra.form_request === 'yes') {
                $('#tpl_forms_wrapper').show();
                if (extra.selected_forms && extra.selected_forms.length) {
                    setTimeout(function(){
                        extra.selected_forms.forEach(function(f){
                            $('#tpl_form_' + f.id).prop('checked', true);
                            $('#tpl_formType_' + f.id).show();
                            if (f.type) $('input[name="tpl_form_type[' + f.id + ']"][value="' + f.type + '"]').prop('checked', true);
                        });
                    }, 150);
                }
            }

        }

        /* ── EDIT template ── */
        $(document).on('click', '.edit-template-btn', function(e){
            e.stopPropagation();
            var id = $(this).data('id');
            var t  = _cachedTemplates.find(function(x){ return x.id == id; });
            if (!t) return;
            /* open the modal — fillTemplateModal runs once it's fully shown */
            _pendingEditTemplate = t;
            $('#create-template-modal').modal('show');
        });

        /* ── STAR / SET DEFAULT template ── */
        $(document).on('click', '.star-template-btn', function(e){
            e.stopPropagation();
            var id = $(this).data('id');
            $.ajax({
                url: DELETE_BASE + '/' + id + '/set-default',
                method: 'POST',
                headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF },
                data: { _token: CSRF },
                success: function(res){
                    if (res.success) {
                        _cachedTemplates = _cachedTemplates.map(function(t){
                            return Object.assign({}, t, { is_default: (t.id == id && res.is_default) ? 1 : 0 });
                        });
                        renderTemplates(_cachedTemplates);
                    }
                },
                error: function(){ alert('Failed to update default.'); }
            });
        });

        /* ── DELETE template ── */
        $(document).on('click', '.delete-template-btn', function(e){
            e.stopPropagation();
            var id = $(this).data('id');
            if (!confirm('Delete this template?')) return;
            $.ajax({
                url: DELETE_BASE + '/' + id,
                method: 'POST',
                data: { _token: CSRF, _method: 'DELETE' },
                success: function(res){ if (res.success) loadTemplates(); },
                error: function(){ alert('Failed to delete template.'); }
            });
        });

        $(document).ready(function(){ loadTemplates(); });
    })();
    </script>
@endsection