@extends('layouts.head_office_app')
@section('title', 'Head office Settings')

<style>
    .grid-wrap{
        display: grid;
        grid-template-columns: 30% 1fr;
    }
    .grid-wrap span{
      
    }
    #content {
        min-height: unset !important;
        overflow: unset !important;
    }

    .extras div input::placeholder{
        color: #2e2d2d63 !important;
    }

    .tooltip {
        position: relative !important;
        bottom:  -16px !important;
    }
    .category-Wrapper button, .category-Wrapper a {
        padding: .375rem .75rem !important;
        border: none;
        border-radius: 4px;
    }

    .category-Wrapper .cross-cat-btn{
        border: none;
    }

    .all_locations .custom-button{
        font-size: 12px !important;
        padding: 2px 4px;
        scale: 0.8;
    }
    .all_locations .custom-button > i{
        display: none !important;
    }
    .all_locations .custom-button:hover .fa-xmark{
        display: block !important;
    }

    .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
            color: #000000 !important;
            background-color: #d5d5d5 !important;
        }

        .nav-pills .nav-link {
            color: #000 !important;
        }

    .email-container {
    position: relative;
    margin-bottom: 20px;
    }

    .email-input {
    z-index: 1;
    }

    .speech-bubble {
    display: none;
    position: absolute;
    top: -40px;
    left: 0;
    background: #f9f9f9;
    border: 1px solid #ccc;
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 2;
    width: 250px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

    .speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px; 
    left: 20px;
    border-width: 10px;
    border-style: solid;
    border-color: #f9f9f9 transparent transparent transparent;
    }

    .email-container:hover .speech-bubble {
    display: block;
    }

    .email-actions {
    opacity: 0;
    pointer-events: none;
    margin-top: 5px;
    transition: opacity 0.3s;
    }

    .email-container:hover .email-actions {
    opacity: 1;
    pointer-events: auto;
    }

    .delete-icon {
    cursor: pointer;
    color: red;
    }

    .cm_new_comment .cm_upload_box_with_model, .cm_comment_form .cm_upload_box_with_model {
    padding-left: 0 !important;
    }

        .drag-container {
            width: 100%;
            height: auto;
            position: relative;
            display: flex;
            justify-content: center;
        }
        .draggable-box {
            width: 100%;
            height: 190px;
            border: 1px dashed #c1c1c1;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: white;
            position: relative;
            flex-direction: column;
            text-align: center;
            border-radius: 15px;
        }
        .draggable-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 5px;
        }
        .remove-image {
            position: absolute;
            top: 5px;
            right: 5px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: none;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 14px;
        }
   
        .bento-box {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f9fa;
            padding: 0px;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            height: 75px;
            overflow: hidden;
            border: 1px solid #d3d3d3;
        }
        .bento-box img {
            max-width: 100%;
            max-height: 100%;
            border-radius: 10px;
            object-fit: cover;
        }

        .company-user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
            margin-left: -10px;
            border: 2px solid white;
            font-size: 14px;
            text-transform: uppercase;
        }

</style> 
<style>
    .speech-bubble-jn {
        position: absolute;
        top: -28px;
        left: 31%;
        transform: translateX(-50%);
        background: #4CAF50;
        color: white;
        border-radius: 8px;
        padding: 0px 10px;
        white-space: nowrap;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 10;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        width: auto;
        height: auto;
        overflow: hidden;
    }

    .speech-bubble-jn::before {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 10%;
        transform: translateX(-50%);
        border-style: solid;
        border-width: 10px 8px 0 8px;
        border-color: #4CAF50 transparent transparent transparent;
    }

    .speech-bubble-jn .email-note {
        display: none;
        width: 100%;
        margin-top: 5px;
        padding: 5px;
        border: none;
        border-radius: 4px;
        background: #fff;
        color: #333;
    }

    .speech-bubble-jn .dots {
        font-size: 20px;
        font-weight: bold;
        display: inline-block;
    }

    .speech-bubble-jn.active {
        min-width: 250px; 
        min-height: 60px;
        padding: 15px;
    }

    .speech-bubble-jn.active .email-note {
        display: block;
    }

    .speech-bubble-jn.active .dots {
        display: none;
    }

    
    .speech-bubble-jn.active:hover .email-actions-no {
        display: block;
    }
    
    .email-actions-no {
        display: none;
        margin-top: 8px;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 6px 8px;
        border-radius: 4px;
        font-size: 14px;
        text-align: left;
    }
</style>

@section('sub-header')

    {{-- <div class="container mx-auto">
        <a href="{{route('head_office.location_page_view',$ho_location->id)}}" class="link text-info">Details</a>
        <a href="{{route('head_office.location_page_view_timeline',$ho_location->id)}}" class="link text-info ms-4">Timeline</a>
    </div> --}}
@endsection
@section('content')

