@extends('layouts.head_office_app')
@section('title', 'Head office Settings')
@section('content')
<style>
    div.dt-container .dt-layout-table {
        display: block !important;
    }

    div.dt-container div.dt-layout-cell.dt-end .dt-search label {
        display: none;
    }

    div.dt-container div.dt-layout-cell.dt-end .dt-search label {
        display: none;
    }

    div.dt-container div.dt-layout-cell.dt-end .dt-search::after {
        left: 8px;
    }

    div.dt-container .dt-search input {
        padding-left: 24px;
    }

    div.dt-container div.dt-layout-cell.dt-start select.dt-input {
        margin-right: 5px;
    }

    #locations-dataTable_wrapper {
        width: 97%;
        margin: 0 auto;
    }

    div.dt-container.dt-empty-footer .dt-scroll-body {
        border-bottom: none;
    }

    div.dt-container.dt-empty-footer .dt-scroll-body {
        border-bottom: none;
        padding-bottom: 10px;
    }

    .new-table tbody tr td:last-child {
        padding-right: 0px !important;
    }

    /* hidding edit button 😑 */
    .btn-wrapper-loc button:first-child {
        display: none;
    }

    .custom-button {
        font-size: 12px;
        scale: 0.8;
        padding: 5px;
    }
    .accordion-wrapper {
        margin-bottom: 5px;
    }

    .accordion-wrapper .accordion {
        background-color: #f4f3f3;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: 1px solid #dee2e6 !important;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
        border-radius: 5px;
    }

    .accordion-wrapper .active,
    .accordion-wrapper.accordion:hover {
        background-color: #d6d5d5;
    }

    .accordion-wrapper .panel {
        padding: 0 5px;
        display: none;
        background-color: white;
        overflow: hidden;
    }

    .accordion-wrapper .accordion:after {
        font-family: "Font Awesome 5 Free";
        content: "\f067";
        /* FontAwesome plus icon */
        font-weight: 900;
        font-size: 13px;
        color: #777;
        float: right;
        margin-left: 5px;
    }

    .accordion-wrapper .active:after {
        content: "\f068";
        /* FontAwesome minus icon */
    }

    .accordion-wrapper .form-new--custom {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .accordion-wrapper .panel ul {
        padding-inline: 0;
        padding-left: 5px;
    }

    .accordion-wrapper .panel ul li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .accordion-wrapper .panel ul li a,
    .accordion-wrapper .panel ul li label {
        min-width: 150px;
        font-size: 14px;
    }

    .accordion-wrapper .badge {
        width: fit-content !important;
    }

    .date-disable {
        pointer-events: none;
        background: #bdbcbc;
        opacity: 0.5;
    }
</style>
<div id="content" style="margin: 0;padding:0;">
    <div style="display: flex; justify-content: center; align-items: center;">
        <div style="width: 100%; display: flex; align-items: center; justify-content: center;">
              
            <span class="title-controls" >My Sites</span>
           
            </div>
    </div>

    @include('layouts.error')

<div class="modal fade" id="siteStatisticsModal" tabindex="-1" aria-labelledby="siteStatisticsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                {{-- <h5 class="modal-title" id="siteStatisticsModalLabel">Site and Group Statistics</h5> --}}
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                @php
                    // Statistics are now calculated in the controller using optimized database queries
                    // $activeSites, $notStartedSites, $notStartedSubmissions, and $groupStats are passed from controller
                @endphp

                <div class="row text-center mb-4">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Total Sites</h5>
                                <h3 class="text-primary">{{ $totalSites }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Active Sites</h5>
                                <h3 class="text-success">{{ $activeSites }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Not Started Sites</h5>
                                <h3 class="text-danger">{{ $notStartedSites }}</h3>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- <h5 class="text-center mb-3">Group Breakdown</h5> --}}
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Group</th>
                            <th>Total Sites</th>
                            <th>Active Sites</th>
                            <th>Not Started</th>
                            {{-- <th>Percentage</th> --}}
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($groupStats as $groupName => $stats)
                            <tr>
                                <td>{{ $groupName }}</td>
                                <td>{{ $stats['total'] }}</td>
                                <td class="text-success">{{ $stats['active'] }}</td>
                                <td class="text-danger">{{ $stats['not_started'] }}</td>
                                {{-- <td>{{ number_format(($stats['total'] / $totalAssignments) * 100, 1) }}%</td> --}}
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<section class="d-flex">
    <div class="ps-3 mt-5" style="max-width: 250px;">
        <h5 class="fw-bold">Sites Info</h5>
        <div class="d-flex flex-column justify-content-between align-items-start gap-2" >
                <div class="d-flex flex-column gap-1 align-items-start">
                    <span class="badge bg-secondary py-2" style="min-width:140px;">Total Sites: {{ $totalSites }}</span>
                    <span class="badge bg-success py-2" style="min-width:140px;background:#2BAFA5 !important;">Active: {{ $activeSites }}</span>
                    <span class="badge bg-danger py-2" style="min-width:140px;opacity:0.9;">Not Activated: {{ $notStartedSites }}</span>
                    <span class="badge bg-warning py-2" style="min-width:140px;opacity:0.9;">No Submissions: {{ $notStartedSubmissions }}</span>
                </div>
                <a href="{{ route('head_office.export_locations', request()->query()) }}" id="exportToExcel" class="primary-btn btn-sm" style="height: 35px;">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 15L12 3M12 15L8 11M12 15L16 11M2 17L2 19C2 20.1046 2.89543 21 4 21L20 21C21.1046 21 22 20.1046 22 19L22 17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    Export to Excel
                </a>
        </div>
        
        
        <div class="mt-3 ">
            <hr>
            <h5 class="fw-bold">Filters</h5>
            <form id="locationFilterForm" style="min-width: 200px;" class="d-flex flex-column gap-1" method="Post" action="{{route('head_office.location_page_filter')}}">
                @csrf
                <div class="accordion-wrapper">
                    <button class="accordion" type="button">
                        Activation Status
                    </button>
                    <div class="panel">
                        <select class="form-select mt-3 text-muted" id="activation_status" name="activation_status">
                            <option value="">All Sites</option>
                            <option value="1" {{ request('activation_status') == '1' ? 'selected' : '' }}>Active</option>
                            <option value="0" {{ request('activation_status') == '0' ? 'selected' : '' }}>Not Started</option>
                        </select>
                        <div class=" mt-2" id="formSubmissionFilter" style="{{ request('activation_status') == '1' ? '' : 'display: none;' }}">
                            <label for="form_submitted" class="form-label text-muted">Form Submitted</label>
                            <select class="form-select" id="form_submitted" name="form_submitted">
                                <option value="">All</option>
                                <option value="1" {{ request('form_submitted') == '1' ? 'selected' : '' }}>Yes</option>
                                <option value="0" {{ request('form_submitted') == '0' ? 'selected' : '' }}>No</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="accordion-wrapper">
                    <button class="accordion" type="button">
                        Assigned To
                    </button>
                    <div class="panel">
                        <div class="my-2 text-muted">
                            <select class="form-select select2" id="assigned_to" name="assigned_to[]" multiple>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}" {{ in_array($user->id, (array)request('assigned_to', [])) ? 'selected' : '' }}>
                                        {{ $user->user->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="accordion-wrapper">
                    <button class="accordion" type="button">
                        Tags
                    </button>
                    <div class="panel">
                        <div class="my-2">
                            <select class="form-select select2 text-muted" id="tags" name="tags[]" multiple>
                                @foreach($headOffice->location_tags as $tag)
                                    <option value="{{ $tag->id }}" {{ in_array($tag->id, (array)request('tags', [])) ? 'selected' : '' }}>
                                        {{ $tag->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="accordion-wrapper">
                    <button class="accordion" type="button">
                        Sites
                    </button>
                    <div class="panel">
                        <ul>
                            <li class="d-flex align-items-center flex-column">
                                <p style="font-size: 12px;" class="text-muted">Please select a Groups/Sites.</p>
                                <div class="treeselect"></div>
                            </li>
                        </ul>
                    </div>
                </div>

                {{-- tree hidden inpute --}}
                <input type="hidden" id="tree-hidden" name="tree_values">

                <div class="d-flex flex-column gap-2 justify-content-between">
                    <button type="submit" class="primary-btn">
                        <i class="fa-solid fa-filter"></i> Apply Filters
                        <span id="filterCount" class="badge bg-white text-primary ms-1" style="display: none;"></span>
                    </button>
                    <a href="{{ route('head_office.locations_page') }}" class="outline-btn">
                        <i class="fa-solid fa-xmark"></i> Clear Filters
                    </a>
                </div>
            </form>
        </div>
    </div>
        @if(isset($locations) && count($locations) > 0)
        <div style="width: 100%; margin-bottom: 20px;">
    <!-- Top Bar -->
    <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px 0; width: 96%;">
        <div><div class="search-container" style="width: 300px;">
        <form method="GET" action="{{ url()->current() }}" id="searchForm">
            <!-- Preserve existing filters -->
            @if(request('activation_status'))
                <input type="hidden" name="activation_status" value="{{ request('activation_status') }}">
            @endif
            @if(request('form_submitted'))
                <input type="hidden" name="form_submitted" value="{{ request('form_submitted') }}">
            @endif
            @if(request('tags'))
                @foreach(request('tags') as $tag)
                    <input type="hidden" name="tags[]" value="{{ $tag }}">
                @endforeach
            @endif
            @if(request('tree_values'))
                <input type="hidden" name="tree_values" value="{{ request('tree_values') }}">
            @endif
            @if(request('assigned_to'))
                @foreach(request('assigned_to') as $user)
                    <input type="hidden" name="assigned_to[]" value="{{ $user }}">
                @endforeach
            @endif
            @if(request('per_page'))
                <input type="hidden" name="per_page" value="{{ request('per_page') }}">
            @endif
            
            <div class="input-group">
                <input type="text" class="form-control" name="search" placeholder="Search locations..." 
                       value="{{ request('search') }}" id="searchInput">
                <button class="btn btn-outline-secondary" type="submit">
                    <i class="fa fa-search"></i>
                </button>
                @if(request('search'))
                    <a href="{{ url()->current() }}?{{ http_build_query(request()->except('search')) }}" 
                       class="btn btn-outline-secondary">
                        <i class="fa fa-times"></i>
                    </a>
                @endif
            </div>
        </form>
    </div></div>
        <div><div class="d-flex justify-content-center mt-4">
    {{ $locations->links('pagination::bootstrap-4') }}
</div></div>
    </div>

    <!-- Table -->
    <div style="width: 100%;">
        <div class="">
    <table class="new-table mx-auto" style="width: 100% !important;" id="locations-dataTable">
        <thead>
            <th>Username</th>
            <th>Info</th>
            @if($ho_u->is_code_show == '1')
                <th style="width: 100px;">2FA Codes</th>
            @endif
            <th>Tags</th>
            <th></th>
        </thead>
        <tbody>
            @forelse ($locations as $loc)
                <tr>
                    <td>
                        <div style="width: fit-content !important;" class="main-wrapper-loc  resizing-input"
                            onmouseenter="hoverFunction(this)" onmouseleave='leaveHoverFunction(this)'>
                            <input onblur="blurFunction(this)" data-column='username-{{ $loc->location_id }}' type="text"
                                value="{{ $loc->location->username }}" readonly>
                            <span style="display:none;"></span>

                            <div class="btn-wrapper-loc">
                                <button title="click to edit" onclick="editFunction('username-{{ $loc->location_id }}')"><i
                                        class="fa-regular fa-pen-to-square"></i></button>
                                <button title="click to copy text"
                                    onclick="copyFunction('username-{{ $loc->location_id }}')"><i
                                        class="fa-regular fa-copy"></i></button>
                            </div>
                        </div>
                        @if (isset($loc->location->location_type))
                            <div class="border border-2 p-1 mt-2 rounded" style="width: fit-content;font-size:10px;">
                                {{$loc->location->location_type->name}}
                            </div>
                        @endif
                    </td>
                    <td>
                        <div class="m-0 d-flex flex-column gap-1" style="line-height:1.1;max-width:400px">
                            <div class="main-wrapper-loc  resizing-input" onmouseenter="hoverFunction(this)"
                                onmouseleave='leaveHoverFunction(this)'>
                                <input onblur="blurFunction(this)" data-column="location_code-{{ $loc->location_id }}"
                                    type="text" value="{{ $loc->location->trading_name }}" readonly>
                                <span style="display:none;"></span>
                                <div class="btn-wrapper-loc">
                                    <button title="click to edit"
                                        onclick="editFunction('location_code-{{ $loc->location_id }}')"><i
                                            class="fa-regular fa-pen-to-square"></i></button>
                                    <button title="click to copy text"
                                        onclick="copyFunction('location_code-{{ $loc->location_id }}')"><i
                                            class="fa-regular fa-copy"></i></button>
                                </div>

                            </div>
                            <div>
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M5 14.2864C3.14864 15.1031 2 16.2412 2 17.5C2 19.9853 6.47715 22 12 22C17.5228 22 22 19.9853 22 17.5C22 16.2412 20.8514 15.1031 19 14.2864M18 8C18 12.0637 13.5 14 12 17C10.5 14 6 12.0637 6 8C6 4.68629 8.68629 2 12 2C15.3137 2 18 4.68629 18 8ZM13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8Z"
                                        stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                {{ $loc->location->full_address }}
                            </div>
                            <div>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M2 7L10.1649 12.7154C10.8261 13.1783 11.1567 13.4097 11.5163 13.4993C11.8339 13.5785 12.1661 13.5785 12.4837 13.4993C12.8433 13.4097 13.1739 13.1783 13.8351 12.7154L22 7M6.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>
                                {{ $loc->location->email }} <span class="badge bg-info">primary</span>
                            </div>
                            <div>
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M8.38028 8.85335C9.07627 10.303 10.0251 11.6616 11.2266 12.8632C12.4282 14.0648 13.7869 15.0136 15.2365 15.7096C15.3612 15.7694 15.4235 15.7994 15.5024 15.8224C15.7828 15.9041 16.127 15.8454 16.3644 15.6754C16.4313 15.6275 16.4884 15.5704 16.6027 15.4561C16.9523 15.1064 17.1271 14.9316 17.3029 14.8174C17.9658 14.3864 18.8204 14.3864 19.4833 14.8174C19.6591 14.9316 19.8339 15.1064 20.1835 15.4561L20.3783 15.6509C20.9098 16.1824 21.1755 16.4481 21.3198 16.7335C21.6069 17.301 21.6069 17.9713 21.3198 18.5389C21.1755 18.8242 20.9098 19.09 20.3783 19.6214L20.2207 19.779C19.6911 20.3087 19.4263 20.5735 19.0662 20.7757C18.6667 21.0001 18.0462 21.1615 17.588 21.1601C17.1751 21.1589 16.8928 21.0788 16.3284 20.9186C13.295 20.0576 10.4326 18.4332 8.04466 16.0452C5.65668 13.6572 4.03221 10.7948 3.17124 7.76144C3.01103 7.19699 2.93092 6.91477 2.9297 6.50182C2.92833 6.0436 3.08969 5.42311 3.31411 5.0236C3.51636 4.66357 3.78117 4.39876 4.3108 3.86913L4.46843 3.7115C4.99987 3.18006 5.2656 2.91433 5.55098 2.76999C6.11854 2.48292 6.7888 2.48292 7.35636 2.76999C7.64174 2.91433 7.90747 3.18006 8.43891 3.7115L8.63378 3.90637C8.98338 4.25597 9.15819 4.43078 9.27247 4.60655C9.70347 5.26945 9.70347 6.12403 9.27247 6.78692C9.15819 6.96269 8.98338 7.1375 8.63378 7.4871C8.51947 7.60142 8.46231 7.65857 8.41447 7.72538C8.24446 7.96281 8.18576 8.30707 8.26748 8.58743C8.29048 8.66632 8.32041 8.72866 8.38028 8.85335Z"
                                        stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                {{ $loc->location->telephone_no }} <span class="badge bg-info">primary</span>
                            </div>
                        </div>
                        @if ($loc->location->password_changed == false)
                            <span class="text-danger d-flex align-items-center gap-1">
                                <span style="width:4px;height:4px;" class="bg-danger rounded-circle d-flex"></span>
                                Not activated by site team 
                            </span>
                        @endif
                        @if ($loc->location->records()->exists() == false)
                                <span class="text-danger d-flex align-items-center gap-1">
                            <span style="width:4px;height:4px;" class="bg-danger rounded-circle d-flex"></span>
                            Not started submissions
                        </span>
                        @endif
                    </td>
                    @if($ho_u->is_code_show == '1')
                        <td>
                            <button data-loc-id="{{$loc->location_id}}" class="verification-code-btn primary-btn"
                                style="margin:0; padding: 5px; width: fit-content; font-size: 12px">
                                <svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="15px" height="15px"
                                    viewBox="0 0 536.541 536.541" xml:space="preserve">
                                    <path
                                        d="M496.785,152.779c-3.305-25.085-16.549-51.934-38.826-74.205c-22.264-22.265-49.107-35.508-74.186-38.813c-11.348-1.499-26.5-7.766-35.582-14.737C328.111,9.626,299.764,0,268.27,0s-59.841,9.626-79.921,25.024c-9.082,6.965-24.235,13.238-35.582,14.737c-25.08,3.305-51.922,16.549-74.187,38.813c-22.277,22.271-35.521,49.119-38.825,74.205c-1.493,11.347-7.766,26.494-14.731,35.57C9.621,208.422,0,236.776,0,268.27s9.621,59.847,25.024,79.921c6.971,9.082,13.238,24.223,14.731,35.568c3.305,25.086,16.548,51.936,38.825,74.205c22.265,22.266,49.107,35.51,74.187,38.814c11.347,1.498,26.5,7.771,35.582,14.736c20.073,15.398,48.421,25.025,79.921,25.025s59.841-9.627,79.921-25.025c9.082-6.965,24.234-13.238,35.582-14.736c25.078-3.305,51.922-16.549,74.186-38.814c22.277-22.27,35.521-49.119,38.826-74.205c1.492-11.346,7.766-26.492,14.73-35.568c15.404-20.074,25.025-48.422,25.025-79.921c0-31.494-9.621-59.848-25.025-79.921C504.545,179.273,498.277,164.126,496.785,152.779z M439.256,180.43L246.477,373.209l-30.845,30.846c-8.519,8.52-22.326,8.52-30.845,0l-30.845-30.846l-56.665-56.658c-8.519-8.52-8.519-22.326,0-30.846l30.845-30.844c8.519-8.519,22.326-8.519,30.845,0l41.237,41.236L377.561,118.74c8.52-8.519,22.326-8.519,30.846,0l30.844,30.845C447.775,158.104,447.775,171.917,439.256,180.43z" />
                                </svg> 2FA Codes
                            </button>
                        </td>
                    @endif
                    <td>
                        @livewire('location-tags-manager', ['loc_id' => $loc->location->id])
                    </td>
                    <td>
                        <div style="display: none">
                            @foreach ($loc->groups as $g)
                                {{($g->group->group)}};
                            @endforeach
                        </div>
                        <div class="d-flex flex-column gap-2 " style="width: 80%;">
                            <a href="{{route('head_office.color_branding_get', ['id' => $loc->location_id, '_token' => csrf_token()])}}"
                                class="primary-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M20.7914 12.6074C21.0355 12.3981 21.1575 12.2935 21.2023 12.169C21.2415 12.0598 21.2415 11.9402 21.2023 11.831C21.1575 11.7065 21.0355 11.6018 20.7914 11.3926L12.3206 4.13196C11.9004 3.77176 11.6903 3.59166 11.5124 3.58725C11.3578 3.58342 11.2101 3.65134 11.1124 3.77122C11 3.90915 11 4.18589 11 4.73936V9.03462C8.86532 9.40807 6.91159 10.4897 5.45971 12.1139C3.87682 13.8845 3.00123 16.1759 3 18.551V19.1629C4.04934 17.8989 5.35951 16.8765 6.84076 16.1659C8.1467 15.5394 9.55842 15.1683 11 15.0705V19.2606C11 19.8141 11 20.0908 11.1124 20.2288C11.2101 20.3486 11.3578 20.4166 11.5124 20.4127C11.6903 20.4083 11.9004 20.2282 12.3206 19.868L20.7914 12.6074Z"
                                        stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                Remotely Access</a>
                            <a href="{{ route('head_office.location_page_view', ['id' => $loc->id, '_token' => csrf_token()]) }}"
                                class="outline-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M12 16V21M12 16L18 21M12 16L6 21M21 3V11.2C21 12.8802 21 13.7202 20.673 14.362C20.3854 14.9265 19.9265 15.3854 19.362 15.673C18.7202 16 17.8802 16 16.2 16H7.8C6.11984 16 5.27976 16 4.63803 15.673C4.07354 15.3854 3.6146 14.9265 3.32698 14.362C3 13.7202 3 12.8802 3 11.2V3M8 9V12M12 7V12M16 11V12M22 3H2"
                                        stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                View</a>
                            <a href="{{ route('head_office.create_task', ['loc_id' => $loc->id]) }}" class="primary-btn" target="_blank">Send Task</a>
                            @if ($ho_u->get_permissions() !== null)
                                @if ($ho_u->get_permissions()->super_access)
                                    <a href="#" data-super="1" data-show_link="{{$loc->location->is_admin_password}}"
                                        data-id="{{$loc->id}}"
                                        data-link='{{ route('head_office.location.password_reset_link', ['id' => $loc->location_id, '_token' => csrf_token()]) }}'
                                        class="primary-btn password-reset-btn" data-bs-toggle='modal'
                                        data-bs-target='#password_modal' data-bs-placement='left'
                                        title="send password reset email to location account">Password Reset</a>
                                @elseif (in_array($loc->id, $ho_u->get_assigned_locs()->pluck('id')->toArray()))
                                    <a href="#" data-super="0" data-show_link="{{$loc->location->is_admin_password}}"
                                        data-id="{{$loc->id}}"
                                        data-link='{{ route('head_office.location.password_reset_link', ['id' => $loc->location_id, '_token' => csrf_token()]) }}'
                                        class="primary-btn password-reset-btn" data-bs-toggle='modal'
                                        data-bs-target='#password_modal' data-bs-placement='left'
                                        title="send password reset email to location account">Password Reset</a>
                                @endif
                            @endif
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="{{ $ho_u->is_code_show == '1' ? '5' : '4' }}" class="text-center py-4">
                        <div class="text-muted">
                            @if(request('search'))
                                <i class="fa fa-search fa-2x mb-2"></i>
                                <p>No locations found matching "{{ request('search') }}"</p>
                                <a href="{{ url()->current() }}?{{ http_build_query(request()->except('search')) }}" class="btn btn-sm btn-outline-primary">
                                    Clear Search
                                </a>
                            @else
                                <i class="fa fa-map-marker fa-2x mb-2"></i>
                                <p>No locations found</p>
                            @endif
                        </div>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>
    </div>
</div>

        @else
            <p class="mx-4">No Locations Assigned yet!</p>
        @endif
</section>

</div>
<div class="modal fade" id="group_assing_modal" tabindex="-1" aria-labelledby="group_assing_modalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="group_assing_modalLabel">Assign to</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="group-content-wrapper">

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{{-- passwords modal --}}
<div class="modal fade" id="password_modal" tabindex="-1" aria-labelledby="password_modalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content password-loc-card">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="password_modalLabel">Password Reset Settings</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="d-flex gap-4 flex-column">
                    <p style="display: none;" id="admin-msg">Only Admin can Change the passsword</p>
                    <a href="#" class="primary-btn  p-3 justify-content-center " id="password_reset_link"><svg
                            width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M22 11V8.2C22 7.0799 22 6.51984 21.782 6.09202C21.5903 5.71569 21.2843 5.40973 20.908 5.21799C20.4802 5 19.9201 5 18.8 5H5.2C4.0799 5 3.51984 5 3.09202 5.21799C2.71569 5.40973 2.40973 5.71569 2.21799 6.09202C2 6.51984 2 7.0799 2 8.2V11.8C2 12.9201 2 13.4802 2.21799 13.908C2.40973 14.2843 2.71569 14.5903 3.09202 14.782C3.51984 15 4.0799 15 5.2 15H11M12 10H12.005M17 10H17.005M7 10H7.005M19.25 17V15.25C19.25 14.2835 18.4665 13.5 17.5 13.5C16.5335 13.5 15.75 14.2835 15.75 15.25V17M12.25 10C12.25 10.1381 12.1381 10.25 12 10.25C11.8619 10.25 11.75 10.1381 11.75 10C11.75 9.86193 11.8619 9.75 12 9.75C12.1381 9.75 12.25 9.86193 12.25 10ZM17.25 10C17.25 10.1381 17.1381 10.25 17 10.25C16.8619 10.25 16.75 10.1381 16.75 10C16.75 9.86193 16.8619 9.75 17 9.75C17.1381 9.75 17.25 9.86193 17.25 10ZM7.25 10C7.25 10.1381 7.13807 10.25 7 10.25C6.86193 10.25 6.75 10.1381 6.75 10C6.75 9.86193 6.86193 9.75 7 9.75C7.13807 9.75 7.25 9.86193 7.25 10ZM15.6 21H19.4C19.9601 21 20.2401 21 20.454 20.891C20.6422 20.7951 20.7951 20.6422 20.891 20.454C21 20.2401 21 19.9601 21 19.4V18.6C21 18.0399 21 17.7599 20.891 17.546C20.7951 17.3578 20.6422 17.2049 20.454 17.109C20.2401 17 19.9601 17 19.4 17H15.6C15.0399 17 14.7599 17 14.546 17.109C14.3578 17.2049 14.2049 17.3578 14.109 17.546C14 17.7599 14 18.0399 14 18.6V19.4C14 19.9601 14 20.2401 14.109 20.454C14.2049 20.6422 14.3578 20.7951 14.546 20.891C14.7599 21 15.0399 21 15.6 21Z"
                                stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        Send Password Reset Link</a>
                    <button class="primary-btn p-3 justify-content-center " id="direct-pass"> <svg width="24"
                            height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M12 12H12.005M17 12H17.005M7 12H7.005M5.2 7H18.8C19.9201 7 20.4802 7 20.908 7.21799C21.2843 7.40973 21.5903 7.71569 21.782 8.09202C22 8.51984 22 9.0799 22 10.2V13.8C22 14.9201 22 15.4802 21.782 15.908C21.5903 16.2843 21.2843 16.5903 20.908 16.782C20.4802 17 19.9201 17 18.8 17H5.2C4.0799 17 3.51984 17 3.09202 16.782C2.71569 16.5903 2.40973 16.2843 2.21799 15.908C2 15.4802 2 14.9201 2 13.8V10.2C2 9.0799 2 8.51984 2.21799 8.09202C2.40973 7.71569 2.71569 7.40973 3.09202 7.21799C3.51984 7 4.0799 7 5.2 7ZM12.25 12C12.25 12.1381 12.1381 12.25 12 12.25C11.8619 12.25 11.75 12.1381 11.75 12C11.75 11.8619 11.8619 11.75 12 11.75C12.1381 11.75 12.25 11.8619 12.25 12ZM17.25 12C17.25 12.1381 17.1381 12.25 17 12.25C16.8619 12.25 16.75 12.1381 16.75 12C16.75 11.8619 16.8619 11.75 17 11.75C17.1381 11.75 17.25 11.8619 17.25 12ZM7.25 12C7.25 12.1381 7.13807 12.25 7 12.25C6.86193 12.25 6.75 12.1381 6.75 12C6.75 11.8619 6.86193 11.75 7 11.75C7.13807 11.75 7.25 11.8619 7.25 12Z"
                                stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        Change Password Direclty</button>
                    <form action="{{route('location.password_direct_update.update')}}" method="POST"
                        id="location_pass_form" style="display: none;">
                        @csrf
                        <input type="hidden" name="loc_id" id="loc_pass_id">
                        <p class="mb-1 mt-2" style="font-size: 12px;font-weight: 500;">Enter New Password</p>
                        <input class="form-control shadow-none" type="text" name="password" id="password" minlength="8"
                            placeholder="Enter new password ">
                        <button class="primary-btn mt-2 justify-content-center">Update Password</button>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>



{{-- modal to show verification codes --}}
<div id="verificationModale" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="verificationModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="verificationModalLabel">Verification Codes</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="verificationCodeWrap">


                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Add this script at the end of your file or in your scripts section -->
<link href="{{ asset('admin_assets/tree_select/treeselect.css') }}" rel="stylesheet" />
<script src="{{ asset('admin_assets/tree_select/treeselect.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
<script>
    $(".accordion").click(function() {
        $(this).toggleClass("active");
        $(this).next().slideToggle();
    });
</script>
@section('scripts')
<script>
    const options = @json($headOffice->getOrganisationTree());
        const domEl = document.querySelector('.treeselect')
        const treeselect = new Treeselect({
        parentHtmlContainer: domEl,
        value: [],
        options: options,
        alwaysOpen: false,
        appendToBody: true,
        listSlotHtmlComponent: null,
        disabled: false,
        emptyText: 'No data text',
        showCount:true,
        isGroupedValue:true,
        isIndependentNodes:true
        })
        let loc_params = [];
        treeselect.srcElement.addEventListener('input', (e) => {
            $('#tree-hidden').val(e.detail);
        })
        
    $(document).ready(function () {
        loadActiveTab();

        let table = new DataTable('#locations-dataTable', {
    width: '100%',
    paging: false, // Disables pagination functionality
    searching: false, // Disables the search bar
    dom: 't', // Only show the table ('t'), no pagination or filter/search inputs
    fixedHeader: {
        header: true
    },
    scrollCollapse: true,
    initComplete: function (settings, json) {
        $('body').find('.dt-scroll-body').addClass("custom-scroll");
    }
});

    });
    window.addEventListener('DOMContentLoaded', (event) => {
        $(document).ready(function () {
            $('.select_2_custom').select2({
                tags: true,
            });
        });
    });

    function loadActiveTab(tab = null) {
        if (tab == null) {
            tab = window.location.hash;
        }
        console.log(tab);
        $('.nav-tabs button[data-bs-target="' + tab + '"]').tab('show');
    }

    $(document).ready(function () {
        $('.btn-group-assign').on('click', function () {
            const mainContent = $(this).parent().siblings().find('.inside-content');
            $('.group-content-wrapper').empty().append(mainContent.clone());
        })
    })

    function copyFunction(inputId) {
        var copyText = document.querySelector(`[data-column="${inputId}"]`);
        copyText.select();
        copyText.setSelectionRange(0, 99999);
        navigator.clipboard.writeText(copyText.value);
    }
    function hoverFunction(element) {
        $(element).find('.btn-wrapper-loc').stop(true, true).css('visibility', 'visible');
    }

    function leaveHoverFunction(element) {
        $(element).find('.btn-wrapper-loc').stop(true, true).css('visibility', 'hidden');
    }

    $('.password-reset-btn').on('click', function () {
        console.log($(this).data('show_link'));
        if ($(this).data('show_link') == 0) {
            $('#password_reset_link').fadeOut('fast');
        } else {

            $('#password_reset_link').attr('href', $(this).data('link')).fadeIn('fast');
            $('#loc_pass_id').val($(this).data('id'));
            console.log($(this).data('id'))
        }

        if ($(this).data('super') == 1) {
            $('#direct-pass').fadeIn('fast');
            $('#loc_pass_id').val($(this).data('id'));
        } else {
            $('#direct-pass').fadeOut('fast');
        }

        if ($(this).data('show_link') == 0 && $(this).data('super') == 0) {
            $('#admin-msg').fadeIn();
        } else {
            $('#admin-msg').fadeOut();
        }
    })
    $('#direct-pass').on('click', function () {
        $('#location_pass_form').slideToggle();
    })


    // when click on verification code button,  modal will be show
    $(document).on('click', '.verification-code-btn', function () {
        const codeWrap = $('#verificationCodeWrap');
        const location_id = $(this).data('loc-id');

        $.ajax({
            url: '/get-loc-codes/' + location_id,
            type: 'GET',
            dataType: 'html',
            success: function (response) {
                codeWrap.empty().append(response);
                $('#verificationModale').modal('show');
            },
            error: function () {
                codeWrap.html('<p class="text-danger">Error loading verification codes.</p>');
            }
        });
    });

</script>
<script>
    // Add this to your JavaScript file or in a script tag at the bottom of your page
document.addEventListener('DOMContentLoaded', function() {
    // Initialize select2 for multiple select dropdowns
    $('.select2').select2({
        placeholder: 'Select options',
        allowClear: true
    });
    
    // Show form submission filter only when activation status is "Active"
    $('#activation_status').on('change', function() {
        if ($(this).val() === '1') {
            $('#formSubmissionFilter').show();
        } else {
            $('#formSubmissionFilter').hide();
            $('#form_submitted').val('');
        }
    });
    
    // Toggle group tree items
    $('.tree-toggle').on('click', function() {
        $(this).find('i').toggleClass('fa-chevron-down fa-chevron-right');
    });
    
    // Handle parent-child relationship in checkboxes
    $('.group-checkbox').on('change', function() {
        const isChecked = $(this).prop('checked');
        const parentLi = $(this).closest('li');
        
        // Check/uncheck all children
        parentLi.find('.collapse .group-checkbox').prop('checked', isChecked);
        
        // Update parent checkboxes
        updateParentCheckbox($(this));
        
        // Update filter count
        updateFilterCount();
    });
    
    function updateParentCheckbox(checkbox) {
        const parentUl = checkbox.closest('ul');
        const parentLi = parentUl.closest('li');
        
        if (parentLi.length) {
            const parentCheckbox = parentLi.find('> .form-check > .group-checkbox');
            const siblingCheckboxes = parentUl.find('> li > .form-check > .group-checkbox');
            const allChecked = siblingCheckboxes.length === siblingCheckboxes.filter(':checked').length;
            const someChecked = siblingCheckboxes.filter(':checked').length > 0;
            
            if (allChecked) {
                parentCheckbox.prop('checked', true);
                parentCheckbox.prop('indeterminate', false);
            } else if (someChecked) {
                parentCheckbox.prop('indeterminate', true);
                parentCheckbox.prop('checked', false);
            } else {
                parentCheckbox.prop('indeterminate', false);
                parentCheckbox.prop('checked', false);
            }
            
            // Recursively update parent checkboxes
            updateParentCheckbox(parentCheckbox);
        }
    }
    
    // Add filter count badge to show how many filters are active
    function updateFilterCount() {
        let activeFilters = 0;
        
        if ($('#activation_status').val()) activeFilters++;
        if ($('#form_submitted').val()) activeFilters++;
        if ($('#assigned_to').val() && $('#assigned_to').val().length > 0) activeFilters++;
        if ($('#tags').val() && $('#tags').val().length > 0) activeFilters++;
        if ($('.group-checkbox:checked').length > 0) activeFilters++;
        
        const filterCountBadge = $('#filterCount');
        
        if (activeFilters > 0) {
            filterCountBadge.text(activeFilters).show();
            
            // If filters are active and filter panel is closed, add indication to the show filters button
            if (!$('#filterCollapse').hasClass('show')) {
                $('.card-header button').addClass('filter-active').html('<i class="fa-solid fa-filter"></i> Show Filters <span class="badge bg-white text-primary ms-1">' + activeFilters + '</span>');
            }
        } else {
            filterCountBadge.hide();
            $('.card-header button').removeClass('filter-active').html('<i class="fa-solid fa-filter"></i> Show Filters');
        }
    }
    
    // Auto-expand filter collapse if any filters are applied
    if (
        $('#activation_status').val() || 
        $('#form_submitted').val() || 
        $('#assigned_to').val()?.length > 0 || 
        $('#tags').val()?.length > 0 || 
        $('.group-checkbox:checked').length > 0
    ) {
        $('#filterCollapse').addClass('show');
        updateFilterCount();
    }
    
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.has('activation_status') || urlParams.has('form_submitted') || 
        urlParams.has('assigned_to') || urlParams.has('tags') || urlParams.has('tree_values') || 
        urlParams.has('search')) {
        updateFilterCount();
    }
    
    // Call updateFilterCount when any filter changes
    $('#locationFilterForm select').on('change', updateFilterCount);
    
    // Add some minimal CSS for better appearance
    const style = document.createElement('style');
    style.innerHTML = `
        .filter-active {
            background-color: #0d6efd !important;
            color: white !important;
        }
        .select2-container {
            width: 100% !important;
        }
        .tree-toggle {
            padding: 0 5px;
            margin-left: 5px;
            font-size: 12px;
        }
    `;
    document.head.appendChild(style);
});
</script>




<script src="{{ asset('js/alertify.min.js') }}"></script>

@endsection
@endsection