@extends('layouts.location_app')
@section('title', 'Be Spoke Form Records')
@section('content')
    @php
        $location = Auth::guard('location')->user() ?? Auth::guard('remote_location')->user();
        $forms = $location->group_forms();
        $headOffice = $location->head_office();

        $user = Auth::guard('web')->user() ?? Auth::guard('user')->user();
        $userMain = Auth::guard('web')->user() ?? Auth::guard('user')->user();
        $positions = [
            1 => 'Accuracy Checking Technician (ACT)',
            2 => 'Pharmacy Apprentice',
            3 => 'Counter Assistant',
            4 => 'Dispenser',
            5 => 'Driver',
            6 => 'Pharmacist',
            7 => 'Pre-registration Pharmacist',
            8 => 'Pharmacy Technician',
            9 => 'Pharmacy Assistant',
        ];

    @endphp
    <style>
        @font-face {
            font-family: 'Literra';
            src: url('data:font/woff2;base64,YOUR_BASE64_ENCODED_FONT_HERE') format('woff2');
            font-weight: normal;
            font-style: normal;
        }

        .select2-container--open {
            z-index: 9999999 !important;
        }

        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: #4BC2D9 !important;
        }

        .select2-container--default.select2-container--focus .select2-selection--multiple {
            border: solid #d5d2d2 1px;
        }

        #report-now-menu-menu {
            top: 0px !important;
        }

        .top-heading-center-tabs {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            background-color: orange;
            padding: 10px;
            width: 250px;
        }

        .top-heading-center-tabs a {
            display: flex;
            align-items: center;
            text-decoration: none;
            padding: 10px;
            color: #5ac1b6;
            /* Default color */
            width: 100%;
            transition: background 0.3s ease-in-out;
        }

        .top-heading-center-tabs a svg {
            margin-right: 10px;
        }

        .top-heading-center-tabs a:hover,
        .top-heading-center-tabs a.active {
            background: rgba(255, 255, 255, 0.2);
            /* Highlight on hover */
            color: black;
        }

        .btn.active-btn {
            background: #fafafa;
            box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.055) !important;
        }

        .tooltip {
            z-index: 99999999999999 !important;
        }


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


        .container {
            display: flex;
            height: 100vh;

        }

        .sidebar {
            width: 255px;
            background-color: transparent;
            color: white;
            padding: 0px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 30px;
            border-right: 2px solid rgb(226, 226, 226);
        }


        .heading-center {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 26px;
            font-weight: bold;
            text-align: center;
            width: 100%;
            border-bottom: 2px solid rgb(226, 226, 226);
            padding: 16px;
        }

        .main-content {
            width: 95%;
        }

        .menue-items {
            display: flex;
            flex-direction: column;
            width: 90%;
            border-top: 1px solid rgb(168, 168, 168);
            border-bottom: 1px solid rgb(168, 168, 168);
        }

        .border-bottom-color {
            border-bottom: 1px solid rgb(168, 168, 168);
        }

        .item-outer-div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 8px 0px;
            font-size: 15px;
        }

        .literraFont {
            font-family: 'Literra', Arial, sans-serif !important;
        }

        .body-inner-div {
            display: flex;
            width: 100%;
        }


        .timeline-div {
            width: 85%;
        }

        .right-div {
            width: 15%;
        }

        /* side bar colors */
        .custom-link {
            color: black;
            text-decoration: none;
        }


        .custom-icon {
            fill: none !important;
            stroke: #030303 !important;
            stroke-width: 2;
        }


        .gray-angle {
            color: rgb(153, 153, 153);
        }

        .custom-link:hover,
        .custom-link:hover .custom-icon,
        .custom-link:hover .gray-angle {
            stroke: {{ $location->organization_setting_assignment->organization_setting->location_tab_color ?? '#5ac1b6' }} !important;
            color: {{ $location->organization_setting_assignment->organization_setting->location_tab_color ?? '#5ac1b6' }} !important;
        }


        .active,
        .active .custom-icon,
        .active .gray-angle {
            stroke: {{ $location->organization_setting_assignment->organization_setting->location_tab_color ?? '#5ac1b6' }} !important;
            color: {{ $location->organization_setting_assignment->organization_setting->location_tab_color ?? '#5ac1b6' }} !important;
            font-weight: 600;
        }

        #searchInput::placeholder {
            color: rgb(176, 176, 176) !important;
            opacity: 1 !important;
        }


        /* tooltip */
        .tooltip-container {
            position: relative;
            display: inline-block;
            cursor: pointer;
            margin-left: 10px;
        }

        .tooltip-container .tooltip-text {
            visibility: hidden;
            width: 270px;
            background-color: white;
            color: rgb(27, 27, 27);
            text-align: center;
            padding: 8px;
            border-radius: 5px;
            position: absolute;
            top: 140%;
            /* Position below the icon */
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
            font-size: 13px;
            font-family: Arial, sans-serif;
            white-space: normal;
            border: 1px solid #ccc;
            z-index: 10;
            opacity: 0;
            transition: opacity 0.2s ease-in-out;
            word-wrap: break-word;
            font-weight: 300;
        }

        .tooltip-container .tooltip-text::after {
            content: "";
            position: absolute;
            bottom: 100%;
            /* Position the arrow at the top of the tooltip */
            left: 50%;
            transform: translateX(-50%);
            border-width: 6px;
            border-style: solid;
            border-color: transparent transparent white transparent;
            /* Arrow pointing upwards */
        }

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

        .filter-icon {
            cursor: pointer;
        }

        .search-wali-input::placeholder {
            color: rgb(176, 176, 176) !important;
            opacity: 1 !important;
        }
    </style>
    <div id="form-content">



        {{-- side bar --}}
        <div class="sidebar">



            {{-- side Bar --}}



            <div style="text-align: center; margin-bottom: 30px; background: {{ $location->organization_setting_assignment->organization_setting->location_report_now_button_color ?? '#5ac1b6' }}; 
            width:80%"
                class="report-now-menu e-drop-down py-2 btn-sm flex align-items-center justify-content-center">
                <a href="#"
                    style="font-weight: bold; color: {{ $location->organization_setting_assignment->organization_setting->location_report_now_button_text_color ?? '#000000' }};"
                    class="report-now-menu literraFont e-drop-down py-2 btn-sm flex align-items-center justify-content-center"
                    data-target="#report-now-menu-menu"> Report Now
                    <span></span>
                </a>
            </div>

            <div id="report-now-menu-menu" style="z-index: 999999;top:10px !important;left:0px !important;"
                class="custom-menu report-now-menu-tr general-dropdown-menu hidden report-now-menu-menu-color">
                <div class="row">
                    {{-- <span style="width: 100%; display:flex; justify-content: end;">
                    <svg class="filter-icon" id="filter-icon-btn" xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 27 27" fill="none" stroke="gray" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M3 4h18l-7 9v6l-4 2v-8z"/>
                    </svg>
                         
                </span> --}}
                    {{-- <div class="form-group" id="form-searchBar" style="display: none"> --}}
                    <div id="form-searchBar">
                        <label for="searchInput">Search forms:</label>
                        <input type="text" class="form-control p-1" placeholder="Search forms..." id="searchInput">
                    </div>

                    {{-- <hr class="my-2 w-75 mx-auto bg-info text-info border-info"> --}}
                    <div class="col-12">
                        <ul style="list-style: none; font-weight: bold;">
                            <hr class="my-1 w-75 mx-auto opacity-0 " style="opacity: 0;">
                            {{-- <li>
                     <a class="collapse-item report-now-menu-menu-color" href="{{route('location.dispensing_incidents')}}">
                         Dispensing Incident
                     </a>
                 </li> --}}
                            @if (count($forms))
                                @foreach ($forms->groupBy('category.name') as $category => $forms2)
                                    @if ($forms2->where('is_active', true)->isNotEmpty())
                                        <li style="display: flex; flex-direction: column;">
                                            <div class="blue-heading"
                                                style="color: var(--location-section-heading-color); display: block;">
                                                {{ $category }}
                                            </div>
                                            <ul
                                                style="list-style: none; padding-left: 0 !important; padding-top: 0 !important;">
                                                @foreach ($forms2 as $form)
                                                    @if ($form->is_active)
                                                        @if ($form->submitable_to_nhs_lfpse == true && $form->location_type_id == 1)
                                                            <li class="formItem">
                                                                <a class="collapse-item report-now-menu-menu-color fw-normal"
                                                                    href="{{ route('location.form.check_form_limits', ['formId' => $form->id]) }}"
                                                                    @if (!$form->checkFormLimits())  @endif>{{ $form->name }}</a>
                                                                @if ($form->note)
                                                                    <span class="tooltip-container">
                                                                        <svg style="width: 20px; height: 20px;"
                                                                            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">
                                                                            {{ $form->note }}
                                                                        </span>
                                                                    </span>
                                                                @endif

                                                            </li>
                                                        @elseif ($form->submitable_to_nhs_lfpse !== true && $form->location_type_id !== 1)
                                                        <li class="formItem" style="display: flex; justify-content: left; align-items: left;">
                                                            {{-- <div style="display: flex; align-items: center; flex-grow: 1;"> --}}
                                                                <a class="collapse-item report-now-menu-menu-color fw-normal"
                                                                    href="{{ route('location.form.check_form_limits', ['formId' => $form->id]) }}"
                                                                    @if (!$form->checkFormLimits())  @endif>{{ $form->name }}</a>
                                                                @if ($form->note)
                                                                    <span class="tooltip-container">
                                                                        <svg style="width: 20px; height: 20px;"
                                                                            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">
                                                                            {{ $form->note }}
                                                                        </span>
                                                                    </span>
                                                                @endif
                                                            {{-- </div> --}}
                                                            @if (isset($form) && $form->id == '164' && $form->is_qr_code == 1)
                                                                <a href="{{ route('location.near_miss.qr_code') }}?form_id={{ $form->id }}" 
                                                                    class="qr-icon" 
                                                                    title="QR Code" 
                                                                    target="_blank"
                                                                    style="margin-left: 10px; display: flex; align-items: center;">
                                                                    <i class="fa fa-qrcode" style="font-size: 16px; color: #000;"></i>
                                                                </a>
                                                            @endif
                                                        </li>
                                                        @endif
                                                    @endif
                                                @endforeach
                                            </ul>

                                            {{-- @dd($form) --}}
                                        </li>
                                        <hr class="my-1 w-75 mx-auto opacity-0 " style="opacity: 0;">
                                    @endif
                                @endforeach
                            @endif
                        </ul>
                    </div>


                </div>

                {{-- <div class="d-flex gap-1 p-1 mt-2"  style="width: 170px;background:#ececec;border-radius:3px;" >
                    <a style="color: #696363" href="{{route('be_spoke_forms.be_spoke_form.records',['format'=>'timeline'])}}" class="btn py-2 m-0  {{ request()->route()->getName() == 'be_spoke_forms.be_spoke_form.records' && request()->query('format') != 'table' ? 'active-btn' : '' }}  w-50"
                        title=" View as Timeline">
                        Timeline
                    </a>
                    <a style="color: #696363" href="{{route('be_spoke_forms.be_spoke_form.records',['format'=>'table'])}}" class="btn py-2 m-0 {{ request()->route()->getName() == 'be_spoke_forms.be_spoke_form.records' && request('format') == 'table' ? 'active-btn' : '' }} w-50"
                        title=" View as List">
                        Table
                    </a>
                </div> --}}

            </div>



            @if (isset($userMain))
                <div class="menue-items">



                    <a href="{{ route('be_spoke_forms.be_spoke_form.records') }}"
                        class="@if (request()->route()->getName() == 'be_spoke_forms.be_spoke_form.records') active @endif item-outer-div border-bottom-color custom-link">
                        <span>
                            <svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
                                class="custom-icon">
                                <path
                                    d="M5 7.8C5 6.11984 5 5.27976 5.32698 4.63803C5.6146 4.07354 6.07354 3.6146 6.63803 3.32698C7.27976 3 8.11984 3 9.8 3H14.2C15.8802 3 16.7202 3 17.362 3.32698C17.9265 3.6146 18.3854 4.07354 18.673 4.63803C19 5.27976 19 6.11984 19 7.8V21L12 17L5 21V7.8Z"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                            <span class="literraFont">Reported</span>
                        </span>
                        <i class="fa-solid fa-angle-right gray-angle"></i>
                    </a>


                    {{-- <a href="{{route('location.view_patient_safety_alerts')}}" class="@if (request()->route()->getName() == 'location.view_patient_safety_alerts') active @endif">Alerts<span></span></a> --}}

                    {{-- <a href="{{route('location.view_near_miss')}}" class="@if (request()->route()->getName() == 'location.view_near_miss') active @endif">Near Misses<span></span></a> --}}

                    <a href="{{ route('location.view_drafts') }}"
                        class="@if (request()->route()->getName() == 'location.view_drafts') active @endif item-outer-div border-bottom-color custom-link">
                        <span>
                            <svg width="16" height="16" style="margin-right: 0.2rem;" viewBox="0 0 24 24"
                                xmlns="http://www.w3.org/2000/svg" class="custom-icon">
                                <path
                                    d="M21 18L19.9999 19.094C19.4695 19.6741 18.7502 20 18.0002 20C17.2501 20 16.5308 19.6741 16.0004 19.094C15.4693 18.5151 14.75 18.1901 14.0002 18.1901C13.2504 18.1901 12.5312 18.5151 12 19.094M3.00003 20H4.67457C5.16376 20 5.40835 20 5.63852 19.9447C5.84259 19.8957 6.03768 19.8149 6.21663 19.7053C6.41846 19.5816 6.59141 19.4086 6.93732 19.0627L19.5001 6.49998C20.3285 5.67156 20.3285 4.32841 19.5001 3.49998C18.6716 2.67156 17.3285 2.67156 16.5001 3.49998L3.93729 16.0627C3.59139 16.4086 3.41843 16.5816 3.29475 16.7834C3.18509 16.9624 3.10428 17.1574 3.05529 17.3615C3.00003 17.5917 3.00003 17.8363 3.00003 18.3255V20Z"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                            My Drafts
                        </span>
                        <i class="fa-solid fa-angle-right gray-angle"></i>
                    </a>

                    @if ($location->head_office_location && $location->head_office_location->head_office_id == 37)
            <a href="{{ route('location.view_dashboard') }}"
                class="@if (request()->route()->getName() == 'location.view_dashboard') active @endif item-outer-div border-bottom-color custom-link">
                    <span>
                        <img src="https://www.svgrepo.com/show/471524/horizontal-bar-chart-01.svg" alt="Dashboard Icon" width="20" height="20" style="margin-right: 5px;">
                        Dashboard
                    </span>
                    <i class="fa-solid fa-angle-right gray-angle"></i>
            </a>
                    @endif


                    <a href="{{ route('user_dashboard_tasks') }}"
                        class="@if (request()->route()->getName() == 'user.user_dashboard_tasks') active @endif item-outer-div border-bottom-color custom-link">
                        <span class="task-container">
                            <svg width="17" height="17" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
                                class="custom-icon">
                                <path
                                    d="M16 8V5.2C16 4.0799 16 3.51984 15.782 3.09202C15.5903 2.71569 15.2843 2.40973 14.908 2.21799C14.4802 2 13.9201 2 12.8 2H5.2C4.0799 2 3.51984 2 3.09202 2.21799C2.71569 2.40973 2.40973 2.71569 2.21799 3.09202C2 3.51984 2 4.0799 2 5.2V12.8C2 13.9201 2 14.4802 2.21799 14.908C2.40973 15.2843 2.71569 15.5903 3.09202 15.782C3.51984 16 4.0799 16 5.2 16H8M12 15L14 17L18.5 12.5M11.2 22H18.8C19.9201 22 20.4802 22 20.908 21.782C21.2843 21.5903 21.5903 21.2843 21.782 20.908C22 20.4802 22 19.9201 22 18.8V11.2C22 10.0799 22 9.51984 21.782 9.09202C21.5903 8.71569 21.2843 8.40973 20.908 8.21799C20.4802 8 19.9201 8 18.8 8H11.2C10.0799 8 9.51984 8 9.09202 8.21799C8.71569 8.40973 8.40973 8.71569 8.21799 9.09202C8 9.51984 8 10.0799 8 11.2V18.8C8 19.9201 8 20.4802 8.21799 20.908C8.40973 21.2843 8.71569 21.5903 9.09202 21.782C9.51984 22 10.0799 22 11.2 22Z"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                            Tasks
                            <span class="task-container">
                                <span class="task-counters">
                                    @php
                                        $to_do_count = 0;
                                        $in_progress_count = 0;
                                        $completed_count = 0;

                                        foreach ($location->head_office_location->loc_task ?? [] as $taskItem) {
                                            $status = strtolower(str_replace(' ', '_', $taskItem->task->status ?? ''));

                                            if ($status === 'to_do') {
                                                $to_do_count++;
                                            } elseif ($status === 'in_progress') {
                                                $in_progress_count++;
                                            } elseif ($status === 'completed') {
                                                $completed_count++;
                                            }
                                        }
                                    @endphp


                                    <span class="counter to-do" data-tooltip="Tasks To Do">
                                        {{ $to_do_count }}
                                    </span>
                                    <span class="counter in-progress" data-tooltip="Tasks In Progress">
                                        {{ $in_progress_count }}
                                    </span>
                                    {{-- <span class="counter completed" data-tooltip="Tasks Completed">
                        {{ $completed_count }}
                        </span> --}}
                                </span>
                            </span>

                            <style>
                                .custom-link {
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    width: 100%;
                                    text-decoration: none;
                                    padding-right: 10px;
                                    /* Adjust padding as needed */
                                }

                                .task-container {
                                    display: flex;
                                    align-items: center;
                                    gap: 8px;
                                    flex-grow: 1;
                                    /* Ensures text and icons are left-aligned */
                                }

                                .gray-angle {
                                    margin-left: auto;
                                    /* Pushes the angle icon to the right */
                                    font-size: 14px;
                                    /* Adjust size to match others */
                                    color: gray;
                                }

                                .task-container {
                                    position: relative;
                                    display: inline-flex;
                                    align-items: center;
                                    gap: 8px;
                                }

                                .task-counters {
                                    display: inline-flex;
                                    gap: 5px;
                                }

                                .counter {
                                    display: inline-flex;
                                    align-items: center;
                                    justify-content: center;
                                    min-width: 20px;
                                    height: 20px;
                                    border-radius: 10px;
                                    padding: 0 6px;
                                    font-size: 12px;
                                    font-weight: bold;
                                    color: white;
                                    position: relative;
                                    cursor: help;
                                }

                                .counter.to-do {
                                    background-color: #f97316;
                                    /* Orange */
                                }

                                .counter.in-progress {
                                    background-color: #3b82f6;
                                    /* Blue */
                                }

                                .counter.completed {
                                    background-color: #10b981;
                                    /* Green */
                                }

                                .counter[data-tooltip]:hover::after {
                                    content: attr(data-tooltip);
                                    position: absolute;
                                    bottom: 100%;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    background: rgba(0, 0, 0, 0.8);
                                    color: white;
                                    padding: 4px 8px;
                                    border-radius: 4px;
                                    font-size: 12px;
                                    white-space: nowrap;
                                    z-index: 100;
                                    margin-bottom: 5px;
                                }
                            </style>
                            <i class="fa-solid fa-angle-right gray-angle"></i>
                    </a>


                    <a href="{{ route('location.view_feedbacks') }}"
                        class="@if (request()->route()->getName() == 'location.view_feedbacks') active @endif item-outer-div border-bottom-color custom-link">
                            <span class="task-container">
                                <svg class="custom-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 10.5V7M12 14H12.01M7 18V20.3355C7 20.8684 7 21.1348 7.10923 21.2716C7.20422 21.3906 7.34827 21.4599 7.50054 21.4597C7.67563 21.4595 7.88367 21.2931 8.29976 20.9602L10.6852 19.0518C11.1725 18.662 11.4162 18.4671 11.6875 18.3285C11.9282 18.2055 12.1844 18.1156 12.4492 18.0613C12.7477 18 13.0597 18 13.6837 18H16.2C17.8802 18 18.7202 18 19.362 17.673C19.9265 17.3854 20.3854 16.9265 20.673 16.362C21 15.7202 21 14.8802 21 13.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V14C3 14.93 3 15.395 3.10222 15.7765C3.37962 16.8117 4.18827 17.6204 5.22354 17.8978C5.60504 18 6.07003 18 7 18Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                Feedback
                            </span>
                            <i class="fa-solid fa-angle-right gray-angle"></i>
                    </a>
                </div>
            @endif





        </div>





        {{-- content --}}
        <div class="main-content">
            <div class="heading-center" {{-- style="font-weight: normal !important; color: {{ $location->organization_setting_assignment->organization_setting->location_section_heading_color ?? '#000000' }}"> --}} style="font-weight: normal !important; color: black">
                Reported
            </div>
            <div class="d-flex align-items-center justify-content-between">
                <div class="col-2">

                </div>
                <div class="col-8 d-flex align-items-center gap-2 " style="padding: 15px 30px;">
                    <div class="d-flex align-items-center gap-2" style="min-width: 280px;">
                        <button class="btn btn-sm site-filter" data-type="all">All sites</button>
                        <button class="btn btn-sm site-filter" data-type="this">This site only</button>
                        <button class="btn btn-sm site-filter" data-type="other">Other site</button>
                    </div>
                    <div class="" style="margin: 0 !Important; padding: 0 !Important; width: 65%;">
                        <form id="search_form" method="GET" action="{{ route('be_spoke_forms.be_spoke_form.records') }}"
                            role="search" style="width: 100%;">
                            <div class="d-flex align-items-center gap-2" style="width: 100%;">
                                <input type="search" placeholder="search..." class="form-control search-wali-input" style="width: 100%;" name="search" value="{{ request()->query('search') }}" style="width: 200px;">
                                <button type="submit" class="btn primary-btn btn-sm"><i class="fa fa-search"></i></button>
                            </div>
                            <div
                                class=" text-left d-flex"style=" border-radius: 3px;"> 
                                {{-- <i class="fa fa-search search-i-class" id="search-input"
                                    style="border: 1px solid #dddcdf;"></i> --}}
    
    
                                <div class="filters-wrapper" style="left: -606%; top: 90%;">
                                    {{-- <div class="filter-header">
                                    <p>Show: </p>
                                    <p id="selectedNum">0 selected</p>
                                </div> --}}
                                    <div class="filter-body">
    
    
    
    
    
    
    
    
    
    
    
                                        <div class="d-flex align-items-center justify-content-center flex-column">
                                            <div>
                                                <div class="form-group" style="color: #ACA9A9;">
                                                    <input style="color: #ACA9A9;" type="datetime-local"
                                                        class="form-control p-2" id="start_date" class="start_date"
                                                        name="start_date" value="{{ request()->query('start_date') }}">
                                                    <label style="font-size: 14px;top:-9px;" for="start_date">Start
                                                        Date</label>
                                                </div>
                                                <div class="form-group" style="color: #ACA9A9;">
                                                    <input style="color: #ACA9A9;" type="datetime-local"
                                                        class="form-control p-2" id="end_date" name="end_date"
                                                        value="{{ request()->query('end_date') }}">
                                                    <label style="font-size: 14px;top:-9px;" for="end_date">End
                                                        Date</label>
                                                </div>
                                                <div class="actions"
                                                    style="display: flex; justify-content: space-between; padding: 0px 30px;">
                                                    <button type="reset"
                                                        class="btn btn-outline-secondary btn-outline-custom btn-sm">Clear</button>
                                                                                                         <button id="search_btn" type="submit"
                                                         class="btn btn-primary btn-sm search_btn">Search</button>
                                                </div>
                                            </div>
    
    
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="format" value="{{ request()->query('format') }}">
                            <input type="hidden" name="site" value="{{ request()->query('site', 'all') }}">
                        </form>
                    </div>
                </div>
            </div>
            <div class="body-inner-div">
                <div class="timeline-div">
                    @if (!$records)
                        <h5 class="text-info text-center">No Record Available</h5>
                    @else
                        <style>
                            .border-top-form {
                                position: relative;
                            }

                            .border-top-form::after {
                                position: absolute;
                                content: '';
                                height: 1px;
                                width: 100%;
                                left: 0;
                                top: -100px !important;
                                background: #dddcdf;
                            }

                            .fixed-expand-buttons {
                                position: fixed;
                                bottom: 20px;
                                right: 20px;
                                display: flex;
                                gap: 10px;
                                z-index: 1000;
                            }

                            .button-style {
                                background-color: #e0e0e0;
                                color: #000;
                                padding: 10px 20px;
                                border-radius: 5px;
                                text-decoration: none;
                                box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
                                font-weight: bold;
                                transition: background-color 0.3s ease, box-shadow 0.3s ease;
                            }

                            .button-style:hover {
                                background-color: #c0c0c0;
                                box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2);
                                color: #333;
                            }

                            .account_created {
                                margin-left: -9% !important;
                            }

                            .timeline-label-title {
                                position: absolute;
                                border-radius: 5px;
                                text-align: center;
                                padding: 5px 10px;
                                background: var(--highlight-nav-color);
                                border: 4px solid #e7e7eb;
                                color: white;
                                z-index: 10;
                                transform: translateX(50%);
                                top: -10px;
                                margin-left: 0 !important;
                            }

                            .search-i-class {
                                padding: 8px 10px;
                                color: #7b7b7d;
                                border-radius: 3px;
                            }

                            .last-line {
                                left: 4%;
                            }

                            @media only screen and (min-width: 1000px) {
                                .last-line {
                                    left: 9%;
                                }
                            }

                            @media only screen and (min-width: 1150px) {
                                .last-line {
                                    left: 7%;
                                }
                            }

                            @media only screen and (min-width: 1250px) {
                                .last-line {
                                    left: 4%;
                                }
                            }

                            @media only screen and (min-width: 1400px) {
                                .last-line {
                                    left: 0%;
                                }
                            }
                        </style>
                        @if (request()->query('format') !== 'table')
                            <div class="timeline" id="records-wrapper">
                                {{-- <div class="border-top-form">bbbbbbbbbbbb</div> --}}
                                @include('location.be_spoke_forms.record_data')

                            </div>
                            <style>
                                .div-res {
                                    margin-right: 240px;
                                }

                                @media screen and (max-width: 1550px) {
                                    .div-res {
                                        margin-right: 210px;
                                    }
                                }

                                @media screen and (max-width: 1350px) {
                                    .div-res {
                                        margin-right: 170px;
                                    }
                                }

                                @media screen and (max-width: 1150px) {
                                    .div-res {
                                        margin-right: 140px;
                                    }
                                }

                                @media screen and (max-width: 950px) {
                                    .div-res {
                                        margin-right: 115px;
                                    }
                                }
                            </style>
                            {{-- start div --}}
                  <!-- Change this div to be hidden by default -->
