{{-- below new page  --}}

@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;
        }

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

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

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

        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
</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">
                <a href="{{route('head_office.location_page_view', $ho_location->id)}}" class="nav-link d-flex justify-content-between align-items-center">
                        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>
                </a>
                <a href="{{route('head_office.location_page_view_timeline',$ho_location->id)}}" class="nav-link active d-flex justify-content-between align-items-center">
                    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>
                <a href="{{route('head_office.location_page_view', $ho_location->id)}}" class="nav-link d-flex justify-content-between align-items-center">
                    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>
                </a>
                <a href="{{route('head_office.location_page_view', $ho_location->id)}}" class="nav-link d-flex justify-content-between align-items-center">
                    Alerts <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>
                <a href="{{route('head_office.location_page_view', $ho_location->id)}}" class="nav-link d-flex justify-content-between align-items-center">
                    SOPs <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>
                <a href="{{route('head_office.location_page_view', $ho_location->id)}}" class="nav-link d-flex justify-content-between align-items-center" >
                    Tasks <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>
                <a href="{{route('head_office.location_page_view', $ho_location->id)}}" class="nav-link d-flex justify-content-between align-items-center">
                    Sent Forms <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>
                <a href="{{route('head_office.location_page_view', $ho_location->id)}}" class="nav-link d-flex justify-content-between align-items-center">
                    Inspection <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>
                <a href="{{route('head_office.location_page_view', $ho_location->id)}}" class="nav-link d-flex justify-content-between align-items-center">
                    Activity <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>
            </div>
        </div>
        <!-- Content Area -->
        <div class="col-10 p-3">
                <div class="tab-pane fade" id="tab1" role="tabpanel">
                    tab1
                </div> 
                <div class="tab-pane fade show active" id="tab2" role="tabpanel">
                     <div class="row">
                         <div class="col-3">
                            @include('head_office.location_sidebar')
                            @php
                                $location = $ho_location->location;
                            @endphp
                            <style>
                                .grid-wrap{
                                    display: grid;
                                    grid-template-columns: 30% 1fr;
                                }
                                .cm_case_status{
                                    position: absolute;
                                    top: 10px;
                                    right: 20px;
                                }
                            </style>
                            @include('layouts.error')
                         </div>
                         <div class="col-9">
                            <div class="container-lg mx-auto">
                                <div class="timeline timeline_nearmiss border-add nearmiss-timeline">
                                    <div class="border-top-form"></div>
                                    @include('head_office.record_data_company_location_view')
    
    
                                    <div class="line line-date  print-display-none" style="display:none">
                                        <div class="timeline-label"><i class="spinning_icon fa-spin fa fa-spinner"></i></div>
                                    </div>
                                    <div class="line line-date last-line">
                                        <div class="timeline-label">Start</div>
                                    </div>
                                    <div class="account_created center" style="margin: unset;">
                                        <h4 class="timeline_category_title">Account Created</h4>
                                        <p>{{ date('D jS F Y', strtotime($location->created_at)) }}</p>
                                    </div>
                                </div>
                            </div>
                         </div>
                     </div>
                </div>                
                <div class="tab-pane fade" id="tab3" role="tabpanel">
                    tab3
                </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 --}}
                
@section('scripts')


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

@endsection
@endsection