<div id="content" class="container-fluid" style="margin: 0; padding: 0 2%; margin-bottom: 8rem;">
    <div class="row">
        <!-- Sidebar with Tabs -->
        <div class="col-2 p-3 border-end">
            <div class="nav flex-column nav-pills" id="tab-buttons" role="tablist">
                <button class="nav-link active d-flex justify-content-between align-items-center" id="tab1-tab" data-bs-toggle="pill" data-bs-target="#tab1" type="button" role="tab">
                    Details <svg fill="#000000" height="16px" width="16px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
                    viewBox="0 0 512 512" xml:space="preserve">
               <g>
                   <g>
                       <path d="M388.418,240.915L153.752,6.248c-8.331-8.331-21.839-8.331-30.17,0c-8.331,8.331-8.331,21.839,0,30.17L343.163,256
                           L123.582,475.582c-8.331,8.331-8.331,21.839,0,30.17c8.331,8.331,21.839,8.331,30.17,0l234.667-234.667
                           C396.749,262.754,396.749,249.246,388.418,240.915z"/>
                   </g>
               </g>
               </svg>
                </button>
                <a href="{{route('head_office.location_page_view_timeline',$ho_location->id)}}" class="nav-link d-flex justify-content-between align-items-center" type="button" role="tab">
                    Timeline <svg fill="#000000" height="16px" width="16px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
                                viewBox="0 0 512 512" xml:space="preserve">
                                <g>
                                    <g>
                                        <path d="M388.418,240.915L153.752,6.248c-8.331-8.331-21.839-8.331-30.17,0c-8.331,8.331-8.331,21.839,0,30.17L343.163,256
                                            L123.582,475.582c-8.331,8.331-8.331,21.839,0,30.17c8.331,8.331,21.839,8.331,30.17,0l234.667-234.667
                                            C396.749,262.754,396.749,249.246,388.418,240.915z"/>
                                    </g>
                                </g>
                              </svg>
                </a>
                <button class="nav-link d-flex justify-content-between align-items-center" id="tab3-tab" data-bs-toggle="pill" data-bs-target="#tab3" type="button" role="tab">
                Notes     <svg fill="#000000" height="16px" width="16px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
                                    viewBox="0 0 512 512" xml:space="preserve">
                            <g>
                                <g>
                                    <path d="M388.418,240.915L153.752,6.248c-8.331-8.331-21.839-8.331-30.17,0c-8.331,8.331-8.331,21.839,0,30.17L343.163,256
                                        L123.582,475.582c-8.331,8.331-8.331,21.839,0,30.17c8.331,8.331,21.839,8.331,30.17,0l234.667-234.667
                                        C396.749,262.754,396.749,249.246,388.418,240.915z"/>
                                </g>
                            </g>
                            </svg>
                </button>
                <div class="nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
                    @php
                        $tabs = ['Alerts', 'SOPs', 'Tasks', 'Sent Forms', 'Inspection', 'Activity'];
                    @endphp
                
                    @foreach ($tabs as $tab)
                        <button 
                            class="nav-link d-flex justify-content-between align-items-center" 
                            type="button" 
                            style="position: relative;"
                        >
                            {{ $tab }}
                            <span 
                                style="
                                    position: absolute;
                                    background-color:rgb(0, 0, 0);
                                    color: white;
                                    padding: 5px 10px;
                                    border-radius: 5px;
                                    font-size: 0.85rem;
                                    top: -10px;
                                    right: 2px;
                                    z-index: 10;
                                    
                                    opacity: 0;
                                    transition: opacity 0.3s ease;
                                    pointer-events: none;
                                "
                                class="coming-soon-tooltip"
                            >
                                 Coming soon
                            </span>
                            <svg fill="#000000" height="16px" width="16px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                                <path d="M388.418,240.915L153.752,6.248c-8.331-8.331-21.839-8.331-30.17,0
                                    c-8.331,8.331-8.331,21.839,0,30.17L343.163,256
                                    L123.582,475.582c-8.331,8.331-8.331,21.839,0,30.17
                                    c8.331,8.331,21.839,8.331,30.17,0l234.667-234.667
                                    C396.749,262.754,396.749,249.246,388.418,240.915z"/>
                            </svg>
                        </button>
                    @endforeach
                </div>
                
                <!-- Inline Hover Script -->
                <script>
                    document.querySelectorAll('.nav-link').forEach(button => {
                        const tooltip = button.querySelector('.coming-soon-tooltip');
                
                        button.addEventListener('mouseenter', () => {
                            tooltip.style.opacity = '1';
                        });
                
                        button.addEventListener('mouseleave', () => {
                            tooltip.style.opacity = '0';
                        });
                    });
                </script>
                
            </div>
        </div>
        <!-- Content Area -->
        <div class="col-10 p-3">
                <div class="tab-pane fade show active" id="tab1" role="tabpanel">
                                 @php
                                     $location = $ho_location->location;
                                 @endphp
                                 @include('layouts.error')  
                  <form action="{{route('head_office.location.update')}}" method="POST" enctype="multipart/form-data" id="form">
                        @csrf
                        {{-- @dd($ho_location->location_logo); --}}
                        <input type="hidden" name="ho_location_id" value="{{$ho_location->id}}">
                        <style>
                           .image-background-color {
                            background: {{ optional($ho_location->org_settings())->bg_color_code ?? '#99cbc2' }};
                           }
                        </style>
                        {{-- {{ dd($ho_location->org_settings()) }} --}}
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-12 border-bottom">  
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="d-flex align-items-center gap-3">
                                            <label for="file" class="user-icon-circle" style="padding: 20px">
                                                <div style="border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;" class="image-background-color border">
                                                    {{-- @dd($ho_location->org_settings()?->setting_logo() ?? asset('images/building-02icon.svg')) --}}
                                                    <img style="width: 100px; height: 100px; padding: 14px;  object-fit: cover; object-position: top;" 
                                                        id="output"
                                                        src="{{ ($ho_location->org_settings() !== null && $ho_location->org_settings()->setting_logo() !== null) ? $ho_location->org_settings()->setting_logo() : asset('images/white-buildind-02-icon.png') }}">
                                                </div>
                                                @if ($ho_location->org_settings() == null)
                                                    {{-- <p class="m-0 text-secondary" style="font-size: 12px;">No theme applied, Logo changes will not be reflected</p> --}}
                                                @endif
                                            </label>                                
                                            <input id="file" type="file" name="logo_file" class="d-none" accept=".png, .jpg , .jpeg" onchange="loadFile(event)" />
                                            <div class="d-flex flex-column">
                                                <h6 class="h4 m-0">{{$location->trading_name}}</h6>
                                                <p>{{isset($location->location_code) ?  $location->location_code : ''}}</p>
                                            </div>
                                        </div>
                                       @php
                                            $colors = ['bg-primary', 'bg-secondary', 'bg-success', 'bg-danger', 'bg-warning', 'bg-info', 'bg-dark'];
                                            $assignedUsers = $ho_location->assigned_user(); 
                                        @endphp
                                        <div class="d-flex flex-row">
                                            <div class="me-5">
                                                <div class="d-flex align-items-center">
                                                    @if (!empty($assignedUsers))
                                                        @foreach ($assignedUsers as $index => $assignedUser)
                                                            @php
                                                                $userName = $assignedUser->user->name;
                                                                $initials = strtoupper(substr($userName, 0, 2));
                                                                $bgColor = $colors[$index % count($colors)];
                                                            @endphp
                                                            <div class="company-user-avatar {{ $bgColor }}">
                                                                {{ $initials }}
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <p>Location has not been assigned to any user</p>
                                                    @endif
                                                </div>
                                            </div>
                                            <div>
                                                <button class="primary-btn" type="submit">Update</button>
                                                <a href="{{route('head_office.color_branding_get', ['id' => $location->id, '_token' => csrf_token()])}}"
                                                    class="primary-btn my-2"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M20.7914 12.6074C21.0355 12.3981 21.1575 12.2935 21.2023 12.169C21.2415 12.0598 21.2415 11.9402 21.2023 11.831C21.1575 11.7065 21.0355 11.6018 20.7914 11.3926L12.3206 4.13196C11.9004 3.77176 11.6903 3.59166 11.5124 3.58725C11.3578 3.58342 11.2101 3.65134 11.1124 3.77122C11 3.90915 11 4.18589 11 4.73936V9.03462C8.86532 9.40807 6.91159 10.4897 5.45971 12.1139C3.87682 13.8845 3.00123 16.1759 3 18.551V19.1629C4.04934 17.8989 5.35951 16.8765 6.84076 16.1659C8.1467 15.5394 9.55842 15.1683 11 15.0705V19.2606C11 19.8141 11 20.0908 11.1124 20.2288C11.2101 20.3486 11.3578 20.4166 11.5124 20.4127C11.6903 20.4083 11.9004 20.2282 12.3206 19.868L20.7914 12.6074Z"
                                                            stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                                    </svg>
                                                    Remotely Access</a>
                                                    <a href="{{ route('head_office.create_task', ['loc_id' => $ho_location->id]) }}" class="primary-btn" target="_blank">Send Task</a>
                                            </div>
                                        </div>
                                    </div>
                                        {{-- @php
                                            $ho_name = DB::table('head_offices')
                                                ->where('id', $ho_location->head_office_id)
                                                ->value('company_name');
                                                    $ho_name = Str::replace(' ', '_', $ho_name);
                                                    $loc_username = $location->username;
                                                    $loc_username = rtrim($loc_username, '.');
                                                    if (!Str::contains($loc_username, '.' . $ho_name)) {
                                                        $loc_username .= '.' . $ho_name;
                                                }
                                        @endphp --}}
                                    <div class="pb-4">
                                        {{-- <p class="m-0 fw-semibold text-info mb-2" >Tags</p> --}}
                                        <div class="">
                                            @livewire('location-tags-manager', ['loc_id' => $location->id])
                                        </div>
                                    </div>  
                                </div>
                            </div>
                        </div>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-3">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <h4 class="my-3">Details</h4> 
                                            <div class="drag-container">
                                                <div class="draggable-box" id="dropBox">
                                                    <svg width="40px" height="40px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M21.9998 12.6978C21.9983 14.1674 21.9871 15.4165 21.9036 16.4414C21.8067 17.6308 21.6081 18.6246 21.1636 19.45C20.9676 19.814 20.7267 20.1401 20.4334 20.4334C19.601 21.2657 18.5405 21.6428 17.1966 21.8235C15.8835 22 14.2007 22 12.0534 22H11.9466C9.79929 22 8.11646 22 6.80345 21.8235C5.45951 21.6428 4.39902 21.2657 3.56664 20.4334C2.82871 19.6954 2.44763 18.777 2.24498 17.6376C2.04591 16.5184 2.00949 15.1259 2.00192 13.3967C2 12.9569 2 12.4917 2 12.0009V11.9466C1.99999 9.79929 1.99998 8.11646 2.17651 6.80345C2.3572 5.45951 2.73426 4.39902 3.56664 3.56664C4.39902 2.73426 5.45951 2.3572 6.80345 2.17651C7.97111 2.01952 9.47346 2.00215 11.302 2.00024C11.6873 1.99983 12 2.31236 12 2.69767C12 3.08299 11.6872 3.3952 11.3019 3.39561C9.44749 3.39757 8.06751 3.41446 6.98937 3.55941C5.80016 3.7193 5.08321 4.02339 4.5533 4.5533C4.02339 5.08321 3.7193 5.80016 3.55941 6.98937C3.39683 8.19866 3.39535 9.7877 3.39535 12C3.39535 12.2702 3.39535 12.5314 3.39567 12.7844L4.32696 11.9696C5.17465 11.2278 6.45225 11.2704 7.24872 12.0668L11.2392 16.0573C11.8785 16.6966 12.8848 16.7837 13.6245 16.2639L13.9019 16.0689C14.9663 15.3209 16.4064 15.4076 17.3734 16.2779L20.0064 18.6476C20.2714 18.091 20.4288 17.3597 20.5128 16.3281C20.592 15.3561 20.6029 14.1755 20.6044 12.6979C20.6048 12.3126 20.917 12 21.3023 12C21.6876 12 22.0002 12.3125 21.9998 12.6978Z" fill="#1C274C"/>
                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 11C15.3787 11 14.318 11 13.659 10.341C13 9.68198 13 8.62132 13 6.5C13 4.37868 13 3.31802 13.659 2.65901C14.318 2 15.3787 2 17.5 2C19.6213 2 20.682 2 21.341 2.65901C22 3.31802 22 4.37868 22 6.5C22 8.62132 22 9.68198 21.341 10.341C20.682 11 19.6213 11 17.5 11ZM18.25 4.5C18.25 4.08579 17.9142 3.75 17.5 3.75C17.0858 3.75 16.75 4.08579 16.75 4.5V5.75H15.5C15.0858 5.75 14.75 6.08579 14.75 6.5C14.75 6.91421 15.0858 7.25 15.5 7.25H16.75V8.5C16.75 8.91421 17.0858 9.25 17.5 9.25C17.9142 9.25 18.25 8.91421 18.25 8.5V7.25H19.5C19.9142 7.25 20.25 6.91421 20.25 6.5C20.25 6.08579 19.9142 5.75 19.5 5.75H18.25V4.5Z" fill="#1C274C"/>
                                                    </svg>
                                                    <img id="preview" style="display: none;">
                                                    <button type="button" class="remove-image">&times;</button>
                                                    <input type="file" name="company_profile_image_update" id="imageUpload" class="form-control mt-2" accept="image/*" hidden>
                                                    <a id="browseBtn" style="text-decoration: underline !important; cursor: pointer;" class="text-primary mt-2">Browse</a>
                                                </div>
                                            </div>
                                            <div class="modal fade" id="cropModal" tabindex="-1" role="dialog">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Crop Image</h5>
                                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="img-container">
                                                                <img id="cropImage" style="width: 100%;">
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button id="cropBtn" type="button" class="btn btn-primary">Save</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>        
                                        </div>
                                    </div>
                                    {{-- @dd($ho_location->location_logo) --}}
                                                                
                                <div class="container-fluid mt-5 border">
                                    <div class="row mb-3">
                                        <div class="mt-3 mb-2">
                                            <button class="btn btn-primary" type="button" id="toggleSelectBtn">Select</button>
                                        </div>
                                    </div>
                                    <div class="row g-3 py-2 overflow-auto" style="max-height: 400px;">
                                        @foreach($ho_location->location_logo as $logo)
                                            <div class="col-lg-6 col-md-6 col-sm-12">
                                                <div class="bento-box position-relative">
                                                    <img src="{{ asset('images/' . $logo->image) }}" alt="Location Image" class="img-fluid">
                                                    <input type="checkbox" name="selected_image" value="{{ $logo->id }}" 
                                                     class="select-checkbox position-absolute" style="display: none; top: 5; right: 5;">
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>    
                                </div>                                                                       
                                </div>
                                <div class="col-9">
                                        <div class="mt-0 " style="margin-left: 2rem;">
                                            <div>
                                                <p class="m-0 fw-semibold text-info mb-2" >General</p>
                                                <div class="grid-wrap resizing-input location-input">
                                                    <p class="m-0">Username:</p>
                                                    <input type="text" name="username" value="{{ $location->username }}" placeholder="Username" minlength="5">
                                                    <span></span>
                                                </div>
                                                <div class="grid-wrap resizing-input location-input">
                                                    <p class="m-0">Company Name:</p>
                                                    <p class="m-0">{{$location->registered_company_name}}</p>
                                                </div>
                                                <div class="grid-wrap resizing-input location-input">
                                                    <p class="m-0">Registration no:</p>
                                                    <input type="text" name="registration_no" value="{{$location->registration_no}}" placeholder="Registration no" min="5"> 
                                                    <span></span>
                                                </div>
                                                <div class="grid-wrap resizing-input location-input">
                                                    <p class="m-0">Trading Name</p>
                                                    <input type="text" id="trading_name" value="{{ $location->trading_name }}" placeholder="Trading Name" data-id="{{ $location->id }}">
                                                    <span id="trading-update-message"></span>
                                                </div>                                        
                                                <div class="grid-wrap resizing-input location-input">
                                                    <p class="m-0">Site ID:</p>
                                                    <input type="text" name="location_code" value="{{$location->location_code}}" placeholder="Location ID" min="5"> 
                                                    <span></span>
                                                </div>
                                                <div class="grid-wrap resizing-input location-input">
                                                    <p class="m-0">ODS/Contractor code:</p>
                                                    <input style="background-color:rgba(255, 0, 0, 0); " disabled type="text" name="location_ods_code" value="{{$location->ods_name}}" placeholder="Location ODS" min="5"> 
                                                    <span></span>
                                                </div>
                                            </div>
                                            <div>
                                                <p class="m-0 fw-semibold text-info mb-2 mt-3" >Details</p>
                                                <div class="grid-wrap resizing-input location-input d-flex align-items-center">
                                                        <p class="m-0">Address:</p>
                                                        <p class="m-0" style="padding-left: 19% !important;">{{$location->full_address}}</p>
                                                        <button type="button" class="btn btn-link p-0 ms-2" data-bs-toggle="modal" data-bs-target="#editAddressModal" style="text-decoration: none;">
                                                            <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="20px" height="20px" viewBox="0 0 494.936 494.936"
                                                            xml:space="preserve">
                                                    <g>
                                                        <g>
                                                            <path d="M389.844,182.85c-6.743,0-12.21,5.467-12.21,12.21v222.968c0,23.562-19.174,42.735-42.736,42.735H67.157
                                                                c-23.562,0-42.736-19.174-42.736-42.735V150.285c0-23.562,19.174-42.735,42.736-42.735h267.741c6.743,0,12.21-5.467,12.21-12.21
                                                                s-5.467-12.21-12.21-12.21H67.157C30.126,83.13,0,113.255,0,150.285v267.743c0,37.029,30.126,67.155,67.157,67.155h267.741
                                                                c37.03,0,67.156-30.126,67.156-67.155V195.061C402.054,188.318,396.587,182.85,389.844,182.85z"/>
                                                            <path d="M483.876,20.791c-14.72-14.72-38.669-14.714-53.377,0L221.352,229.944c-0.28,0.28-3.434,3.559-4.251,5.396l-28.963,65.069
                                                                c-2.057,4.619-1.056,10.027,2.521,13.6c2.337,2.336,5.461,3.576,8.639,3.576c1.675,0,3.362-0.346,4.96-1.057l65.07-28.963
                                                                c1.83-0.815,5.114-3.97,5.396-4.25L483.876,74.169c7.131-7.131,11.06-16.61,11.06-26.692
                                                                C494.936,37.396,491.007,27.915,483.876,20.791z M466.61,56.897L257.457,266.05c-0.035,0.036-0.055,0.078-0.089,0.107
                                                                l-33.989,15.131L238.51,247.3c0.03-0.036,0.071-0.055,0.107-0.09L447.765,38.058c5.038-5.039,13.819-5.033,18.846,0.005
                                                                c2.518,2.51,3.905,5.855,3.905,9.414C470.516,51.036,469.127,54.38,466.61,56.897z"/>
                                                        </g>
                                                    </g>
                                                    </svg>
                                                        </button>
                                                </div>
                                                <div class="d-flex align-items-center justify-content-between mb-2">
                                                    <div class="grid-wrap  w-100 ">
                                                        <p class="m-0">Telephone: <i class="rounded-circle bg-black text-white" style="font-style: normal; font-size: 11px;padding:4px;" data-toggle="tooltip" data-bs-placement="top" title="This is used for Two-Factor Authentication">2FA</i></p>
                                                        <input class="telephone form-control form-control-sm" autocomplete="off" type="tel" name="telephone_no" value="{{$location->telephone_no}}" placeholder="Telephone no"> 
                                                        <span></span>
                                                    </div>
                                                    
                                                            <svg style="cursor: pointer;" onclick="insert_new_phone('phone_container', 'phones')"
                                                            width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                            xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M12 5V19M5 12H19" stroke="var(--portal-section-heading-color)"
                                                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                                                
                                                            </svg>                              
                                                </div>
                                                <div style="display: flex; justify-content: end;">
                                                    <div id="phone_container" class="d-flex flex-column gap-1" style="width: 71%;">
                                                        @if (isset($phones) && !empty($phones))
                                                        @foreach ($phones as $index => $phone)
                                                            <div id="phone_input_{{ $index }}" class='d-flex flex-column gap-1'>
                                                                <input class="telephone form-control form-control-sm shadow-none" required type="tel" placeholder="Add a phone number" name="phones[]" value="{{ $phone }}" />
                                                                <input class="form-control form-control-sm shadow-none" type="text" name="phone_note[]" placeholder="Add a note (e.g. Manager's mobile)" value="{{ isset($phone_notes[$index]) ? $phone_notes[$index] : '' }}" />
                                                                <div class='d-flex align-items-center gap-2'>
                                                                    <input type="checkbox" name="primary_phone" value="{{ $index }}" onclick="setPrimary(event,'primary_phone', {{ $index }})" tooltip='Set this phone as primary phone'>
                                                                    <span>Make Primary</span>
                                                                    <svg fill="none" onclick="remove_item('phone_input_{{ $index }}')" width="24" height="24" viewBox="0 0 24 24" style="cursor: pointer;">
                                                                        <path d="M16 6V5.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 2H11.2C10.0799 2 9.51984 2 9.09202 2.21799C8.71569 2.40973 8.40973 2.71569 8.21799 3.09202C8 3.51984 8 4.0799 8 5.2V6M10 11.5V16.5M14 11.5V16.5M3 6H21M19 6V17.2C19 18.8802 19 19.7202 18.673 20.362C18.3854 20.9265 17.9265 21.3854 17.362 21.673C16.7202 22 15.8802 22 14.2 22H9.8C8.11984 22 7.27976 22 6.63803 21.673C6.07354 21.3854 5.6146 20.9265 5.32698 20.362C5 19.7202 5 18.8802 5 17.2V6" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                                    </svg>
                                                                </div>
                                                            </div>
                                                        @endforeach  
                                                        @endif
                                                </div>
                                                </div>
                                                {{-- <div class="d-flex align-items-center justify-content-between mt-4 mb-2">
                                                    <div class="grid-wrap  w-100 ">
                                                        <p class="m-0">Email: @if($location->otp?->is_totp_enabled) <i class=" rounded-circle bg-black text-white" style="font-style: normal; font-size: 11px;padding:4px;" data-toggle="tooltip" data-bs-placement="top" title="This is used for Two-Factor Authentication">2FA</i>@endif </p>
                                                        <input style = "z-index: 0;" autocomplete="off" class="email-input form-control form-control-sm " type="email" name="email" value="{{$location->email}}" placeholder="Email" > 
                                                        <span></span>
                                                    </div>
                                                    <svg style="cursor: pointer;" onclick="insert_new_email('email_container', 'emails')"
                                                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M12 5V19M5 12H19" stroke="var(--portal-section-heading-color)"
                                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                                    </svg>
                                                </div> --}}
                                                <div class="d-flex align-items-center justify-content-between mt-4 mb-2">
    <div class="grid-wrap w-100">
 
        <p class="m-0">
            Email:
            @if($location->otp?->isEnabled)
                <i class="rounded-circle bg-black text-white"
                   style="font-style: normal; font-size: 11px; padding: 4px;"
                   data-toggle="tooltip"
                   data-bs-placement="top"
                   title="Multi-Factor Authentication enabled via Email">
                    MFA
                </i>
            @endif
        </p>

        <input style="z-index: 0;" autocomplete="off"
               class="email-input form-control form-control-sm"
               type="email" name="email"
               value="{{ $location->email }}" placeholder="Email">
        <span></span>
    </div>

    <svg style="cursor: pointer;" onclick="insert_new_email('email_container', 'emails')"
         width="24" height="24" viewBox="0 0 24 24" fill="none"
         xmlns="http://www.w3.org/2000/svg">
        <path d="M12 5V19M5 12H19"
              stroke="var(--portal-section-heading-color)"
              stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
