@extends('layouts.master')
@section('title', 'Your Basket')
@section('style')
<style>
  :root {
    --primary-light: #7699ff;
    --dark: #1c212e;
    --grey-dark: #3f4656;
    --grey: #6c7486;
    --grey-light: #cdd9ed;
    --white: #fff;
    --green: #16bf78;
    --sand: #dcb773;
    --sand-light: #edd9a9;
  }

  .order {
    appearance: none;
    border: 0;
    background: var(--dark);
    position: relative;
    height: 63px;
    width: 240px;
    padding: 0;
    outline: none;
    cursor: pointer;
    border-radius: 32px;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    transition: transform 0.3s ease;
  }

  .order span {
    --o: 1;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top: 19px;
    line-height: 24px;
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
    opacity: var(--o);
    transition: opacity 0.3s ease;
  }

  .order span.default {
    transition-delay: 0.3s;
  }

  .order span.success {
    --offset: 16px;
    --o: 0;
  }

  .order span.success svg {
    width: 12px;
    height: 10px;
    display: inline-block;
    vertical-align: top;
    fill: none;
    margin: 7px 0 0 4px;
    stroke: var(--green);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: var(--offset);
    transition: stroke-dashoffset 0.3s ease;
  }

  .order:active {
    transform: scale(0.96);
  }

  .order .lines {
    opacity: 0;
    position: absolute;
    height: 3px;
    background: var(--white);
    border-radius: 2px;
    width: 6px;
    top: 30px;
    left: 100%;
    box-shadow: 15px 0 0 var(--white), 30px 0 0 var(--white), 45px 0 0 var(--white), 60px 0 0 var(--white), 75px 0 0 var(--white), 90px 0 0 var(--white), 105px 0 0 var(--white), 120px 0 0 var(--white), 135px 0 0 var(--white), 150px 0 0 var(--white), 165px 0 0 var(--white), 180px 0 0 var(--white), 195px 0 0 var(--white), 210px 0 0 var(--white), 225px 0 0 var(--white), 240px 0 0 var(--white), 255px 0 0 var(--white), 270px 0 0 var(--white), 285px 0 0 var(--white), 300px 0 0 var(--white), 315px 0 0 var(--white), 330px 0 0 var(--white);
  }

  .order .back,
  .order .box {
    --start: var(--white);
    --stop: var(--grey-light);
    border-radius: 2px;
    background: linear-gradient(var(--start), var(--stop));
    position: absolute;
  }

  .order .truck {
    width: 60px;
    height: 41px;
    left: 100%;
    z-index: 1;
    top: 11px;
    position: absolute;
    transform: translateX(24px);
  }

  .order .truck:before,
  .order .truck:after {
    --r: -90deg;
    content: '';
    height: 2px;
    width: 20px;
    right: 58px;
    position: absolute;
    display: block;
    background: var(--white);
    border-radius: 1px;
    transform-origin: 100% 50%;
    transform: rotate(var(--r));
  }

  .order .truck:before {
    top: 4px;
  }

  .order .truck:after {
    --r: 90deg;
    bottom: 4px;
  }

  .order .truck .back {
    left: 0;
    top: 0;
    width: 60px;
    height: 41px;
    z-index: 1;
  }

  .order .truck .front {
    overflow: hidden;
    position: absolute;
    border-radius: 2px 9px 9px 2px;
    width: 26px;
    height: 41px;
    left: 60px;
  }

  .order .truck .front:before,
  .order .truck .front:after {
    content: '';
    position: absolute;
    display: block;
  }

  .order .truck .front:before {
    height: 13px;
    width: 2px;
    left: 0;
    top: 14px;
    background: linear-gradient(var(--grey), var(--grey-dark));
  }

  .order .truck .front:after {
    border-radius: 2px 9px 9px 2px;
    background: var(--primary);
    width: 24px;
    height: 41px;
    right: 0;
  }

  .order .truck .front .window {
    overflow: hidden;
    border-radius: 2px 8px 8px 2px;
    background: var(--primary-light);
    transform: perspective(4px) rotateY(3deg);
    width: 22px;
    height: 41px;
    position: absolute;
    left: 2px;
    top: 0;
    z-index: 1;
    transform-origin: 0 50%;
  }

  .order .truck .front .window:before,
  .order .truck .front .window:after {
    content: '';
    position: absolute;
    right: 0;
  }

  .order .truck .front .window:before {
    top: 0;
    bottom: 0;
    width: 14px;
    background: var(--dark);
  }

  .order .truck .front .window:after {
    width: 14px;
    top: 7px;
    height: 4px;
    position: absolute;
    background: rgba(255, 255, 255, .14);
    transform: skewY(14deg);
    box-shadow: 0 7px 0 rgba(255, 255, 255, .14);
  }

  .order .truck .light {
    width: 3px;
    height: 8px;
    left: 83px;
    transform-origin: 100% 50%;
    position: absolute;
    border-radius: 2px;
    transform: scaleX(0.8);
    background: rgba(240, 220, 95, 1);
  }

  .order .truck .light:before {
    content: '';
    height: 4px;
    width: 7px;
    opacity: 0;
    transform: perspective(2px) rotateY(-15deg) scaleX(0.94);
    position: absolute;
    transform-origin: 0 50%;
    left: 3px;
    top: 50%;
    margin-top: -2px;
    background: linear-gradient(90deg, rgba(240, 220, 95, 1), rgba(240, 220, 95, .7), rgba(240, 220, 95, 0));
  }

  .order .truck .light.top {
    top: 4px;
  }

  .order .truck .light.bottom {
    bottom: 4px;
  }

  .order .box {
    --start: var(--sand-light);
    --stop: var(--sand);
    width: 21px;
    height: 21px;
    right: 100%;
    top: 21px;
  }

  .order .box:before,
  .order .box:after {
    content: '';
    top: 10px;
    position: absolute;
    left: 0;
    right: 0;
  }

  .order .box:before {
    height: 3px;
    margin-top: -1px;
    background: rgba(0, 0, 0, .1);
  }

  .order .box:after {
    height: 1px;
    background: rgba(0, 0, 0, .15);
  }

  .order.animate .default {
    --o: 0;
    transition-delay: 0s;
  }

  .order.animate .success {
    --offset: 0;
    --o: 1;
    transition-delay: 7s;
  }

  .order.animate .success svg {
    transition-delay: 7.3s;
  }

  .order.animate .truck {
    animation: truck 10s ease forwards;
  }

  .order.animate .truck:before {
    animation: door1 2.4s ease forwards 0.3s;
  }

  .order.animate .truck:after {
    animation: door2 2.4s ease forwards 0.6s;
  }

  .order.animate .truck .light:before,
  .order.animate .truck .light:after {
    animation: light 10s ease forwards;
  }

  .order.animate .box {
    animation: box 10s ease forwards;
  }

  .order.animate .lines {
    animation: lines 10s ease forwards;
  }

  @keyframes truck {

    10%,
    30% {
      transform: translateX(-164px);
    }

    40% {
      transform: translateX(-104px);
    }

    60% {
      transform: translateX(-224px);
    }

    75%,
    100% {
      transform: translateX(24px);
    }
  }

  @keyframes lines {

    0%,
    30% {
      opacity: 0;
      transform: scaleY(0.7) translateX(0);
    }

    35%,
    65% {
      opacity: 1;
    }

    70% {
      opacity: 0;
    }

    100% {
      transform: scaleY(0.7) translateX(-400px);
    }
  }

  @keyframes light {

    0%,
    30% {
      opacity: 0;
      transform: perspective(2px) rotateY(-15deg) scaleX(0.88);
    }

    40%,
    100% {
      opacity: 1;
      transform: perspective(2px) rotateY(-15deg) scaleX(0.94);
    }
  }

  @keyframes door1 {

    30%,
    50% {
      transform: rotate(32deg);
    }
  }

  @keyframes door2 {

    30%,
    50% {
      transform: rotate(-32deg);
    }
  }

  @keyframes box {

    8%,
    10% {
      transform: translateX(40px);
      opacity: 1;
    }

    25% {
      transform: translateX(112px);
      opacity: 1;
    }

    26% {
      transform: translateX(112px);
      opacity: 0;
    }

    27%,
    100% {
      transform: translateX(0px);
      opacity: 0;
    }
  }