<div id="last-date-wrap" style="display: none; margin-bottom: 15px" class="div-res">
    <div style="width:100%; display:flex; justify-content: center; ">
        <div style="z-index:4; border-radius: 5px; text-align: center; padding: 5px 10px; border: 4px solid #e7e7eb; background: {{ $location->organization_setting_assignment->organization_setting->location_timeline_heading_box ?? '#5ac1b6' }}; color: {{ $location->organization_setting_assignment->organization_setting->location_timeline_heading_box_text_color ?? '#000000' }};">
            Start
        </div>
    </div>
    <div style="width:100%; display:flex; justify-content: center;">
        <div style="background:white; padding: 8px 90px 0px 90px; margin-top: 35px; border: 1px solid #e3e6f0; z-index: 4; border-radius: 10px;">
            <h4 class="timeline_category_title">Account Created</h4>
            <p>{{ date('D jS F Y', strtotime((Auth::guard('location')->user() ?? Auth::guard('remote_location')->user())->created_at)) }}</p>
        </div>
    </div>
</div>


   <div class="line line-date line-reloading print-display-none"
                                                style="display:none;left:17%;">
                                                <div class="timeline-label"><i
                                                        class="spinning_icon fa-spin fa fa-spinner"></i></div>
                                            </div>
<script>function initializeInfiniteScroll() {
    $('#records-wrapper').infiniteScroll({
        path: function() {
            let count = $(".nearmiss_record").length;
            let queryParams = new URLSearchParams(window.location.search);
            queryParams.set('count', count);
            queryParams.set('_token', $('#token_id').val());
            queryParams.set('ajax', true);
            let newUrl = window.location.pathname + '?' + queryParams.toString();
            return newUrl;
        },
        append: '.record-main-wrap',
        history: false,
       
        checkLastPage: true,
        scrollThreshold: 100,
    })
   
    
}</script>
                            {{-- start div close here --}}
                            <!-- <div class="container-fuid">
                                <div class="row">
                                    <div class="col-3"></div>
                                    <div class="col-9">
                                        <div>
                                            <div id="last-date-wrap"
                                                style="display: {{ $records->count() < 10 ? 'block' : 'none' }};">
                                                {{-- <div class="line line-date last-line">
                                                    <div class="timeline-label-title">Start</div>
                                                </div> --}}
                                                {{-- <div class="account_created center">
                                                    <h4 class="timeline_category_title">Account Created</h4>
                                                    <p>{{ date('D jS F Y', strtotime((Auth::guard('location')->user() ?? Auth::guard('remote_location')->user())->created_at)) }}
                                                    </p>
                                                </div> --}}
                                            </div>
                                            <div class="line line-date line-reloading print-display-none"
                                                style="display:none;left:17%;">
                                                <div class="timeline-label"><i
                                                        class="spinning_icon fa-spin fa fa-spinner"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> -->
                            
                        @else
                            @include('location.be_spoke_forms.record_data_table')
                        @endif
                    @endif























                </div>
                <div class="right-div"></div>
            </div>



        </div>


        @include('layouts.error')
    </div>
    <input type="hidden" value="{{ csrf_token() }}" id="token_id" />
    <style>
        .line.right-record .date {
            left: -114px !important;
        }

        .line.left-record .date {
            right: -114px !important;
        }
    </style>