</div>

                                                            
                                                <div id="email_container" class="d-flex flex-column gap-2 extras" style="margin: 35px 0 0 0;">
                                                    @if (isset($emails) && count($emails) != 0)
                                                        @foreach ($emails as $index => $email)
                                                            <div id="email_input_{{ $index }}" class="position-relative email-container d-flex justify-content-end">
                                                                <div style="width: 71%;">
                                                                    <input class="email email-input form-control form-control-sm shadow-none" 
                                                                        required type="email" placeholder="Add an email address" 
                                                                        name="emails[]" value="{{ $email }}" />
                                                                    <div class="speech-bubble-jn" onclick="toggleBubble(this, event)">
                                                                        <span class="dots">...</span>
                                                                        <input class="email-note" type="text" name="email_note[]" 
                                                                            placeholder="Add a note (e.g. Work email)" 
                                                                            value="{{ isset($email_notes[$index]) ? $email_notes[$index] : '' }}" 
                                                                            onClick="event.stopPropagation();" />
                                                                        <div class="email-actions-no">
                                                                            <input type="checkbox" name="primary_email" value="{{ $index }}" 
                                                                                onclick="setPrimary(event, 'primary_email', {{ $index }})" />
                                                                            <span>Make Primary</span>
                                                                            <svg fill="none" onclick="remove_item('email_input_{{ $index }}')" 
                                                                                width="24" height="24" viewBox="0 0 24 24" class="delete-icon">
                                                                                <path 
                                                                                d="M16 6V5.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 2H11.2C10.0799 2 9.51984 2 9.09202 2.21799C8.71569 2.40973 8.40973 2.71569 8.21799 3.09202C8 3.51984 8 4.0799 8 5.2V6M10 11.5V16.5M14 11.5V16.5M3 6H21M19 6V17.2C19 18.8802 19 19.7202 18.673 20.362C18.3854 20.9265 17.9265 21.3854 17.362 21.673C16.7202 22 15.8802 22 14.2 22H9.8C8.11984 22 7.27976 22 6.63803 21.673C6.07354 21.3854 5.6146 20.9265 5.32698 20.362C5 19.7202 5 18.8802 5 17.2V6" 
                                                                                stroke="red" 
                                                                                stroke-width="2" 
                                                                                stroke-linecap="round" 
                                                                                stroke-linejoin="round" 
                                                                                />
                                                                            </svg>
                                                                        </div>
                                                                    </div>  
                                                                </div>
                                                            </div>
                                                        @endforeach       
                                                    @endif                                                                                    
                                                </div>
                                                <script>
                                                     $(document).click(function (event) {
                                                        if (!$(event.target).closest('.speech-bubble-jn').length) {
                                                            $('.speech-bubble-jn').removeClass('active').css('z-index', '10');
                                                        }
                                                     });

                                                    function toggleBubble(element, event) {
                                                        event.stopPropagation();
                                                        $('.speech-bubble-jn').not(element).removeClass('active').css('z-index', '10'); 

                                                        if (!$(element).hasClass('active')) {
                                                            $(element).addClass('active').css('z-index', '1000'); 
                                                        } else {
                                                            $(element).removeClass('active').css('z-index', '10'); 
                                                        }
                                                    }

                                                </script>
                                                <script>
                                                function showNoteInput(index) {
                                                document.querySelector(`#email_input_${index} .email-note-input`).style.display = 'block';
                                                }
                
                                                function hideNoteInput(index) {
                                                document.querySelector(`#email_input_${index} .email-note-input`).style.display = 'none';
                                                }
                                                </script> 
                                            </div>
                                            <div>
                                                <p class="m-0 fw-semibold text-info mb-2 mt-3" >Type</p>
                                                <div class="grid-wrap resizing-input location-input">
                                                    <p class="m-0">Type:</p>
                                                    <div class="d-flex flex-wrap gap-2 align-items-center justify-content-center">
                                                        @foreach ($location_types as $location_type)
                                                            <button type="button" data-id="{{$location_type->id}}" class="location-type-btn {{$location->location_type_id == $location_type->id ? 'active' : ''}}">{{$location_type->name}}</button>
                                                        @endforeach
                                                        <input type="hidden" name="location_type_id" value="{{$location->location_type_id}}">
                                                    </div>
                                                </div>
                                                <div class="grid-wrap resizing-input location-input mt-4">
                                                    <p class="m-0">Sub Type:</p>
                                                    <div class="d-flex flex-wrap gap-2 align-items-center justify-content-center">
                                                        @foreach ($pharm_types as $pharm_type)
                                                        <button type="button" data-id="{{$pharm_type->id}}" class="location-type-btn {{isset($location->location_pharmacy_type_id) && $location->location_pharmacy_type_id == $pharm_type->id ? 'active' : ''}}">{{$pharm_type->name}}</button>
                                                        @endforeach
                                                        <input type="hidden" name="location_pharmacy_type_id" value="{{$location->location_pharmacy_type_id}}">
                                                    </div>
                                                </div>
                                                <div class="grid-wrap resizing-input location-input mt-4">
                                                    <p class="m-0">Regulatory Body:</p>
                                                    <div class="d-flex flex-wrap gap-2 align-items-center justify-content-center">
                                                        @foreach ($bodies as $body)
                                                        <button type="button" data-id="{{$body->id}}" class="location-type-btn {{ $location->location_regulatory_body_id == $body->id ? 'active' : ''}}">{{$body->name}}</button>
                                                        @endforeach
                                                        <input type="hidden" name="location_regulatory_body_id" value="{{$location->location_regulatory_body_id}}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                <p class="m-0 fw-semibold text-info mb-2 mt-3" >Group</p>
                                                <div class="d-flex align-items-center gap-1 loc-groups-wrapper">
        
                                                    @if (count($ho_location->groups))
                                                        <div @if (count($ho_location->groups) > 1) style="display:flex;align-items:center;flex-wrap:wrap;width:144px;" @endif
                                                            class="">
                                                            @foreach ($ho_location->groups as $assignment)
                                                                <p class="btn group-btn">{{ $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 type="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"><i
                                                                class="fa fa-plus"></i></button></p>
                                            </div>
                                            </div>
                                   </div>
                                </div>
                            </div>
                        </div>
                  </form>
                </div> 
                <div class="tab-pane fade" id="tab2" role="tabpanel">
                    tab2
                </div>                
                <div class="tab-pane fade" id="tab3" role="tabpanel">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-12">
                               <div>
                                    @foreach ($comments as $key => $comment)
                                        @include('head_office.contacts.view_comments', compact('comment'))
                                    @endforeach
                               </div>
                                <div class="cm_new_comment">
                                    @include('head_office.location_comments', [
                                        'comment' => null,
                                        'parent' => null,
                                        'remove_backdrop' => true,
                                    ])
                                </div>
                            </div>  
                        </div>
                    </div>  
                </div>
                <div class="tab-pane fade" id="tab4" role="tabpanel">Coming Soon</div>
                <div class="tab-pane fade" id="tab5" role="tabpanel">Coming Soon</div>
                <div class="tab-pane fade" id="tab6" role="tabpanel">Coming Soon</div>
                <div class="tab-pane fade" id="tab7" role="tabpanel">Coming Soon</div>
                <div class="tab-pane fade" id="tab8" role="tabpanel">Coming Soon</div>
                <div class="tab-pane fade" id="tab9" role="tabpanel">Coming Soon</div>
            </div>
        </div>
    </div>
</div>  
{{-- modals started --}}
                <div class="modal fade" id="editAddressModal" tabindex="-1" aria-labelledby="editAddressModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <form action="{{ route('update.address') }}" method="POST">
                                @csrf
                                <input type="hidden" name="ho_location_id" value="{{ $location->id }}">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="editAddressModalLabel">Edit Address</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="mb-3">
                                        <label for="address_line1" class="form-label">Address Line 1</label>
                                        <input type="text" class="form-control" id="address_line1" name="address_line1" value="{{ $location->address_line1 }}">
                                    </div>
                                    <div class="mb-3">
                                        <label for="address_line2" class="form-label">Address Line 2</label>
                                        <input type="text" class="form-control" id="address_line2" name="address_line2" value="{{ $location->address_line2 }}">
                                    </div>
                                    <div class="mb-3">
                                        <label for="address_line3" class="form-label">Address Line 3</label>
                                        <input type="text" class="form-control" id="address_line3" name="address_line3" value="{{ $location->address_line3 }}">
                                    </div>
                                    <div class="mb-3">
                                        <label for="town" class="form-label">Town</label>
                                        <input type="text" class="form-control" id="town" name="town" value="{{ $location->town }}">
                                    </div>
                                    <div class="mb-3">
                                        <label for="county" class="form-label">County</label>
                                        <input type="text" class="form-control" id="county" name="county" value="{{ $location->county }}">
                                    </div>
                                    <div class="mb-3">
                                        <label for="country" class="form-label">Country</label>
                                        <select class="form-control" id="country" name="country">
                                            <option value="England" {{ $location->country == 'England' ? 'selected' : '' }}>England</option>
                                            <option value="Scotland" {{ $location->country == 'Scotland' ? 'selected' : '' }}>Scotland</option>
                                            <option value="Wales" {{ $location->country == 'Wales' ? 'selected' : '' }}>Wales</option>
                                            <option value="Channel Islands" {{ $location->country == 'Channel Islands' ? 'selected' : '' }}>Channel Islands</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label for="postcode" class="form-label">Postcode</label>
                                        <input type="text" class="form-control" id="postcode" name="postcode" value="{{ $location->postcode }}">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                    <button type="submit" class="btn btn-primary">Save Changes</button>
                                </div>
                            </form>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="group_assing_modal" tabindex="-1" aria-labelledby="group_assing_modalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="group_assing_modalLabel">Assign to</h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                    <p><strong>Location: </strong> {{ $location->name() }}</p>
                    <form method="post"
                        action="{{ route('head_office.organisation.assign_groups_save', $ho_location->id) }}">
                        @csrf
                        <input type="hidden" name="location_id" value="{{ $ho_location->id }}">
                        <p>Please select a group/tier</p>
                        @include('head_office.my_organisation.tree-list', ['groups' => $allGroups])
                        <input type="submit" name="save" value="Save" class="btn btn-info">
                    </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>


@section('scripts')
<style>
    .timeline {
        width: auto;
        max-width: auto;
    }
</style>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        let selectBtn = document.getElementById("toggleSelectBtn");
        let checkboxes = document.querySelectorAll(".select-checkbox");
        let selectionMode = false;

        selectBtn.addEventListener("click", function () {
            selectionMode = !selectionMode;
            checkboxes.forEach(checkbox => {
                checkbox.style.display = selectionMode ? "block" : "none";
            });
            selectBtn.textContent = selectionMode ? "Cancel" : "Select";
        });

        checkboxes.forEach(checkbox => {
            checkbox.addEventListener("change", function () {
                if (this.checked) {
                    checkboxes.forEach(cb => {
                        if (cb !== this) cb.checked = false; 
                    });
                }
            });
        });
    
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener("change", function () {
                saveBtn.click(); 
            });
        });
    });
    </script>  
