@foreach ($locations as $loc)
    @php
        // Load location once to avoid multiple database hits and improve performance
        $location = $loc->location;
        
        // Pre-calculate commonly used values
        $isDeleted = $location->is_deleted == true;
        $isArchived = $location->is_archived == true;
        $isActive = $location->is_active == false;
        $passwordChanged = $location->password_changed == false;
        
        // Pre-calculate address
        $address = $location->address_line1;
        if (!empty($location->address_line2)) {
            $address .= ', ' . $location->address_line2;
        }
        if (!empty($location->address_line3)) {
            $address .= ', ' . $location->address_line3;
        }
        
        // Pre-calculate group hierarchies
        $groupNames = [];
        $groupHierarchies = [];

        foreach ($loc->groups as $assignment) {
            // Add direct group name
            $groupNames[] = $assignment->group->group;

            $origin = [];
            $currentGroup = $assignment->group;
            while ($currentGroup->parent) {
                $origin[] = $currentGroup->parent->group;
                $currentGroup = $currentGroup->parent;
            }

            $origin = array_reverse($origin);
            $origin[] = $assignment->group->group;
            $originMessage = $origin ? implode(' → ', $origin) : '';

            if ($originMessage) {
                $groupHierarchies[] = $originMessage;
            }
        }

        $groupsAttribute = count($groupNames) > 0 ? implode(', ', $groupNames) : 'Unassigned';
        $hierarchyAttribute = implode('|', $groupHierarchies);
        
        // Pre-calculate status
        $status = $isDeleted ? 'Deleted' : 
                 ($isArchived ? 'Archived' : 
                 ($isActive ? 'Inactive' : 
                 ($passwordChanged ? 'Not started' : 'Live')));
    @endphp
    <tr class="loc"
        @if ($isDeleted) data-deleted="true"
        @elseif ($isArchived) 
            data-archived="true"
        @elseif ($isActive) 
            data-inactive="true"
        @elseif ($passwordChanged) 
            data-not-started="true"
        @else 
            data-live="true"
        @endif

        data-location_type="{{isset($location->location_type) ? $location->location_type->name : ''}}"
        data-location_sub_type="{{isset($location->pharmacy_type) ? $location->pharmacy_type->name : ''}}"
        data-country="{{$location->country}}"
        data-tags="{{$location->location_tag->pluck('name')->implode(', ')}}"
        data-groups="{{$groupsAttribute}}"
        data-group-hierarchy="{{$hierarchyAttribute}}"
        data-status="{{$status}}"
        >
        <td></td>
        <td>
            <p class="d-none">{{$location->registration_no}}</p>
            <div class="main-wrapper-loc resizing-input" >
                <input class="readonly-input" data-column="username-{{ $loc->location_id }}" type="text" value="{{ $location->username }}" readonly>
                <div class="btn-wrapper-loc">
                    <button title="Click to copy text" onclick="copyFunction('username-{{ $loc->location_id }}')">
                        <i class="fa-regular fa-copy"></i>
                    </button>
                </div>
            </div>
            @if (isset($location->location_type))
                <div class="border border-2 p-1 mt-2 rounded" style="width: fit-content;font-size:10px;">
                    {{$location->location_type->name}}
                </div>
            @endif
        </td>

        <td>
            <div class="d-flex flex-column gap-1">
                @if ($location->is_active)
                <span class="text-success d-flex align-items-center gap-1">
                    <span style="width:4px;height:4px;" class="bg-success rounded-circle d-flex"></span>
                    Live
                </span>
                @elseif($location->is_archived)
                    <span class="text-warning d-flex align-items-center gap-1">
                        <span style="width:4px;height:4px;" class="bg-warning rounded-circle d-flex"></span>
                        Archived
                    </span>
                @elseif($location->is_deleted)
                <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>
                    Deleted
                </span>
                @endif

                @if ($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

                @if (($loc->groups ?? collect())->isEmpty())
                    <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>
                        Unassigned
                    </span>
                @endif

                @if ($location->is_active == false)
                    <span class="text-danger">Inactive</span>
                @endif

                @if ($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
            </div>
        </td>

        <td>
            <div class="main-wrapper-loc resizing-input" >
                <input class="readonly-input" data-column="trading_name-{{ $loc->location_id }}" type="text" value="{{ optional($location)->trading_name ?? '' }}" readonly>
                <div class="btn-wrapper-loc">
                    <button title="Click to copy text" onclick="copyFunction('trading_name-{{ $loc->location_id }}')">
                        <svg width="16" height="16">
                            <use href="#icon-copy"/>
                        </svg>
                    </button>
                </div>
            </div>
            
            <div class="main-wrapper-loc resizing-input" >
                <input class="readonly-input" data-column="location_code-{{ $loc->location_id }}" type="text" value="{{ $location->location_code }}" readonly>
                <div class="btn-wrapper-loc">
                    <button title="Click to copy text" onclick="copyFunction('location_code-{{ $loc->location_id }}')">
                        <i class="fa-regular fa-copy"></i>
                    </button>
                </div>
            </div>
            
            <div class="main-wrapper-loc resizing-input my-1" >
                <input class="readonly-input" data-column="registered_company_name-{{ $loc->location_id }}" type="text" value="{{ $location->registered_company_name }}" readonly>
                <div class="btn-wrapper-loc">
                    <button title="Click to copy text" onclick="copyFunction('registered_company_name-{{ $loc->location_id }}')">
                        <i class="fa-regular fa-copy"></i>
                    </button>
                </div>
            </div>
            
            <div class="main-wrapper-loc resizing-input" >
                <input class="readonly-input" style="font-weight: bold;" data-column="address_line1-{{ $loc->location_id }}" type="text" value="{{ $address }}" readonly>
                <div class="btn-wrapper-loc">
                    <button title="Click to copy text" onclick="copyFunction('address_line1-{{ $loc->location_id }}')">
                        <i class="fa-regular fa-copy"></i>
                    </button>
                </div>
            </div>

            <div class="main-wrapper-loc resizing-input my-1" >
                <svg width="16" height="16">
                    <use href="#icon-email"/>
                </svg> 
                <input class="readonly-input" style="font-weight: bold;" data-column="email-{{ $loc->location_id }}" type="text" value="{{ $location->email }}" readonly>
                <div class="btn-wrapper-loc">
                    <button title="Click to copy text" onclick="copyFunction('email-{{ $loc->location_id }}')">
                        <i class="fa-regular fa-copy"></i>
                    </button>
                </div>
            </div>
            
            <div class="main-wrapper-loc resizing-input" >
                <svg width="16" height="16">
                    <use href="#icon-phone"/>
                </svg>
                <input class="readonly-input" style="font-weight: bold;" data-column="telephone_no-{{ $loc->location_id }}" type="text" value="{{ $location->telephone_no }}" readonly>
                <div class="btn-wrapper-loc">
                    <button title="Click to copy text" onclick="copyFunction('telephone_no-{{ $loc->location_id }}')">
                        <i class="fa-regular fa-copy"></i>
                    </button>
                </div>
            </div>
            
            @if ($location->ods_name)
                <div class="main-wrapper-loc resizing-input" >
                    <svg width="16" height="16">
                        <use href="#icon-home"/>
                    </svg>                    
                    <input class="readonly-input" style="font-weight: bold;" data-column="ods_name-{{ $loc->location_id }}" type="text" value="{{ $location->ods_name }}" readonly>
                    <div class="btn-wrapper-loc">
                        <button title="Click to copy text" onclick="copyFunction('ods_name-{{ $loc->location_id }}')">
                            <i class="fa-regular fa-copy"></i>
                        </button>
                    </div>
                </div>
            @endif
        </td>

        <td>
            <div class="d-flex align-items-center gap-1 loc-groups-wrapper">
                @if (count($loc->groups))
                    <div @if (count($loc->groups) > 1) style="display:flex;align-items:center;flex-wrap:wrap;width:144px;" @endif>
                        @foreach ($loc->groups as $assignment)
                            @php
                                $origin = [];
                                $currentGroup = $assignment->group;
                                while ($currentGroup->parent) {
                                    $origin[] = $currentGroup->parent->group;
                                    $currentGroup = $currentGroup->parent;
                                }
            
                                $origin = array_reverse($origin);
                                $origin[] = $assignment->group->group;
                                $originMessage = $origin ?  implode(' → ', $origin) : 'No origin';
                            @endphp
                            <p class="btn group-btn" data-toggle="tooltip" data-bs-placement="left" title="{{ $originMessage }}">
                                {{ $assignment->group->group }}
                                <a title="Remove Group" href="{{ route('head_office.organisation.delete_group', ['id'=>$assignment->id,'_token'=>csrf_token()]) }}" data-msg="Are you sure you want to remove this assignment?" class="text-danger delete_button float-right">
                                    <i class="fa fa-xmark"></i>
                                </a>
                            </p>
                        @endforeach
                    </div>
                @endif
                <p style="margin-top: 10px;">
                    <button data-bs-toggle="modal" data-bs-target='#group_assing_modal' class="btn btn-circle btn-group-assign green d-flex align-items-center justify-content-center mx-auto" data-location-id="{{ $loc->id }}" data-location-name="{{ $location->name() }}">
                        <i class="fa fa-plus"></i>
                    </button>
                </p>
            </div>
        </td>
        
        <td class="tags-wrapper">
            @livewire('location-tags-manager', ['loc_id' => $location->id])
        </td>

        <td>
            <div>
                <div>
                    <div style="display: flex; align-items: baseline; gap: 5px;">
                        <p class="mb-1" style="font-size: 12px;font-weight: 500;">Access</p>
                    </div>
                    <select class="locationAccessDropdown form-select custom-input" style="font-size: 12px; white-space: nowrap;width:100px;">
                        <option value="{{ route('location.access.update', ['id' => $location->id, 'access' => 'anyone','_token' => csrf_token()]) }}" {{ !$location->is_access ? 'selected' : '' }}>
                            Anyone
                        </option>
                        <option value="{{ route('location.access.update', ['id' => $location->id, 'access' => 'selected_users','_token' => csrf_token()]) }}" {{ $location->is_access ? 'selected' : '' }}>
                            Selected Users
                        </option>
                    </select>
                </div>

                <div>
                   <div style="display: flex; align-items: baseline; gap: 5px;">
                        <p class="mb-1 mt-2" style="font-size: 12px;font-weight: 500;">Two factor Authentication</p>
                   </div>
                    <div class="d-flex align-items-center gap-1">
                        <select id="otpStatusDropdown" class="otpSecurityDropdown form-select custom-input form-select-sm" onchange="location = this.value" style="width:110px;font-size: 12px;">
                            <option value="{{ route('otp.loc.security', ['id' => $loc->location_id, 'action' => 'enable', '_token' => csrf_token()]) }}" {{ $location->otp && $location->otp->isEnabled ? 'selected' : '' }}>
                                Enable
                            </option>
                            <option value="{{ route('otp.loc.security', ['id' => $loc->location_id, 'action' => 'disable', '_token' => csrf_token()]) }}" {{ $location->otp && $location->otp->isEnabled ? '' : 'selected' }}>
                                Disable
                            </option>
                        </select>
                
                        @if ($location->otp && $location->otp->isEnabled)
                            <select id="otpEmailDropdown" class="otpSecurityDropdown form-select custom-input form-select-sm" onchange="location = this.value" style="width:100px;font-size: 12px;">
                                <option value="{{ route('otp.loc.email', ['id' => $loc->location_id, 'action' => 'enable', '_token' => csrf_token()]) }}" {{ $location && $location->is_email == false ? 'selected' : '' }}>
                                    Admin Only
                                </option>
                                <option value="{{ route('otp.loc.email', ['id' => $loc->location_id, 'action' => 'disable', '_token' => csrf_token()]) }}" {{ $location && $location->is_email == true ? 'selected' : '' }}>
                                    To site email address
                                </option>
                                <option value="{{ route('otp.loc.authenticator', ['id' => $loc->location_id, 'action' => 'enable', '_token' => csrf_token()]) }}" {{ $location->otp && $location->otp->is_totp_enabled ? 'selected' : '' }}>
                                    Via Microsoft Authenticator
                                </option>
                            </select>
                        @endif
                    </div>
                    
                    @if ($location->otp && $location->otp->isEnabled)
                        @php
                              $showVerificationButton = !$location->otp->is_totp_enabled;
                        @endphp
                        @if ($showVerificationButton)
                            <div class="input-wrapper">
                                <button 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> Verification Codes
                                </button>

                                @isset($location->otp)
                                <div class="d-none">
                                    <table class="new-table" style="width:100%;">
                                        <thead>
                                            <th>Date & time</th>
                                            <th>Verification Code</th>
                                            <th>Details</th>
                                            <th>Status</th>
                                        </thead>
                                        <tbody>
                                            @if ($location->getOtpLogs->count() == 0)
                                                <tr>
                                                    <td colspan="4" class="text-center">No data found</td>
                                                </tr>
                                            @else
                                                @foreach ($location->getOtpLogs->sortByDesc('created_at') as $log )
                                                    <tr>
                                                        <td>{{ \Carbon\Carbon::parse($log->created_at)->format('d M Y h:i A') }}</td>
                                                        <td>{{ $log->otp }}</td>
                                                        <td>
                                                            <ul>
                                                                <li>{{$log->ip}}</li>
                                                                <li>{{$log->os}}</li>
                                                                <li>{{$log->device}}</li>
                                                            </ul>
                                                        </td>
                                                        <td>{{ \Carbon\Carbon::parse($log->expires_at)->isPast() ? 'Expired' : 'Successful' }}</td>
                                                    </tr>
                                                @endforeach
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                                @endisset
                            </div>
                        @endif
                    @endif
                </div>

                <div>
                    <p class="mb-1 mt-2" style="font-size: 12px;font-weight: 500;">Password Reset</p>
                    <select class="passwordResetDropdown form-select custom-input" style="font-size: 12px; white-space: nowrap;width:100px;">
                        <option value="{{ route('location.password_admin.update', ['id' => $loc->id, 'access' => 'anyone','_token' => csrf_token()]) }}" {{ !$location->is_admin_password ? 'selected' : '' }}>
                            Admin Only
                        </option>
                        <option value="{{ route('location.password_admin.update', ['id' => $loc->id, 'access' => 'selected_users','_token' => csrf_token()]) }}" {{ $location->is_admin_password ? 'selected' : '' }}>
                            From Site
                        </option>
                    </select>
                </div>
                
                <form id="quick-login-form-{{ $location->id }}">
                    @csrf
                    <input type="hidden" name="location_id" value="{{ $location->id }}">
                    <p class="mb-1 mt-2" style="font-size: 12px;font-weight: 500;">Quick Login</p>
                    <select name="quick_login" class="form-select custom-input" style="font-size: 12px; white-space: nowrap; width:100px;">
                        <option value="0" {{ $location->quick_login == 0 ? 'selected' : '' }}>Disable</option>
                        <option value="1" {{ $location->quick_login == 1 ? 'selected' : '' }}>Enable</option>
                    </select>
                </form>                      
            </div>
        </td>
        
        <td>
            @if (count($head_office->organisationSettings) != 0)
            <select style="white-space: nowrap;font-size:12px;" name="organisation_setting" id="organisation_setting_{{ $loc->id }}" class="organisation_setting_select form-select custom-input" data-location-id="{{ $loc->id }}">
                <option value="" {{ !isset($loc->org_settings()->id) ? 'selected' : '' }}>Not Assigned</option>
                @foreach ($head_office->organisationSettings as $setting)
                <option value="{{ route('head_office.organisation_settings_update', ['setting_id' => $setting->id, 'location_id' => $loc->id]) }}" {{ isset($loc->org_settings()->id) && $loc->org_settings()->id == $setting->id ? 'selected' : '' }}>
                    {{ $setting->name }}
                </option>
                @endforeach
            </select>
            @endif
        </td>
        
        <td>
            <div class="d-flex flex-column gap-2 mb-2">
                <a target="_blank" class="border border-2 text-secondary rounded p-2" style="font-size:12px;" href="{{ route('head_office.color_branding_get', ['id' => $location->id,'_token'=>csrf_token()]) }}">
                    Access Remotely 
                </a>
                <a target="_blank" class="border border-2 text-secondary rounded p-2" style="font-size:12px;" href="{{ route('head_office.location_page_view', ['id' => $loc->id,'_token'=>csrf_token()]) }}">
                    Edit & View
                </a>
            </div>

            <div class="dropdown">
                <button class="no-arrow btn shadow-none border-0 dropdown-toggle" type="button" id="dropdownMenuButton{{ $loc->id }}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-ellipsis-h"></i>
                </button>
                <div class="dropdown-menu animated--fade-in" aria-labelledby="dropdownMenuButton{{ $loc->id }}">
                    <a href="{{ route('head_office.location.import_location_incidents_preview', $location->id) }}" class="dropdown-item">Import Incidents</a>
                     
                    @if ($head_office_user->get_permissions() !== null )
                        @if ($head_office_user->get_permissions()->super_access)
                            <a href="#" data-show_link="{{ $location->is_admin_password }}" data-id="{{ $loc->id }}" data-link='{{ route('head_office.location.password_reset_link', ['id' => $location->id, '_token' => csrf_token()]) }}' class="dropdown-item 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, $head_office_user->get_assigned_locs()->pluck('id')->toArray()))
                            <a href="#" data-show_link="{{ $location->is_admin_password }}" data-id="{{ $loc->id }}" data-link='{{ route('head_office.location.password_reset_link', ['id' => $location->id, '_token' => csrf_token()]) }}' class="dropdown-item 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
                     
                    @if ($location->is_active)
                        <a href="javascript:void(0);" class="dropdown-item text-warning" onclick="toggleStatus('{{ route('head_office.toggleLocationStatus', $location->id) }}')">
                           Resend activation link
                         </a>
                    @else
                        <a href="javascript:void(0);" class="dropdown-item text-success" onclick="toggleStatus('{{ route('head_office.toggleLocationStatus', $location->id) }}')">
                            Make Live
                         </a>
                    @endif
                    
                    @if(isset($location->otp) && ($location->otp->is_totp_configured == 1))
                        <li class="dropdown-item">
                            <form action="{{ route('reset.totp.location', ['locationId' => $location->id]) }}" method="POST" style="display:inline;">
                                @csrf
                                <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want to reset TOTP configuration for this location?')">
                                    Reset QR Code
                                </button>
                            </form>
                        </li>
                    @endif
                </div>
            </div>
        </td>
    </tr>
@endforeach

<script>
    function toggleStatus(url) {
        if (confirm('Are you sure you want to change the location status?')) {
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({})
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Site is already activated');
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }
    }

    function copyFunction(inputId) {
        var copyText = document.querySelector(`[data-column="${inputId}"]`);
        copyText.select();
        copyText.setSelectionRange(0, 99999);
        navigator.clipboard.writeText(copyText.value);
    }


    $(document).ready(function() {
        $('.readonly-input').each(function() {
            const length = $(this).val().length;
            $(this).css('min-width', (length + 1) + 'ch');

            $(this).on('input', function() {
                const newLength = $(this).val().length;
                $(this).css('min-width', (newLength + 1) + 'ch');
            });

            $(this).hover(
                function() {
                    $(this).css('border', '1px solid gray');
                },
                function() {
                    $(this).css('border', '');
                }
            );
        });
    });
    
    var tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    var tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
</script>

<script>
    $(document).ready(function () {
        $('select[name="quick_login"]').change(function () {
            var form = $(this).closest('form'); 
            var formData = form.serialize();

            $.ajax({
                url: "{{ route('location.quick_login.store') }}",
                type: "POST",
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                },
                success: function (response) {
                    alertify.alert("Quick login status updated!").set({
                        title: "Success!"
                    });
                },
                error: function (xhr) {
                    alertify.alert("Something went wrong!").set({
                        title: "Error!"
                    });
                }
            });
        });
    });
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.addEventListener('change', function(e) {
        if (e.target && e.target.classList.contains('organisation_setting_select')) {
            const selectedValue = e.target.value;
            if (selectedValue) {
                window.location.href = selectedValue;
            }
        }
    });
});
</script>

