@extends('layouts/contentNavbarLayout')
@section('title', 'Dashboard - Analytics')
@section('content')
    <h4 class="py-3 mb-4"><span class="text-muted fw-light">Enquiries /</span> Manage Enquiries
    </h4>

    <hr class="my-5">
    {{-- page tab style --}}
    <div class="card text-center mb-4">
        <div class="card-header p-0">
            <ul class="nav nav-tabs layouttab" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link {{ request()->routeIs('enquiries.callnow') ? 'active' : '' }}" id="now-tab"
                        href="{{ route('enquiries.callnow') }}">
                        <i class="mdi mdi-phone-outline" aria-hidden="true"></i> Call Now
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ request()->routeIs('enquiries.calllater') ? 'active' : '' }}" id="later-tab"
                        href="{{ route('enquiries.calllater') }}">
                        <i class="mdi mdi-clock-outline" aria-hidden="true"></i> Call Later
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link {{ request()->routeIs('enquiries.sendmessage') ? 'active' : '' }}" id="semessage-tab"
                        href="{{ route('enquiries.sendmessage') }}">
                        <i class="mdi mdi-folder-settings-outline" aria-hidden="true"></i> Send Messages
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ request()->routeIs('enquiries.meeting') ? 'active' : '' }}" id="meeting-tab"
                        href="{{ route('enquiries.meeting') }}">
                        <i class="mdi mdi-account-group-outline" aria-hidden="true"></i> Schedule Meeting
                    </a>
                </li>
            </ul>
            <!-- Yield content -->
            <div class="tab-content mt-4" id="tabContent2">
                @yield('tab_content2')
            </div>
        </div>
    </div>
    {{-- /end page tab style --}}
    {{--    <script>
        document.addEventListener('DOMContentLoaded', function() {
            setInterval(function() {
                $.ajax({
                    url: "{{ url('/enquiries/new-count') }}",
                    method: "GET",
                    success: function(response) {
                        // Call Now Tab
                        $('#now-tab').html(`
                          <div style="text-align: center;">
                              <span class="badge bg-label-success rounded-pill" style="display: block; margin-bottom: 5px;">
                                  ${response.callNowCount} New
                              </span>

                              <i class="mdi mdi-phone-outline" aria-hidden="true"></i>
                              Call Now
                          </div>
                      `);

                        // Call Later Tab
                        $('#later-tab').html(`
                          <div style="text-align: center;">
                              <span class="badge bg-label-success rounded-pill" style="display: block; margin-bottom: 5px;">
                                  ${response.callLaterCount} New
                              </span>
                              <i class="mdi mdi-clock-outline" aria-hidden="true"></i>
                              Call Later
                          </div>
                      `);

                        // Send Messages Tab
                        $('#semessage-tab').html(`
                          <div style="text-align: center;">
                              <span class="badge bg-label-success rounded-pill" style="display: block; margin-bottom: 5px;">
                                  ${response.sendMessageCount} New
                              </span>
                              <i class="mdi mdi-folder-settings-outline" aria-hidden="true"></i>
                              Send Messages
                          </div>
                      `);

                        // Schedule Meeting Tab
                        $('#meeting-tab').html(`
                          <div style="text-align: center;">
                              <span class="badge bg-label-success rounded-pill" style="display: block; margin-bottom: 5px;">
                                  ${response.meetingCount} New
                              </span>
                              <i class="mdi mdi-account-group-outline" aria-hidden="true"></i>
                              Schedule Meeting
                          </div>
                      `);
                    }
                });
            }, 5000); // Poll every 5 seconds
        });
    </script> --}}
    <!-- jQuery to handle tab click and load content dynamically -->

@endsection