<script>
   $(function () {
    let cropper;
    let croppedCanvas;
    
    $("#browseBtn").click(function () {
        $("#imageUpload").click();
    });

    $("#dropBox").on("dragover", function (e) {
        e.preventDefault();
        $(this).css("border-color", "#007bff");
    });

    $("#dropBox").on("dragleave", function () {
        $(this).css("border-color", "#c1c1c1");
    });

    $("#dropBox").on("drop", function (e) {
        e.preventDefault();
        $(this).css("border-color", "#c1c1c1");
        let file = e.originalEvent.dataTransfer.files[0];
        handleImage(file);
    });

    $("#imageUpload").change(function (event) {
        let file = event.target.files[0];
        handleImage(file);
    });

    function handleImage(file) {
        if (file) {
            let reader = new FileReader();
            reader.onload = function (e) {
                $("#cropImage").attr("src", e.target.result);
                $("#cropModal").modal("show");
            };
            reader.readAsDataURL(file);
        }
    }

    $('#cropModal').on('shown.bs.modal', function () {
        let image = document.getElementById('cropImage');
        cropper = new Cropper(image, {
            aspectRatio: 1,
            viewMode: 2,
            autoCropArea: 1,
        });
    }).on('hidden.bs.modal', function () {
        cropper.destroy();
        cropper = null;
    });

    $("#cropBtn").click(function () {
        croppedCanvas = cropper.getCroppedCanvas();
        let croppedImage = croppedCanvas.toDataURL("image/png"); 

        $("#preview").attr("src", croppedImage).show();
        $(".remove-image").show();
        $("#cropModal").modal("hide");

        let blob = dataURLtoBlob(croppedImage);
        let file = new File([blob], "cropped_image.png", { type: "image/png" });

        let dataTransfer = new DataTransfer();
        dataTransfer.items.add(file);
        document.getElementById("imageUpload").files = dataTransfer.files;
    });

    function dataURLtoBlob(dataURL) {
        let arr = dataURL.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    }

    $(".remove-image").click(function () {
        $("#preview").hide();
        $(".remove-image").hide();
        $("#imageUpload").val("");
    });
});
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        let tabButtons = document.querySelectorAll('[data-bs-toggle="pill"]');
        tabButtons.forEach(function (button) {
            button.addEventListener("shown.bs.tab", function (event) {
                document.querySelectorAll(".tab-pane").forEach(function (tabContent) {
                    tabContent.style.display = "none";
                });
                let activeTab = document.querySelector(event.target.getAttribute("data-bs-target"));
                if (activeTab) {
                    activeTab.style.display = "block";
                }
            });
        });
    });