<script>
$('#page-jump').on('change', function () {
    let selectedPage = $(this).val();
    let tab = new URLSearchParams(window.location.search).get('tab') || 'my_location';
    let newUrl = window.location.pathname + '?page=' + selectedPage + '&tab=' + tab;
    
    history.pushState({}, '', newUrl);
    loadLocations(selectedPage, tab);
});
</script>
    
<script>
$(document).ready(function() {
    $(document).on('click', '.pagination a', function(e) {
        e.preventDefault();
        
        let page = $(this).attr('href').split('page=')[1];
        let tab = new URLSearchParams(window.location.search).get('tab') || 'my_location';
        
        let newUrl = window.location.pathname + '?page=' + page + '&tab=' + tab;
        history.pushState({}, '', newUrl);
        
        loadLocations(page, tab);
    });
    
    function loadLocations(page, tab) {
        $.ajax({
            url: window.location.pathname + '?page=' + page + '&tab=' + tab + '&ajax=1',
            type: 'GET',
            beforeSend: function() {
                $('#location-table-body').addClass('loading');
            },
            success: function(data) {
                if (data === 'exit') {
                    return;
                }
                
                $('#location-table-body').html(data);
                
                $('.nav-link').removeClass('active');
                $('#' + tab + '-tab').addClass('active');
                
                $('#location-table-body').removeClass('loading');
                
                initTooltips();
            }
        });
    }
    
    function initTooltips() {
        $('[data-toggle="tooltip"]').tooltip();
    }
    
    $('.nav-link').on('click', function() {
        let tab = $(this).attr('id').replace('-tab', '');
        let page = new URLSearchParams(window.location.search).get('page') || '1';
        
        let newUrl = window.location.pathname + '?page=' + page + '&tab=' + tab;
        history.pushState({}, '', newUrl);
    });
    
    let tab = new URLSearchParams(window.location.search).get('tab') || 'my_location';
    $('.nav-link').removeClass('active');
    $('#' + tab + '-tab').addClass('active');
});
</script>