</style>
@endsection
@section('content')
@php
  // Get the currently logged-in user
  $user = auth()->user();
  if ($user) {
    $cartItems = $user->cart;
    $totalItems = 0;
    $totalPrice = 0.0;
    $totalWeight = 0.0;
    foreach ($cartItems as $cartItem) {
    $itemData = json_decode($cartItem->item);
    $totalItems += $itemData->totalQty;
    $totalPrice += $itemData->totalPrice;
    $totalWeight += $itemData->totalWeight;
    }
  }
@endphp
<script src="https://js.stripe.com/v3/"></script>
<main id="main" class="main">
  <section class="section dashboard">
    <div class="container mx-auto my-5">
      <div class="p-4 pt-0">
        <h3>Your Basket {{count(auth()->user()->cart) < 1 ? "is Empty" : ""}}</h3>
      </div>
      @if(count(auth()->user()->cart) > 0)
      <div class="row">
      <div class="col-md-8 ">
        <div class="row">
        @foreach ($cartItems as $cartItem)
        @php
        $itemData = json_decode($cartItem->item);
        $courierServiceData = getCourierServiceData($itemData->service->service_id, true);
    @endphp
        <div class="col-12 cart-item" style="position:relative" data-cart-id="{{$cartItem->id}}">
          <div class="w-full d-flex" style="position:absolute;top:-5px;right:5px;z-index:99">
          <button class="ms-auto btn btn-danger btn-sm rounded-circle cart-delete-btn"
          data-cart-id="{{ $cartItem->id }}">
          <iconify-icon icon="mingcute:delete-3-fill"></iconify-icon>
          </button>
          </div>
          <div class="card shadow-sm rounded-4 border">
          @if(isset($cartItem->message))
        <div class="col-12 alert alert-danger">{{ $cartItem->message }}323</div>
      @endif
          <div class="d-flex align-items-center align-content-center justify-content-between">
          <div class="col-sm-3 border-end p-3 d-flex flex-wrap align-items-center justify-content-center">
          <img class="img-fluid rounded " src="{{ getImage($itemData->courier_name)['logo'] }}"
            alt="Courier Image">
          <b class="card-text text-center mt-2 w-full">{{ $itemData->service->Name }}</b>
          </div>
          <div class="col-sm-9 px-2 py-3 d-flex justify-content-between align-items-start flex-wrap ">
          <div>
            <div class="d-flex align-items-center gap-1">
            <iconify-icon width="22" icon="mdi:location"></iconify-icon>
            <h5 class="card-title">{{ $itemData->shipment->ship_from->postcode1 }}</h5>
            </div>
            <div class="ms-2 py-3 border-start border-4 border-primary">
            <div class="d-flex align-items-center form_main_wrap">
            <div class="expected_wrap">
            @if(isset($courierServiceData['start_date']))
        <div class="d-flex align-items-center bg-primary text-white ms-2 rounded-pill p-1 px-2">
          <iconify-icon style="margin-top:1px" icon="mingcute:time-line"></iconify-icon>
          <small class="ms-1">{{ $courierServiceData['exp_lead_time'] }} Delivery</small>
        </div>
      @endif
            </div>
            </div>
            </div>
            <div class="d-flex align-items-center gap-1">
            <iconify-icon width="22" icon="mdi:location"></iconify-icon>
            <h5 class="card-title">{{ $itemData->shipment->ship_to->postcode }}</h5>
            </div>
          </div>
          <div class="pe-2 pt-2">
            <p class="w-full text-end">Items: {{ $itemData->totalQty }}</p>
            <p class="w-full text-end">Weight: {{ $itemData->totalWeight }}</p>
            <p class="w-full text-end text-primary fw-bold">Total: £ {{ $itemData->totalPrice }}</p>
          </div>
          </div>
          </div>
          </div>
        </div>
    @endforeach
        </div>
      </div>
      <div class="col-md-4">
        <div class="col-12 card shadow-sm rounded-4 border">
        <div class="card-body">
          <h5 class="card-title mb-4">Order Summary</h5>
          <!-- Order summary details -->
          <div class="order-summary">
          <div class="row mb-3">
            <div class="col-sm-6">Items:</div>
            <div class="col-sm-6 text-end">{{ $totalItems }}</div>
          </div>
          <div class="row mb-3">
            <div class="col-sm-6">Weight:</div>
            <div class="col-sm-6 text-end">{{ $totalWeight }}</div>
          </div>
          <div class="row mb-3">
            <div class="col-sm-6">Total:</div>
            <div class="col-sm-6 text-end">£ {{ $totalPrice }}</div>
          </div>
          </div>
          <!-- Checkout/payment options -->
          <div class="checkout-options mt-4">
          <h5 class="card-title mb-3">Payment Options </h5>
          <form id="payment-form" data-secret="{{ env("STRIPE_KEY") }}">
            <div id="payment-element">
            <!-- placeholder for Elements -->
            </div>
            <div id="error-message" class="text-danger">
            <!-- Display error message to your customers here -->
            </div>
            <div class="text-end mt-4 d-flex">
            <button type="submit" id="submit" class="mx-auto order bg-primary">
              <span class="default bg-primary">Complete Order</span>
              <span class="success">
              Order Placed
              <svg viewbox="0 0 12 10">
                <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
              </svg>
              </span>
              <div class="box"></div>
              <div class="truck">
              <div class="back"></div>
              <div class="front">
                <div class="window"></div>
              </div>
              <div class="light top"></div>
              <div class="light bottom"></div>
              </div>
              <div class="lines"></div>
            </button>
            <!-- <button  class="btn btn-primary mx-auto">Proceed Payment</button> -->
            </div>
            <div class='my-3 text-center'>
            <h4>OR</h4>
            </div>
            <div class="text-end mt-4 d-flex">
            <button type="button" id="wallet" class="mx-auto order bg-primary">
              <span class="default bg-primary">Pay with wallet</span>
              <span class="success">
              Order Placed
              <svg viewbox="0 0 12 10">
                <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
              </svg>
              </span>
              <div class="box"></div>
              <div class="truck">
              <div class="back"></div>
              <div class="front">
                <div class="window"></div>
              </div>
              <div class="light top"></div>
              <div class="light bottom"></div>
              </div>
              <div class="lines"></div>
            </button>
            <!-- <button  class="btn btn-primary mx-auto">Proceed Payment</button> -->
            </div>
          </form>
          @if(auth()->user()->hasPermissionTo('noPay'))
        <div class='my-3 text-center'>
        <h4>OR</h4>
        </div>
        <div class="text-end mt-4 d-flex">
        <button type="button" id="noPay" class="mx-auto order bg-primary">
        <span class="default bg-primary">Order Without Pay</span>
        <span class="success">
          Order Placed
          <svg viewbox="0 0 12 10">
          <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
          </svg>
        </span>
        <div class="box"></div>
        <div class="truck">
          <div class="back"></div>
          <div class="front">
          <div class="window"></div>
          </div>
          <div class="light top"></div>
          <div class="light bottom"></div>
        </div>
        <div class="lines"></div>
        </button>
        </div>
        @role('Administrator')
        <div class="text-end mt-4 d-flex">
        <button type="button" id="invoicePay" class="mx-auto order bg-primary">
        <span class="default bg-primary">Invoice Pay</span>
        <span class="success">
          Order Placed
          <svg viewbox="0 0 12 10">
          <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
          </svg>
        </span>
        <div class="box"></div>
        <div class="truck">
          <div class="back"></div>
          <div class="front">
          <div class="window"></div>
          </div>
          <div class="light top"></div>
          <div class="light bottom"></div>
        </div>
        <div class="lines"></div>
        </button>
        </div>
        @endrole
      @endif
          </div>
          <!-- Checkout button -->
        </div>
        </div>
      </div>
      </div>
    @endif
    </div>
  </section>