</script>
    <script>
        $(document).ready(function() {
            loadActiveTab();

            $(".telephone").intlTelInput({
            fixDropdownWidth: true,
            showSelectedDialCode: true,
            strictMode: true,
            preventInvalidNumbers: true,
            initialCountry: 'gb',
            utilsScript:"{{asset('admin_assets/js/utils.js')}}"
        })
        });

        $('#form').on('submit', function() {
    $(".telephone").each(function() {
        const phoneInput = $(this);
        const fullNumber = $(this).intlTelInput("getNumber"); // Get the full phone number (with country code)

        if (fullNumber) {
            phoneInput.val(fullNumber); // Set the full number in the input field
        }
    });
});


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

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

        let loadFile = function(event) {
    let image = document.getElementById("output");
    let file = event.target.files[0]; // Ensure file is selected

    if (file) {
        // Update the image source to display the selected image
        image.src = URL.createObjectURL(file);
        
        image.onload = () => {
            URL.revokeObjectURL(image.src);
        };
    } else {
        image.src = "{{ ($ho_location->org_settings() !== null && $ho_location->org_settings()->setting_logo() !== null) ? $ho_location->org_settings()->setting_logo() : asset('images/svg/logo_blue.png') }}";
    }
};


        

        $('.location-type-btn').on('click', function(e) {
            e.preventDefault();
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
            $(this).siblings().closest('input').val($(this).data('id'));
        })

        function insert_new_phone(container_id, name) {
            let newIndex = $(`[id^="${container_id}_phone_input_"]`).length + 1;

            // Add new phone field with a Primary checkbox and note input
            $(`#${container_id}`).append(`
            <div id="${container_id}_phone_input_${newIndex}" class='d-flex flex-column gap-1'>
                <input class="telephone form-control form-control-sm shadow-none" required type="text" placeholder="Add a phone number" name="${name}[]" />
                
                <input class="form-control form-control-sm shadow-none" type="text" name="phone_note[]" placeholder="Add a note (e.g. Manager's mobile)" />
                <div class="d-flex align-items-center">
                    <svg fill="none" onclick="remove_item('${container_id}_phone_input_${newIndex}')" width="24" height="24" viewBox="0 0 24 24">
                    <path d="M16 6V5.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 2H11.2C10.0799 2 9.51984 2 9.09202 2.21799C8.71569 2.40973 8.40973 2.71569 8.21799 3.09202C8 3.51984 8 4.0799 8 5.2V6M10 11.5V16.5M14 11.5V16.5M3 6H21M19 6V17.2C19 18.8802 19 19.7202 18.673 20.362C18.3854 20.9265 17.9265 21.3854 17.362 21.673C16.7202 22 15.8802 22 14.2 22H9.8C8.11984 22 7.27976 22 6.63803 21.673C6.07354 21.3854 5.6146 20.9265 5.32698 20.362C5 19.7202 5 18.8802 5 17.2V6" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                </div>
            </div>
        `);
        // <input tootip='Set this email as primary email' type="checkbox" name="primary_email" value="${newIndex}" onclick="setPrimary('primary_email', ${newIndex})"> Make Primary
        $(".telephone").intlTelInput({
            fixDropdownWidth: true,
            showSelectedDialCode: true,
            strictMode: true,
            preventInvalidNumbers: true,
            initialCountry: 'gb',
            utilsScript:"{{asset('admin_assets/js/utils.js')}}"
        });

        }

