@extends('layouts/layoutMaster')

@section('title', __('WebSocket Logs'))

@section('page-style')
  @vite(['resources/assets/vendor/fonts/fontawesome.scss', 'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss'])
  <style>
    #log {
      background: #000;
      padding: 10px;
      height: 70vh;
      width: 100%;
      overflow-y: auto;
      border: 1px solid #0f0;
    }

    .event {
      margin-bottom: 10px;
    }
  </style>
@endsection

@section('vendor-script')
  @vite(['resources/assets/vendor/libs/sweetalert2/sweetalert2.js'])
@endsection

@section('content')

  <!-- Striped Rows -->
  <div class="card">
    <h5 class="card-header">🖥️ {{ __('locale.WebSocket Monitor') }}</h5>

    <div class="d-flex">
      <div class="ms-4 me-4 mb-4" id="log"></div>
    </div>


  </div>
  <!--/ Striped Rows -->

@endsection
@section('page-script')
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <script>
    $(document).ready(function() {

      // Function to append data to the log div
      function log(data) {
        let logBox = document.getElementById("log");
        if (!logBox) {
          console.error("LOG DIV NOT FOUND");
          return;
        }
        logBox.innerHTML += `<pre class="event">${JSON.stringify(data, null, 2)}</pre><hr/>`;
        logBox.scrollTop = logBox.scrollHeight;
      }

      // Fetch all active private IDs using AJAX
      $.ajax({
        url: `${baseURL}/active-channels`,
        method: 'GET',
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        },
        success: function(res) {
          const {
            users,
            drivers,
            rides,
            orders
          } = res;

          // --- USERS ---
          users.forEach(id => {
            const channelName = `private-user.${id}`;
            const channel = Echo.connector.pusher.subscribe(channelName);

            channel.bind_global((eventName, data) => {
              log({
                channel: channelName,
                event: eventName,
                data: data
              });
            });
          });

          // --- DRIVERS ---
          drivers.forEach(id => {
            const channelName = `private-driver.${id}`;
            const channel = Echo.connector.pusher.subscribe(channelName);

            channel.bind_global((eventName, data) => {
              log({
                channel: channelName,
                event: eventName,
                data: data
              });
            });
          });

          // --- RIDES ---
          rides.forEach(id => {
            const channelName = `private-ride.${id}`;
            const channel = Echo.connector.pusher.subscribe(channelName);

            channel.bind_global((eventName, data) => {
              log({
                channel: channelName,
                event: eventName,
                data: data
              });
            });
          });

          // --- ORDERS ---
          orders.forEach(id => {
            const channelName = `private-orderDetail.${id}`;
            const channel = Echo.connector.pusher.subscribe(channelName);

            channel.bind_global((eventName, data) => {
              log({
                channel: channelName,
                event: eventName,
                data: data
              });
            });
          });

        },
        error: function(err) {
          log({
            error: err.responseText || err.statusText
          });
        }
      });

    });
  </script>


@endsection