@extends('layouts.head_office_app')
@section('title', 'Sites')

@section('content')
    <div id="content">
        <div class="form-group form-name-input-edit justify-content-center resizing-input d-flex flex-column align-items-center"
        style="padding: 0; margin: 0;">
        <div class="position-relative profile-pic mt-3 d-flex flex-column align-items-center"
            style="padding: 0; margin: 0;">
            <label for="" class="d-flex align-items-center justify-content-center flex-column"
                style="width: 200px; height: 100px; padding: 0; margin: 0;">
                @if (isset($head_office->logo))
                    <img src="{{ $head_office->logo }}"
                        style="border: none; max-width: 60%; max-height: 100%; object-fit: contain;" />
                @else
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M4 16.2422C2.79401 15.435 2 14.0602 2 12.5C2 10.1564 3.79151 8.23129 6.07974 8.01937C6.54781 5.17213 9.02024 3 12 3C14.9798 3 17.4522 5.17213 17.9203 8.01937C20.2085 8.23129 22 10.1564 22 12.5C22 14.0602 21.206 15.435 20 16.2422M8 16L12 12M12 12L16 16M12 12V21"
                            stroke="#6c757d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>

                @endif
            </label>

            <div
                style="display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 8px; width: 100%;">
                <input class="form-control title-controls" type="text" id="form_name" name="form_name"
                    placeholder="Add Form Name" required onfocusout="updateCompanyName(this)"
                    value="{{ $head_office->name() }}"
                    style="width: auto; flex-grow: 1; margin-right: 8px; padding: 4px 8px;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M2.5 21.4998L8.04927 19.3655C8.40421 19.229 8.58168 19.1607 8.74772 19.0716C8.8952 18.9924 9.0358 18.901 9.16804 18.7984C9.31692 18.6829 9.45137 18.5484 9.72028 18.2795L21 6.99982C22.1046 5.89525 22.1046 4.10438 21 2.99981C19.8955 1.89525 18.1046 1.89524 17 2.99981L5.72028 14.2795C5.45138 14.5484 5.31692 14.6829 5.20139 14.8318C5.09877 14.964 5.0074 15.1046 4.92823 15.2521C4.83911 15.4181 4.77085 15.5956 4.63433 15.9506L2.5 21.4998ZM2.5 21.4998L4.55812 16.1488C4.7054 15.7659 4.77903 15.5744 4.90534 15.4867C5.01572 15.4101 5.1523 15.3811 5.2843 15.4063C5.43533 15.4351 5.58038 15.5802 5.87048 15.8703L8.12957 18.1294C8.41967 18.4195 8.56472 18.5645 8.59356 18.7155C8.61877 18.8475 8.58979 18.9841 8.51314 19.0945C8.42545 19.2208 8.23399 19.2944 7.85107 19.4417L2.5 21.4998Z"
                        stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </div>
        </div>
    </div>

        <div class="profile-center-area">
            <nav class='page-menu bordered'>
                <ul class="nav nav-tab main_header">
                    <li>
                        <a href="{{ route('head_office.company_info', ['tab' => 'info']) }}" class="info {{ request()->is('head_office/company/info') && (!request()->has('tab') || request()->get('tab') == 'info') ? 'active' : '' }}">
                            Details <span></span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('head_office.company_info', ['tab' => 'department_info']) }}" class="department_info {{ request()->get('tab') == 'department_info' ? 'active' : '' }}">
                            Departments <span></span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('head_office.sites') }}" class="my_locations active">
                            Sites <span></span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('head_office.company_info', ['tab' => 'organization_structure']) }}" class="organization_structure {{ request()->get('tab') == 'organization_structure' ? 'active' : '' }}">
                            Structure <span></span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('head_office.company_info', ['tab' => 'verified_devices']) }}" class="verified_devices {{ request()->get('tab') == 'verified_devices' ? 'active' : '' }}">
                            Verified Devices <span></span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('head_office.company_info', ['tab' => 'themes']) }}" class="themes {{ request()->get('tab') == 'themes' ? 'active' : '' }}">
                            Themes <span></span>
                        </a>
                    </li>
                </ul>
            </nav>
            
            <hr class="hrBeneathMenu">

            <div class="sites-content">
                    <div class="dropdown">
                        <button class="dropdown-toggle primary-btn right float-right float-top" type="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-plus"></i> Add Site
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="{{ route('head_office.location.create') }}?loc={{ str_replace(' ', '_', $head_office->company_name) }}"
                                    target="_blank" class="dropdown-item">Add New</a></li>
                            <li><button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#multi_locations">Add
                                    Multiple</button></li>
                        </ul>
                    </div>
                    @include('head_office.my_organisation.locations', [
                        'locations' => $locations,
                        'assignedToGroups' => $assignedToGroups,
                        'notAssigned' => $notAssigned,
                    ])
            </div>
        </div>
    </div>
@endsection