function insert_new_email(container_id, name) {
    let newIndex = $(`[id^="${container_id}_email_input_"]`).length + 1;
    $(`#${container_id}`).append(`
        <div id="${container_id}_email_input_${newIndex}" class='d-flex flex-column gap-1' style='align-items: flex-end;'>
            <input class="email email-input form-control form-control-sm shadow-none" required  placeholder="Add an email address" name="${name}[]" style='width: 71%;' />
            <input class="form-control form-control-sm shadow-none" type="text" name="email_note[]" placeholder="Add a note (e.g. Work email)"  style='width: 71%;'/>
            <div style="display: flex; align-items: center;"> 
                
                <svg fill="none" onclick="remove_item('${container_id}_email_input_${newIndex}')" width="24" height="24" viewBox="0 0 24 24">
                                <path d="M16 6V5.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 2H11.2C10.0799 2 9.51984 2 9.09202 2.21799C8.71569 2.40973 8.40973 2.71569 8.21799 3.09202C8 3.51984 8 4.0799 8 5.2V6M10 11.5V16.5M14 11.5V16.5M3 6H21M19 6V17.2C19 18.8802 19 19.7202 18.673 20.362C18.3854 20.9265 17.9265 21.3854 17.362 21.673C16.7202 22 15.8802 22 14.2 22H9.8C8.11984 22 7.27976 22 6.63803 21.673C6.07354 21.3854 5.6146 20.9265 5.32698 20.362C5 19.7202 5 18.8802 5 17.2V6" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <button class="primary-btn">Save email</button>
            </div>
        </div>
    `);
}