@section('scripts')
    <script src="{{ asset('admin_assets/js/infinite-scroll.pkgd.min.js') }}"></script>
    <script>
        function initializeInfiniteScroll() {
            $('#records-wrapper').infiniteScroll({
                    path: function() {
                        let count = $(".nearmiss_record").length; // Get the current case count
                        let queryParams = new URLSearchParams(window.location.search);
                        queryParams.set('count', count);
                        queryParams.set('_token', $('#token_id').val());
                        queryParams.set('ajax', true);
                        let newUrl = window.location.pathname + '?' + queryParams.toString();

                        console.log("Infinite Scroll triggered", newUrl);
                        return newUrl;
                    },
                    append: '.record-main-wrap', // Automatically append new items
                    history: false,
                    status: '.line-reloading',
                    checkLastPage: true,
                    scrollThreshold: 100,
                })
                .on('load.infiniteScroll', function(event, response) {
                    let parser = new DOMParser();
                    let doc = parser.parseFromString(response, 'text/html');

                    // Check if the response contains "exit" (used to stop infinite scroll)
                    if (doc.body.textContent.includes('exit')) {
                        $('#records-wrapper').infiniteScroll('destroy');
                        $('.line-reloading').hide();
                    } else {
                        let newContent = $(doc).find('.record-main-wrap'); // Extract new records
                        if (newContent.length) {
                            $('#records-wrapper').append(doc); // Manually append the records
                        } else {
                            console.warn("No new .record-main-wrap elements found in the response.");
                        }
                    }
                })
                .on('error.infiniteScroll', function(event, error) {
                    console.error("Infinite Scroll Error:", error);
                    retryRequest(); // Retry if an error occurs
                })
                .on('last.infiniteScroll', function(event, body, path) {
                    $('#records-wrapper').infiniteScroll('destroy');
                    $('#last-date-wrap').fadeIn();
                    $('.line-reloading').hide();
                });

        }





        $(document).ready(function() {
            initializeInfiniteScroll()
            $('.select2').select2();
        })
        $(document).on('click', '.select2-results__group', function(event) {
            event.stopPropagation();
            const optgroupLabel = $(this).text();
            const $select = $('#type_of_error_multi');
            const $optgroup = $select.find('optgroup[label="' + optgroupLabel + '"]');
            const isSelected = $optgroup.find('option:first').prop('selected');
            $optgroup.find('option').prop('selected', !isSelected);
            $select.trigger('change');
        });



        // ========== Start Search Menu ============
        // These functions controls the visiblity of Search Menu 
        jQuery(document).on('click', function(event) {
            if (!jQuery(event.target).closest('.filters-wrapper, #search-input').length) {
                jQuery('.filters-wrapper').fadeOut('fast');
            }
        });

        jQuery('.filters-wrapper').on('click', function(event) {
            event.stopPropagation();
        });

        jQuery('#search-input').on('click', function() {
            jQuery('.filters-wrapper').fadeIn()
        });
        // ========== End Search Menu ============

        // =========== Toggles Disable/Enable for the Categories =======================
        $('#nearMissChk').on('click', function(event) {
            if (!$('#nearMissChk').prop('checked')) {
                const chkWrapper = $('#nearMissChk').parent().siblings().closest('.chk-wrapper').addClass(
                    'disable').slideToggle();
                $(chkWrapper).find('input').prop('disabled', true)
            } else {
                const chkWrapper = $('#nearMissChk').parent().siblings().closest('.chk-wrapper').removeClass(
                    'disable').slideToggle();
                $(chkWrapper).find('input').prop('disabled', false)
            }
        })

        $('#incidentChk').on('click', function() {
            if (!$('#incidentChk').prop('checked')) {
                const chkWrapper = $('#incidentChk').parent().siblings().closest('.chk-wrapper').addClass(
                    'disable').slideToggle();
                $(chkWrapper).find('input').prop('disabled', true)
            } else {
                const chkWrapper = $('#incidentChk').parent().siblings().closest('.chk-wrapper').removeClass(
                    'disable').slideToggle();
                $(chkWrapper).find('input').prop('disabled', false)
            }
        })

        $('#type_of_error').on('click', function() {
            $('#type_of_error_multi_div').slideToggle();
        })
        $('#contribution_chk').on('click', function() {
            $('#contribution_chk_multi_div').slideToggle();
        })
        $('#point_of_detection_chk').on('click', function() {
            $('#point_of_detection_multi_div').slideToggle();
        })
        // =========== End of Toggles Disable/Enable for the Categories =======================

        // =================== Select all Check box function ===================================
        $('#selectAll').on('click', function() {
            const inputs = $('#selectAll').parents().closest('.filter-body').find('.chk-wrapper').find('input');
            if ($('#selectAll').prop('checked')) {
                $(inputs).each((index, input) => {
                    if (!$(input).prop('disabled')) {
                        $(input).prop('checked', true)
                    }
                })
            } else {
                $(inputs).each((index, input) => {
                    if (!$(input).prop('disabled')) {
                        $(input).prop('checked', false)
                    }
                })
            }
        })

        // ================== End of Select all ========================



        // ======== Checks and Selects All the inputs inside Search Menu and stores state in local storage =============
        $('.filter-body').on('click', 'input[type="checkbox"]', function() {
            const inputs = $('.filter-body').find('.chk-wrapper').find('input:not(:disabled)');
            const inputsChecked = inputs.map(function() {
                return {
                    id: this.id,
                    checked: this.checked
                };
            }).get();

            localStorage.setItem('checkboxState', JSON.stringify(inputsChecked));

            updateLocalStorage();

            $('#selectedNum').text(inputsChecked.filter(value => value.checked).length + ' selected');
        });

        function handleCheckboxClick(checkboxId) {
            const checkbox = $('#' + checkboxId);
            const chkWrapper = checkbox.parent().siblings().closest('.chk-wrapper');

            if (!checkbox.prop('checked')) {
                // chkWrapper.addClass('disable');
                // chkWrapper.find('input').prop('disabled', true);
            } else {
                // chkWrapper.removeClass('disable');
                // chkWrapper.find('input').prop('disabled', false);
            }


        }

        function updateLocalStorage() {
            const checkboxesState = {
                nearMissChk: $('#nearMissChk').prop('checked'),
                incidentChk: $('#incidentChk').prop('checked'),
                reported_by_chk: $('#reported_by_chk').prop('checked'),
                point_of_detection_chk: $('#point_of_detection_chk').prop('checked'),
                detected_by_chk: $('#detected_by_chk').prop('checked'),
                incedentChk1: $('#incedentChk1').prop('checked'),
                incedentChk2: $('#incedentChk2').prop('checked'),
                type_of_error: $('#type_of_error').prop('checked'),
                contribution_chk: $('#contribution_chk').prop('checked'),
                type_of_error_options: $('#type_of_error_multi').val(),
            };

            localStorage.setItem('checkboxesState', JSON.stringify(checkboxesState));
        }

        function applyCheckboxState() {
            const storedCheckboxState = localStorage.getItem('checkboxesState');
            if (storedCheckboxState) {
                const checkboxesState = JSON.parse(storedCheckboxState);

                Object.keys(checkboxesState).forEach(function(checkboxId) {
                    const checkboxState = checkboxesState[checkboxId];
                    $('#' + checkboxId).prop('checked', checkboxState);
                    handleCheckboxClick(checkboxId); // Apply the checkbox state
                    if ((checkboxId == 'nearMissChk' && checkboxesState[checkboxId] == false) || (checkboxId ==
                            'incidentChk' && checkboxesState[checkboxId] == false)) {
                        $('#' + checkboxId).parent().siblings().closest('.chk-wrapper').addClass('disable')
                            .slideToggle().find('input').prop('disabled', true);;
                    } else if (checkboxId == 'type_of_error' && checkboxesState[checkboxId] == true) {
                        $('#type_of_error_multi_div').slideToggle();
                    } else if (checkboxId == 'contribution_chk' && checkboxesState[checkboxId] == true) {
                        $('#contribution_chk_multi_div').slideToggle();
                    } else if (checkboxId == 'point_of_detection_chk' && checkboxesState[checkboxId] == true) {
                        $('#point_of_detection_multi_div').slideToggle();
                    } else if (checkboxId == 'type_of_error_options') {
                        $('#type_of_error_multi').val(checkboxesState[checkboxId]).trigger('change');
                    }
                });
            }
        }

        $(document).ready(function() {
            applyCheckboxState();
        });

        // ======== End of Local Storage State handle =============



        // ============== Submits the Search on button Click inside the search menu ========
        $('.search_btn').on('click', function() {
            const inputValuesObject = {
                "near_miss": $('.filter-body').find('.chk-wrapper').eq(0).find('input:not(:disabled):checked')
                    .map(
                        function() {
                            if (this.id != 'type_of_error' && this.id != 'contribution_chk') {
                                return $(this).val();
                            }
                        }).get(),
                "incident": $('.filter-body').find('.chk-wrapper').eq(1).find('input:not(:disabled):checked')
                    .map(
                        function() {
                            return $(this).val();
                        }).get(),
            }

            if ($('#nearMissChk').prop('checked')) {
                inputValuesObject.near_miss.push('parent_near_miss_chk')
            }
            if ($('#incidentChk').prop('checked')) {
                inputValuesObject.incident.push('parent_incident_chk')
            }
            updateLocalStorage();
            const inputValuesJSON = JSON.stringify(inputValuesObject);

            $('<input>').attr({
                type: 'hidden',
                name: 'input_values',
                value: inputValuesJSON
            }).appendTo('#search_form');

            $('#search_form').submit();
        })

        // ============== End of Search ========




        jQuery(document).on('change', '.commentMultipleFiles', function(e) {
            e = e.originalEvent;
            var files = e.target.files;
            var form = $(this).closest('form');
            uploadDocumentCaseManager(files, form);
        });

        function uploadDocumentCaseManager(files, form = false) {
            var url = document.getElementById('route_document').value;
            for (let i = 0; i < files.length; i++) {
                let number = Math.floor(Math.random() * 1000000);
                var formData = new FormData();
                formData.append("file", files.item(i));
                formData.append("_token", $('input[name=_token]').val());
                formData.append("type", 'case_manager');
                var progress = $([
                    "<li class='item_" + number + "'><span class='fa fa-file'></span>&nbsp; " + files.item(i).name +
                    "<a href='#' title='Delete File' class='remove_btn'> <span class='fa fa-times'></span></a>",
                    "    <div class='progress'>",
                    "        <div class='progress-bar progress-bar-striped active' role='progressbar'",
                    "            aria-valuenow='0' aria-valuemin='0' aria-valuemax='" + files.item(i).size + "'>",
                    "            <span class='sr-only'>0%</span>",
                    "        </div>",
                    "    </div>",
                    "</li>",
                ].join(""));

                var progress2 = $([
                    "<li class='item_" + number + "'><span class='fa fa-file'></span>&nbsp; " + files.item(i).name +
                    "<a href='#' title='Delete File' class='remove_btn'> <span class='fa fa-times'></span></a>",
                    "</li>",
                ].join(""));

                $.ajax({
                    url: url,
                    type: "POST",
                    data: formData,
                    processData: false,
                    cache: false,
                    contentType: false,
                    beforeSend: function() {
                        var percentage = 0;
                        if (form) {
                            $(form).find(".uploaded_files").append(progress);
                            $(form).find(".uploaded_files2").append(progress2);
                        } else {
                            $(".uploaded_files").append(progress);
                            $(".uploaded_files2").append(progress2);
                        }

                        $('.item_' + number + ' .progress .progress-bar').css("width", percentage + '%',
                            function() {
                                return $(this).attr("aria-valuenow", percentage) + "%";
                            });
                    },
                    xhr: function() {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener("progress", function(evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = (evt.loaded / evt.total) * 100;
                                $('.item_' + number + ' .progress .progress-bar').css("width",
                                    percentComplete + '%',
                                    function() {
                                        return $(this).attr("aria-valuenow", percentComplete) + "%";
                                    });
                            }
                        }, false);
                        xhr.addEventListener("progress", function(evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = (evt.loaded / evt.total) * 100;
                                $('.item_' + number + ' .progress .progress-bar').css("width",
                                    percentComplete + '%',
                                    function() {
                                        return $(this).attr("aria-valuenow", percentComplete) + "%";
                                    });
                            }
                        }, false);
                        return xhr;
                    },
                }).done(function(data) {
                    $('.item_' + number + ' .progress').remove();
                    try {
                        var input = "<input type='hidden' name='documents[]' class='file document' id='" + data.id +
                            "' value='" + data.id + "'>";
                        //$('.item_'+number).append(input);
                        $('.item_' + number + ":last").append(input);
                    } catch (e) {
                        console.log(e);
                    }

                });
            }
        }
        jQuery(document).on('click', '.remove_btn', function(e) {
            e.preventDefault();
            var route = $("#route_document_removedHashed").val();
            var val = $('.' + $(this).parent().attr('class'));
            var data = {
                'hashed': $('.' + $(this).parent().attr('class')).find("input[name='documents[]']").val(),
                '_token': "{{ csrf_token() }}"
            }
            $.post(route, data)
                .then(function(response) {
                    val.remove();
                })
                .catch(function(error) {
                    console.log(error);
                })


        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const expandAllBtn = document.querySelector(".expand-all-btn");
            const showLessAllBtn = document.querySelector(".show-less-all-btn");
            const individualExpandBtns = document.querySelectorAll(".see_details_btn");
            const individualShowLessBtns = document.querySelectorAll(".show_less_btn");

            function expandAllCards() {
                document.querySelectorAll(".details").forEach(detail => {
                    detail.style.display = "block";
                });
                individualExpandBtns.forEach(btn => btn.style.display = "none");
                individualShowLessBtns.forEach(btn => btn.style.display = "inline-block");
                expandAllBtn.style.display = "none";
                showLessAllBtn.style.display = "inline-block";
            }

            function showLessAllCards() {
                document.querySelectorAll(".details").forEach(detail => {
                    detail.style.display = "none";
                });
                individualExpandBtns.forEach(btn => btn.style.display = "inline-block");
                individualShowLessBtns.forEach(btn => btn.style.display = "none");
                expandAllBtn.style.display = "inline-block";
                showLessAllBtn.style.display = "none";
            }

            expandAllBtn.addEventListener("click", function(event) {
                event.preventDefault();
                expandAllCards();
            });

            showLessAllBtn.addEventListener("click", function(event) {
                event.preventDefault();
                showLessAllCards();
            });

            individualExpandBtns.forEach((btn, index) => {
                btn.addEventListener("click", function(event) {
                    event.preventDefault();
                    const details = btn.closest(".content-timeline").querySelector(".details");
                    details.style.display = "block";
                    btn.style.display = "none";
                    individualShowLessBtns[index].style.display = "inline-block";
                });
            });

            individualShowLessBtns.forEach((btn, index) => {
                btn.addEventListener("click", function(event) {
                    event.preventDefault();
                    const details = btn.closest(".content-timeline").querySelector(".details");
                    details.style.display = "none";
                    btn.style.display = "none";
                    individualExpandBtns[index].style.display = "inline-block";

                    const anyExpanded = Array.from(document.querySelectorAll(".details")).some(
                        detail => detail.style.display === "block");
                    if (!anyExpanded) {
                        expandAllBtn.style.display = "inline-block";
                        showLessAllBtn.style.display = "none";
                    }
                });
            });
        });
    </script>


    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const toggleBtn = document.getElementById("filter-icon-btn");
            const menu = document.getElementById("form-searchBar");

            toggleBtn.addEventListener("click", function(e) {
                e.stopPropagation();
                const isVisible = window.getComputedStyle(menu).display !== "none";
                menu.style.display = isVisible ? "none" : "block";
            });
        });
    </script>

    <script>
