<?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="row g-5 g-xl-8">
      <div class="col-xl-4">
        <div class="card card-xl-stretch mb-xl-8">
          <div class="card-header border-0 pt-5">
            <h3 class="card-title align-items-start flex-column">
              <span class="card-label fw-bold text-gray-900">Outbound Calls</span>
              <span class="text-muted mt-1 fw-semibold fs-7">You can easily make calls from the Copuloo plugin using the Keypad tab or by directly making a call from a saved contact.</span>
            </h3>
          </div>
          <div class="card-body pt-5">
            <div class="d-flex align-items-center mb-7">
              <div class="symbol symbol-50px me-5">
                <span class="symbol-label bg-light-primary">
                  <i class="fs-2x text-primary">
                    <span class="fas fa-phone-volume"></span>
                  </i>
                </span>
              </div>
              <div class="d-flex flex-column">
                <a class="text-gray-900  fs-6 fw-bold">Making Calls</a>
                <span class="text-muted fw-bold">With the Copuloo plugin, you can make calls directly from the Keypad page, just like using a traditional phone. Simply enter the number you want to call and press the call button. However if you added a phone number manually, make sure to double check that Twilio offers outbound call functionality for the desired country.</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4">
        <div class="card card-xl-stretch mb-8">
          <div class="card-header border-0 pt-5">
            <h3 class="card-title align-items-start flex-column">
              <span class="card-label fw-bold text-gray-900">Inbound Calls</span>
              <span class="text-muted mt-1 fw-semibold fs-7">When handling inbound calls you can easily answer the call from your browser or route the call to a number of your choosing.</span>
            </h3>
          </div>
          <div class="card-body pt-5">
            <div class="d-flex align-items-center mb-7">
              <div class="symbol symbol-50px me-5">
                <span class="symbol-label bg-light-primary">
                  <i class="fs-2x text-primary">
                    <span class="fas fa-phone"></span>
                  </i>
                </span>
              </div>
              <div class="d-flex flex-column">
                <a class="text-gray-900  fs-6 fw-bold">Answer The Phone</a>
                <span class="text-muted fw-bold">A popup will appear inside the Copuloo plugin prompting you to either answer the phone or reject the call.</span>
              </div>
            </div>
            <div class="d-flex align-items-center mb-7">
              <div class="symbol symbol-50px me-5">
                <span class="symbol-label bg-light-primary">
                  <i class="fs-2x text-primary">
                    <span class="fas fa-share"></span>
                  </i>
                </span>
              </div>
              <div class="d-flex flex-column">
                <a class="text-gray-900  fs-6 fw-bold">Forward Calls</a>
                <span class="text-muted fw-bold">You can add up to three phone numbers where all calls will be routed to, when one number leads to no answer the call will be routed to the next.</span>
              </div>
            </div>
            <div class="d-flex align-items-center mb-7">
              <div class="symbol symbol-50px me-5">
                <span class="symbol-label bg-light-primary">
                  <i class="fs-2x text-primary">
                    <span class="fas fa-lock"></span>
                  </i>
                </span>
              </div>
              <div class="d-flex flex-column">
                <a class="text-gray-900  fs-6 fw-bold">Remain Private</a>
                <span class="text-muted fw-bold">When someone calls your Copuloo phone number, they will only be able to see the identity of that number. However on the receiving end, you will be able to see the identity of the caller.</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4">
        <div class="card card-xl-stretch mb-xl-8">
          <div class="card-header border-0 pt-5">
            <h3 class="card-title align-items-start flex-column">
              <span class="card-label fw-bold text-gray-900">Automated Responses</span>
              <span class="text-muted mt-1 fw-semibold fs-7">After someone dials your Copuloo phone number the custom automated responses will begin.</span>
            </h3>
          </div>
          <div class="card-body pt-5">
            <div class="d-flex align-items-center mb-7">
              <div class="symbol symbol-50px me-5">
                <span class="symbol-label bg-light-primary">
                  <i class="fs-2x text-primary">
                    <span class="fas fa-commenting"></span>
                  </i>
                </span>
              </div>
              <div class="d-flex flex-column">
                <a class="text-gray-900  fs-6 fw-bold">Welcome Message</a>
                <span class="text-muted fw-bold">Setup a custom welcome message that plays immediately.</span>
              </div>
            </div>
            <div class="d-flex align-items-center mb-7">
              <div class="symbol symbol-50px me-5">
                <span class="symbol-label bg-light-primary">
                  <i class="fs-2x text-primary">
                    <span class="fas fa-commenting"></span>
                  </i>
                </span>
              </div>
              <div class="d-flex flex-column">
                <a class="text-gray-900  fs-6 fw-bold">Busy Message</a>
                <span class="text-muted fw-bold">Setup a custom message that plays when nobody can answer the phone.</span>
              </div>
            </div>
            <div class="d-flex align-items-center">
              <div class="symbol symbol-50px me-5">
                <span class="symbol-label bg-light-primary">
                  <i class="fs-2x text-primary">
                    <span class="fas fa-commenting"></span>
                  </i>
                </span>
              </div>
              <div class="d-flex flex-column">
                <a class="text-gray-900  fs-6 fw-bold">Outside Work Hours</a>
                <span class="text-muted fw-bold">Setup a custom message that plays when someone tries calling outside of your set business hours.</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4">
        <div class="card card-xl-stretch mb-8">
          <div class="card-header border-0 pt-5">
            <h3 class="card-title align-items-start flex-column">
              <span class="card-label fw-bold text-gray-900">Inbound Texts</span>
              <span class="text-muted mt-1 fw-semibold fs-7">Receive texts right from the Copuloo plugin.</span>
            </h3>
          </div>
          <div class="card-body pt-5">
            <div class="d-flex align-items-center mb-7">
              <div class="symbol symbol-50px me-5">
                <span class="symbol-label bg-light-primary">
                  <i class="fs-2x text-primary">
                    <span class="fas fa-comment"></span>
                  </i>
                </span>
              </div>
              <div class="d-flex flex-column">
                <a class="text-gray-900  fs-6 fw-bold">Receiving Text Messages</a>
                <span class="text-muted fw-bold">With Copuloo, inbound text messages are delivered directly to your dashboard in real time. When someone sends a message to your Copuloo number, it appears instantly in the Messages section, allowing you to view, manage, and respond just like a standard SMS inbox.</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4">
        <div class="card card-xl-stretch mb-8">
          <div class="card-header border-0 pt-5">
            <h3 class="card-title align-items-start flex-column">
              <span class="card-label fw-bold text-gray-900">Outbound Texts</span>
              <span class="text-muted mt-1 fw-semibold fs-7">Send texts right from the Copuloo plugin.</span>
            </h3>
          </div>
          <div class="card-body pt-5">
            <div class="d-flex align-items-center mb-7">
              <div class="symbol symbol-50px me-5">
                <span class="symbol-label bg-light-primary">
                  <i class="fs-2x text-primary">
                    <span class="fas fa-comments"></span>
                  </i>
                </span>
              </div>
              <div class="d-flex flex-column">
                <a class="text-gray-900  fs-6 fw-bold">Replying To Text Messages</a>
                <span class="text-muted fw-bold">Replying to text messages in Copuloo is quick and effortless. Simply open the conversation from your Messages tab, type your response in the message box, and hit send. Your reply is instantly delivered through your Copuloo number, allowing you to maintain smooth and professional communication without leaving the plugin. However if you added a phone number manually, make sure to double check that Twilio offers outbound text functionality for the desired country.</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4">
        <div class="card card-xl-stretch mb-8">
          <div class="card-header border-0 pt-5">
            <h3 class="card-title align-items-start flex-column">
              <span class="card-label fw-bold text-gray-900">Timetable</span>
              <span class="text-muted mt-1 fw-semibold fs-7">Set your work schedule to prevent calls during unwanted times.</span>
            </h3>
          </div>
          <div class="card-body pt-5">
            <div class="d-flex align-items-center mb-7">
              <div class="symbol symbol-50px me-5">
                <span class="symbol-label bg-light-primary">
                  <i class="fs-2x text-primary">
                    <span class="fas fa-calendar"></span>
                  </i>
                </span>
              </div>
              <div class="d-flex flex-column">
                <a class="text-gray-900  fs-6 fw-bold">Setup Schedule</a>
                <span class="text-muted fw-bold">The Copuloo Timetable feature lets you set a custom call schedule to ensure you're only available when you want to be. By configuring your preferred days and hours, you can automatically block calls during off-hours, weekends, or breaks. This helps you maintain work-life balance and ensures you’re not disturbed during unwanted times.</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="card h-xl-100" id="timeline_widget_2_card">
        <div class="card-body">
          <div class="table-responsive">
            <div class="card border border-gray-300 border-dashed rounded p-6">
              <div class="card-header border-0 pt-15 pb-15">
                <div>
                  <div class="m-0">
                    <h4 class="fs-1 text-gray-800 w-bolder mb-6">Managing Your Copuloo Number</h4>
                    <p class="fw-semibold fs-4 text-gray-600 mb-2">Once a phone number is transfered over to your account, you may have the option to configure and customize your phone settings. This could include setting business hours, creating custom greetings, or directing calls to other specific numbers.</p>
                  </div>
                  <div class="m-0">
                    <div class="d-flex align-items-center collapsible py-3 toggle mb-0 collapsed" data-bs-toggle="collapse" data-bs-target="#job_1_1" aria-expanded="false">
                      <div class="btn btn-sm btn-icon mw-20px btn-active-color-primary me-5">
                        <i class="toggle-on text-primary fs-1">
                          <span class="fas fa-angle-down"></span>
                        </i>
                        <i class="toggle-off fs-1">
                          <span class="fas fa-angle-up"></span>
                        </i>
                      </div>
                      <h4 class="text-gray-700 fw-bold cursor-pointer mb-0">How many Copuloo numbers can I have?</h4>
                    </div>
                    <div id="job_1_1" class="fs-6 ms-1 collapse" style="">
                      <div class="mb-4">
                        <div class="d-flex align-items-center ps-10 mb-n1">
                          <span class="bullet me-3"></span>
                          <div class="text-gray-600 fw-semibold fs-6">Each WordPress user is limited to only one Copuloo managed phone number.</div>
                        </div>
                      </div>
                    </div>
                    <div class="separator separator-dashed"></div>
                  </div>
                  <div class="m-0">
                    <div class="d-flex align-items-center collapsible py-3 toggle mb-0 collapsed" data-bs-toggle="collapse" data-bs-target="#job_1_4" aria-expanded="false">
                      <div class="btn btn-sm btn-icon mw-20px btn-active-color-primary me-5">
                        <i class="toggle-on text-primary fs-1">
                          <span class="fas fa-angle-down"></span>
                        </i>
                        <i class="toggle-off fs-1">
                          <span class="fas fa-angle-up"></span>
                        </i>
                      </div>
                      <h4 class="text-gray-700 fw-bold cursor-pointer mb-0">How to remove my Copuloo number?</h4>
                    </div>
                    <div id="job_1_4" class="fs-6 ms-1 collapse" style="">
                      <div class="mb-4">
                        <div class="d-flex align-items-center ps-10 mb-n1">
                          <span class="bullet me-3"></span>
                          <div class="text-gray-600 fw-semibold fs-6">Simply click on the "release" button on your dashboard page to remove a number. This will send the number to the released numbers tab in which you can always re-request it again later.</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
