<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
<div class="content d-flex flex-column flex-column-fluid" id="content">
  <div class="container-xxl" id="content_container">

    <div class="card mb-8">
      <div class="card-body flex-column p-5">
        <div class="d-flex align-items-center h-lg-300px p-5 p-lg-15">
          <div class="d-flex flex-column align-items-start justift-content-center flex-equal me-5">
            <div class="d-flex flex-wrap flex-sm-nowrap">
              <div class="d-flex flex-center flex-shrink-0 bg-light rounded w-100px h-100px w-lg-150px h-lg-150px me-7 mb-4">
                <div class="d-flex justify-content-center align-items-center p-10">
                    <span class="menu-bullet">
                        <span class="fa fa-robot text-dark display-1"></span>
                    </span>
                </div>
              </div>
              <div class="flex-grow-1">
                <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                  <div class="d-flex flex-column">
                    <div class="d-flex align-items-center mb-1">
                      <a class="text-gray-800 fs-2 fw-bold me-3">Assistant Setup</a>
                    </div>
                    <div class="d-flex flex-wrap fw-semibold mb-4 fs-5 text-gray-400">Create an AI assistant that answers the phone for you when your unavailable. Click the link below to view documentation on setting up your AI assistant.</div>
                  </div>
                </div>
                <div class="d-flex flex-wrap justify-content-start">
                  <div class="d-flex flex-wrap">
                    <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-2">
                      <div class="d-flex align-items-center">
                        <a href="https://dialbunny.com/documentation" target="_blank" class="d-flex align-items-center fw-semibold fs-6 text-gray-400 link-primary">
                          <i class="fs-1 me-2">
                            <span class="fas fa-file-text"></span>
                          </i>
                          <div class="fs-4 fw-bold mb-0">Documentation</div>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-rounded bg-light d-flex flex-stack flex-wrap p-5">
          <ul class="nav flex-wrap border-transparent fw-bold">
            <li class="nav-item my-1">
              <a class="btn btn-color-gray-600 btn-active-secondary btn-active-color-primary fw-bolder fs-8 fs-lg-base nav-link px-3 px-lg-8 mx-1 text-uppercase" href="<?php echo esc_url(wp_nonce_url($dialbunnyDashboardUrl.'&dashboardpage=voiceassistant', 'DialBunny', 'user_nonce')); ?>">Voice Assistant</a>
            </li>
            <li class="nav-item my-1">
              <a class="btn btn-color-gray-600 btn-active-secondary btn-active-color-primary fw-bolder fs-8 fs-lg-base nav-link px-3 px-lg-8 mx-1 text-uppercase active" href="<?php echo esc_url(wp_nonce_url($dialbunnyDashboardUrl.'&dashboardpage=messagesassistant', 'DialBunny', 'user_nonce')); ?>">Messages Assistant</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="col-12 mb-6">
      <div class="card h-xl-100" id="kt_timeline_widget_2_card">
        <div class="card-body">
          <div class="tab-content">
            <div class="tab-pane fade active show" id="" role="tabpanel">
                <div class="card h-100 flex-center bg-light-primary border-primary border border-dashed p-8">
                    <div href="#" class="fs-5 fw-bold mb-2">Feature Coming Soon!</div>
                    <div class="fs-7 fw-semibold text-gray-500 text-center">An AI assistant that can automatically respond to text messages is a powerful new feature coming soon to DialBunny. It will help businesses engage with customers instantly, answer common questions, and provide 24/7 support, all without lifting a finger.</div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>



  </div>
</div>