function setPrimary(event, type, index) {
    // Prevent the event from propagating
    event.stopPropagation();

    // Get the clicked checkbox as a jQuery object
    const checkbox = $(`input[name="${type}"][value="${index}"]`);

    if (checkbox.length === 0) {
        console.error('Checkbox not found.');
        return;
    }

    if (checkbox.prop('checked')) {
        // Uncheck all other checkboxes except the clicked one
        $(`input[name="${type}"]`).not(checkbox).prop('checked', false);
    }
    
    // Let the checkbox toggle naturally
}




function remove_item(id) {
    // Remove the selected phone or email field
    $(`#${id}`).remove();
}


function validateEmails(container_id) {
    let isValid = true;
    
    $(`.email-input`).each(function() {
        let email = $(this).val();
        // Simple email validation regex
        let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        
        if (!emailPattern.test(email)) {
            isValid = false;
            $(this).addClass('is-invalid');  // Add a class to highlight invalid email
        } else {
            $(this).removeClass('is-invalid');  // Remove invalid class if valid
        }
    });

    return isValid;
}

function validatePhones(container_id) {
    let isValid = true;

    // Loop through each telephone input to validate and get full number
    $(`.telephone`).each(function() {
        // Get the full international number using the intlTelInput jQuery method
        const fullNumber = $(this).intlTelInput("getNumber");

        // Check if the number is valid
        if (!$(this).intlTelInput("isValidNumber")) {
            isValid = false;
            $(this).addClass('is-invalid');  // Add error highlighting
        } else {
            $(this).removeClass('is-invalid');  // Remove error highlighting
            console.log('Valid number:', fullNumber);  // Output the valid number
        }
    });

    return isValid;
}