</main>
<!-- Modal for confirmation -->
<div class="modal fade" id="deleteConfirmationModal" tabindex="-1" aria-labelledby="deleteConfirmationModalLabel"
  aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteConfirmationModalLabel">Confirm Deletion</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Are you sure you want to delete this item from your cart?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" id="confirmDelete">Delete</button>
      </div>
    </div>
  </div>
</div>
@endsection
@section('script')
<script>
  $(document).ready(function () {
    $('.cart-delete-btn').click(function () {
      // Get the cart item ID
      var cartItemId = $(this).data('cart-id');
      // Set the data attribute of the delete button in the modal to the cart item ID
      $('#confirmDelete').data('cart-id', cartItemId);
      // Show the confirmation modal
      $('#deleteConfirmationModal').modal('show');
    });

    // When the user confirms deletion
    $('#confirmDelete').click(function () {
      // Get the cart item ID from the delete button's data attribute
      var cartItemId = $(this).data('cart-id');
      // Make an AJAX request to delete the cart item
      $.ajax({
        url: '/cart/remove/' + cartItemId,
        type: 'DELETE',
        success: function (response) {
          // Animate and remove the deleted cart item from the frontend
          //                 $('.cart-item[data-cart-id="' + cartItemId + '"]').fadeOut(400, function() {
          //     $(this).remove();
          // });

          window.location.href = "/cart";

        },
        error: function (xhr, status, error) {
          // Handle error if deletion fails
          console.error(xhr.responseText);
        }
      });
      // Hide the confirmation modal
      $('#deleteConfirmationModal').modal('hide');
    });
  });

  // Create an instance of Stripepk_
  var stripe = Stripe('{{ env("STRIPE_KEY") }}');
  const elements = stripe.elements({
    clientSecret: '{{ $clientSecret }}',
  });

  function showLabelsModal(response) {
    console.log('lables', response.labels)
    const allIds = response.labels.map(label => label.id);


    if (allIds.length > 0) {

      location.href = '/bookings/' + allIds
    } else {
      alert('No lables generated.')
    }


    return;
    console.log('Label', response);
    var html = '<div class="modal-dialog" role="document">';
    html += '<div class="modal-content">';
    html += '<div class="modal-header">';
    html += '<h5 class="modal-title">Labels Generated</h5>';

    html += '</div>';
    html += '<div class="modal-body">';
    response.labels.forEach(function (label) {
      html += '<a href="/' + label.uri + '" target="_blank" class="text-white col-12 mx-auto my-2 btn btn-primary">Label - ' + label.display_name + '</a>';
    });
    html += '</div>';
    html += '</div>';
    html += '</div>';

    $('#labelsModal').remove();
    $('body').append('<div class="modal fade" id="labelsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">' + html + '</div>');

    // Show the modal
    $('#labelsModal').modal('show');
  }


  // Create and mount the Payment Element
  const paymentElement = elements.create('payment');
  paymentElement.mount('#payment-element');
  const form = document.getElementById('payment-form');
  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    let button = $('.order');
    let animationComplete = false;
    let labelsReceived = false;
    let labelsResponse = null; // Variable to store labels response

    if (!button.hasClass('animate')) {
      button.addClass('animate');
      setTimeout(() => {
        button.removeClass('animate');
        animationComplete = true;
        if (labelsReceived) {
          showLabelsModal(labelsResponse); // Pass labels response to function
        }
      }, 8000);
    }

    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: '{{env('APP_URL')}}quotes/quote/generate-label/no/{{$orderId}}',
      },
      redirect: "if_required",
    });

    if (error) {
      const messageContainer = document.querySelector('#error-message');
      messageContainer.textContent = error.message;

      button.removeClass('animate');
    } else {
      $.ajax({
        url: '{{env('APP_URL')}}quotes/quote/generate-label/no/{{$orderId}}',
        type: 'GET',
        success: function (response) {
          if (response.labels.length > 0) {
            labelsReceived = true;
            labelsResponse = response; // Store labels response
            if (animationComplete) {
              showLabelsModal(labelsResponse); // Pass labels response to function
            }
          } else {
            alert('No labels were generated.');
          }
        },
        error: function (xhr, status, error) {
          alert('Error: ' + error);
        }
      });

      const checkAnimation = setInterval(() => {
        if (animationComplete) {
          clearInterval(checkAnimation);
          if (labelsReceived) {
            showLabelsModal(labelsResponse); // Pass labels response to function
          }
        }
      }, 100);
    }

  });

  $('#noPay').click(() => {
    let button = $('#noPay');
    let animationComplete = false;
    let labelsReceived = false;
    let labelsResponse = null; // Variable to store labels response

    if (!button.hasClass('animate')) {
      button.addClass('animate');
      setTimeout(() => {
        button.removeClass('animate');
        animationComplete = true;
        if (labelsReceived) {
          showLabelsModal(labelsResponse); // Pass labels response to function
        }
      }, 8000);
    }

    $.ajax({
      url: '{{env('APP_URL')}}quotes/quote/generate-label/yes/{{$orderId}}',
      type: 'GET',
      success: function (response) {
        if (response.labels.length > 0) {
          labelsReceived = true;
          labelsResponse = response; // Store labels response
          if (animationComplete) {
            showLabelsModal(labelsResponse); // Pass labels response to function
          }
        } else {
          alert('No labels were generated.');
        }
      },
      error: function (xhr, status, error) {
        alert('Error: ' + error);
      }
    });

    const checkAnimation = setInterval(() => {
      if (animationComplete) {
        clearInterval(checkAnimation);
        if (labelsReceived) {
          showLabelsModal(labelsResponse); // Pass labels response to function
        }
      }
    }, 100);
  });

  $('#wallet').click(() => {
    let button = $('#wallet');
    let animationComplete = false;
    let labelsReceived = false;
    let labelsResponse = null; // Variable to store labels response

    if (!button.hasClass('animate')) {
      button.addClass('animate');
      setTimeout(() => {
        button.removeClass('animate');
        animationComplete = true;
        if (labelsReceived) {
          showLabelsModal(labelsResponse); // Pass labels response to function
        }
      }, 8000);
    }

    $.ajax({
      url: '{{env('APP_URL')}}quotes/quote/generate-label/wallet/{{$orderId}}',
      type: 'GET',
      success: function (response) {
        if (response.labels.length > 0) {
          labelsReceived = true;
          labelsResponse = response; // Store labels response
          if (animationComplete) {
            showLabelsModal(labelsResponse); // Pass labels response to function
          }
        } else {
          alert('No labels were generated.');
        }
      },
      error: function (xhr, status, error) {
        console.log("Error", error);
        alert('Error: ' + "Make sure you have enough balance in your wallet");
      }
    });

    const checkAnimation = setInterval(() => {
      if (animationComplete) {
        clearInterval(checkAnimation);
        if (labelsReceived) {
          showLabelsModal(labelsResponse); // Pass labels response to function
        }
      }
    }, 100);
  });

  $('#invoicePay').click(() => {
    let button = $('#invoicePay');
    let animationComplete = false;
    let labelsReceived = false;
    let labelsResponse = null; // Variable to store labels response

    if (!button.hasClass('animate')) {
      button.addClass('animate');
      setTimeout(() => {
        button.removeClass('animate');
        animationComplete = true;
        if (labelsReceived) {
          showLabelsModal(labelsResponse); // Pass labels response to function
        }
      }, 8000);
    }

    $.ajax({
      url: '{{env('APP_URL')}}quotes/quote/generate-label/invoice/{{$orderId}}',
      type: 'GET',
      success: function (response) {
        if (response.labels.length > 0) {
          labelsReceived = true;
          labelsResponse = response; // Store labels response
          if (animationComplete) {
            showLabelsModal(labelsResponse); // Pass labels response to function
          }
        } else {
          alert('No labels were generated.');
        }
      },
      error: function (xhr, status, error) {
        alert('Error: ' + error);
      }
    });

    const checkAnimation = setInterval(() => {
      if (animationComplete) {
        clearInterval(checkAnimation);
        if (labelsReceived) {
          showLabelsModal(labelsResponse); // Pass labels response to function
        }
      }
    }, 100);
  });


</script>
@endsection