<script>
$(document).ready(function() {
    $(document).on('click', '.pagination a', function(e) {
        e.preventDefault();
        let url = $(this).attr('href');
        window.location.href = url;
    });
    
    $(document).on('click', '.page-jump-btn', function() {
        let pageInput = $('.page-jump-input').val();
        let maxPage = parseInt($('.page-jump-input').attr('max'));
        
        if (pageInput && !isNaN(pageInput) && parseInt(pageInput) > 0 && parseInt(pageInput) <= maxPage) {
            let page = parseInt(pageInput);
            let tab = new URLSearchParams(window.location.search).get('tab') || 'my_location';
            
            let newUrl = window.location.pathname + '?page=' + page + '&tab=' + tab;
            window.location.href = newUrl;
        } else {
            alert('Please enter a valid page number between 1 and ' + maxPage);
        }
    });
    
    $(document).on('keypress', '.page-jump-input', function(e) {
        if (e.which === 13) {
            $('.page-jump-btn').click();
        }
    });
    
    $('.nav-link').on('click', function() {
        let tab = $(this).attr('id').replace('-tab', '');
        let newUrl = window.location.pathname + '?page=1&tab=' + tab;
        window.location.href = newUrl;
        return false;
    });
    
    let tab = new URLSearchParams(window.location.search).get('tab') || 'my_location';
    $('.nav-link').removeClass('active');
    $('#' + tab + '-tab').addClass('active');
});
</script>