<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- CSRF Token Meta Tag -->
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Inbox</title>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.css">
  <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>  -->
  <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.js"></script>
  <!-- Bootstrap Styles -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link href="https://api.fontshare.com/v2/css?f[]=satoshi@300,301,400,401,500,501,700,701,900,901&display=swap"
    rel="stylesheet">
  <!-- Bootstrap JavaScript -->
  <!-- Toastr CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

  <!-- Main Styles  -->
  <link rel="stylesheet" href="{{ asset('assets/style.css') }}">
<link rel="icon" href="{{asset('images/favicon.ico')}}" type="image/png">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

<style>
    .logo_be .img{
      transform: translate(7px, -5px) !important;  
    }
        
</style>
</head>
</head>

<body class="color-dark-green">

  <div class="container-fluid">
    <div class="main-wrapper row wider-content-area">

      <!-- Sidebar -->
      <div class=" sidebar-area short-sidebar">
        <aside class="bg-dark-green-color align-items-center ">
          <div class="image-box d-flex justify-content-between logo_be">
              <img src="{{ asset('images/logo_cropped.png') }}" class="img"  alt="Site Logo">
              <div class="dev-toggle-sidebar dev-close"><img src="{{ asset('images/icons/close-icon.svg') }}" alt=""></div>
          </div>
          <div class="side-bar-links d-flex justify-content-center">
            <ul>
              <a href="{{ route('index') }}"
                class="side-bar-link bg-light-color d-flex align-items-center justify-content-between">
                <div class="link-left-content align-items-center d-flex">
                  <img src="{{ asset('images/icons/Message.png') }}" alt="Message">

                </div>
              </a>
              <a href="{{ route('waiting') }}" class="side-bar-link  d-flex align-items-center justify-content-between">
                <div class="link-left-content align-items-center d-flex">
                  <img src="{{ asset('images/icons/Time_light.png') }}" alt="Message">

                </div>
              </a>
              <a href="{{ route('all.tickets') }}" class="side-bar-link  d-flex align-items-center justify-content-between">
                <div class="link-left-content align-items-center d-flex">
                  <img src="{{ asset('images/Ticket_use.svg') }}" alt="Message">

                </div>
              </a>
              <a href="#" class="side-bar-link  d-flex align-items-center justify-content-between">
                <div class="link-left-content align-items-center d-flex">
                  <img src="{{ asset('images/chart-square.svg') }}" alt="Message">

                </div>
              </a>

              <li class="side-bar-link w-100">
                <div class="link-divider bg-light-color"></div>
              </li>


              <li class="side-bar-link bg-light-color d-flex align-items-center justify-content-between">

                <div class="link-left-content align-items-center d-flex flex-column">
                  <img src="{{ asset('images/icons/Arhive_alt_small_duotone.png') }}" alt="Message">
                  <img src="{{ asset('images/icons/chevron-right 7.png') }}" alt="">
                </div>
              </li>

            </ul>
          </div>

          <div class="profile-nav-row d-flex side-bar-link">

            <div class="profile-nav-box">
              @if(!is_null(Auth::user()->profile_image))
                <div class="img-box"><a href="{{route('profile')}}"><img style="height: 42px; width: 42px; border-radius: 50%" src="{{ url('' . Auth::user()->profile_image) }}" alt="User Image"></a></div>
                @else
                <div class="img-box"><img style="height: 42px; width: 42px; border-radius: 50%" src="{{ asset('dummy-image.jpg') }}" alt="User Image"></div>
                @endif
            </div>

          </div>

        </aside>
      </div>
      <!-- End -->

      <!-- Header And Main Content Wrapper -->
      <div class="content-area position-relative bg-light-color">

        <!-- Header -->
                <x-header />
                <!-- End -->

        <!-- Main Content Area -->
        @yield('content')
        <!-- End -->

        <!-- Support and Chat Fixed Buttons -->
       <x-chat-box />
        <!-- End -->
      </div>
    </div>
  </div>

<!-- jQuery (necessary for Toastr) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Toastr JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

    <script>
        $(document).ready(function() {
            @if (session('success'))
                toastr.success("{{ session('success') }}");
            @endif

            @if (session('error'))
                toastr.error("{{ session('error') }}");
            @endif
        });
    </script>
    <script>
    $(document).ready(function() {
        function updateLastOnline() {
            $.ajax({
                url: '/update-last-online',
                method: 'GET',
                success: function(response) {
                    if (response.success) {
                        console.log('Last online updated successfully.');
                    }
                },
                error: function(xhr) {
                    console.error('An error occurred:', xhr.responseText);
                }
            });
        }
    
        // Update last online every minute (60000 milliseconds)
        setInterval(updateLastOnline, 60000);
    });
    </script>
  <!-- Main Custom Js -->
  <script src="{{ asset('assets/script.js') }}"></script>
</body>

</html>