$(document).ready(function () {
    const colors = {
        all: '#01A298',
        this: '#183153',
        other: '#4572C4'
    };

    function applyButtonStyles(selected) {
        $('.site-filter').each(function () {
            const type = $(this).data('type');
            if (type === selected) {
                $(this).removeClass('btn-outline').css({
                    backgroundColor: colors[type],
                    color: '#fff',
                    border: 'none'
                });
            } else {
                $(this).addClass('btn-outline').css({
                    backgroundColor: 'transparent',
                    color: colors[type],
                    border: '1px solid ' + colors[type]
                });
            }
        });
    }

    function getQueryParam() {
        const urlParams = new URLSearchParams(window.location.search);
        const param = urlParams.get('site');
        return param || 'all'; // Default to 'all' if not present
    }

    function updateQueryAndReload(selected) {
        const url = new URL(window.location.href);
        url.searchParams.set('site', selected);
        window.location.href = url.toString(); // Reload with new query param
    }

    // Initial load
    const current = getQueryParam();
    applyButtonStyles(current);

    // Click handler
    $('.site-filter').click(function () {
        const type = $(this).data('type');
        if (type !== current) {
            updateQueryAndReload(type);
        }
    });
});

// Backend search functionality
$(document).ready(function() {
    // Handle search input enter key
    $('.search-wali-input').on('keypress', function(e) {
        if (e.which === 13) { // Enter key
            e.preventDefault();
            $('#search_form').submit();
        }
    });

    // Handle clear button to clear search as well
    $('button[type="reset"]').on('click', function() {
        $('.search-wali-input').val('');
        // Remove search parameter from URL and reload
        const url = new URL(window.location.href);
        url.searchParams.delete('search');
        window.location.href = url.toString();
    });

    // Handle site filter buttons to preserve search
    $('.site-filter').on('click', function() {
        const siteType = $(this).data('type');
        const searchValue = $('.search-wali-input').val();
        
        // Update the hidden site input
        $('input[name="site"]').val(siteType);
        
        // If there's a search value, submit the form
        if (searchValue) {
            $('#search_form').submit();
        }
    });
});
</script>



@endsection
@endsection