// Usage example in form submission
$('#form').on('submit', function(e) {
    let emailContainerId = 'email_container';
    let phoneContainerId = 'phone_container';

    let isPhoneValid = validatePhones(phoneContainerId);
    let isEmailValid = validateEmails(emailContainerId);
    // If either validation fails, prevent form submission
    if (!isPhoneValid || !isEmailValid) {
        e.preventDefault();  // Stop form submission
        if (!isPhoneValid) {
            alertify.error('Please correct invalid phone number(s).');
        }
        if (!isEmailValid) {
            alertify.error('Invalid email address.');
        }
    }
    
});




    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#trading_name').on('blur', function () {
                let tradingName = $(this).val();
                let locationId = $(this).data('id');
    
                $.ajax({
                    url: "{{ route('location.update.trading') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        id: locationId,
                        trading_name: tradingName
                    },
                    success: function (response) {
                        $('#trading-update-message').text("Updated successfully! ✅").css("color", "green").fadeOut(2000);
                    },
                    error: function () {
                        $('#trading-update-message').text("Update failed! ❌").css("color", "red");
                    }
                });
            });
        });
    </script>




    <script src="{{ asset('js/alertify.min.js') }}"></script>
    <script src="{{asset('admin_assets/speech-to-text.js')}}"></script>

@endsection
@endsection