@extends('front.inner-layout.app')
@section('content')
<div class="page-content dashboard-wrapper mdashboard-wrapper clientd-wrapper">
   <div class="row align-items-center">
      <div class="col-lg-4 col-md-4 col-sm-4">
         <h1 class="page-title eagle-font font-400"><span class="arca-font">My</span> Setup Wizard</h1>
      </div>
     @include('front.inner-layout.header')
   </div>
   <div class="brdr-bttm"></div>
   
   <div class="mysetupwizard-wrapper customscroll">
   <div class="mCustomScrollbar">

         <div class="whitecard">
        
         <p class="mysetupwizardtext">
         In order to customise your account, we need just a few more details from you. You can return to the setup wizard at any time to complete any skipped steps or you can adjust all of these settings via your My Settings tab.
         </p>  
         <div class="step-titletext">
            <h2>Step 1. My details</h2>
            <p class="mb-30">Lets start by entering your business details including your trading hours so we can customize your calender.</p>
            <button class="btn-fill">Let's go</button>
         </div> 
         <!-- <div class="step-titletext step-titletext-gray">
            <h2>Step 2. My details 2</h2>
            <p class="mb-30">Lets start by entering your business details including your trading hours so we can customize your calender.</p>
            <button class="btn-fill">Let's go</button>
         </div>  -->
         <div class="step-titletext step-titletext-gray">
            <h2>Step 2. Services</h2>
            <p class="mb-30">Now let’s set up your services. Here you can customise the services you offer, set their duration, colour code them for easy recognition and more.</p>
            <button class="btn-fill">Set up my services</button>
         </div>  
         <div class="step-titletext step-titletext-gray">
            <h2>Step 3. Products</h2>
            <p class="mb-30">Do you sell products? Add them here to get notifications when stock levels are low and specify if clients can re-order prescribed products (must be signed up to payment gateway).</p>
            <button class="btn-fill">Set up my products</button>
            <button class="btn-fill step-gray-btn">Skip</button>
         </div> 
         <div class="step-titletext step-titletext-gray">
            <h2>Step 4. Reminder messages</h2>
            <p class="mb-30">Customise the wording and timing of your clients appointment reminders.</p>
            <button class="btn-fill">Customise</button>
            <button class="btn-fill step-gray-btn">Skip</button>
         </div> 
         <div class="step-titletext step-titletext-gray">
            <h2>Step 5. Online bookings</h2>
            <p class="mb-30">Would you like your clients to be able to book their own appointments online? Adjust your settings here. </p>
            <button class="btn-fill">Customise</button>
            <button class="btn-fill step-gray-btn">Skip</button>
         </div> 
         <div class="step-titletext step-titletext-gray">
            <h2>Step 6. Video Consultations</h2>
            <p class="mb-30">Do you consult online? Link your services for access to one click video consultations</p>
            <button class="btn-fill">Customise</button>
            <button class="btn-fill step-gray-btn">Skip</button>
         </div> 
         <div class="step-titletext step-titletext-gray">
            <h2>Step 7. Invoices</h2>
            <p class="mb-30">Here you can customise your invoices. </p>
            <button class="btn-fill">Customise</button>
            <button class="btn-fill step-gray-btn">Skip</button>
         </div>
         <div class="step-titletext step-titletext-gray">
            <h2>Step 8. Intake form</h2>
            <p class="mb-30">Want to reduce your data entry? Set up an online intake form which will can be automatically sent to all new clients when booking an appointment. All data provided will automatically be added to your clients file. </p>
            <button class="btn-fill">Customise</button>
            <button class="btn-fill step-gray-btn">Skip</button>
         </div> 
         <div class="step-titletext step-titletext-gray">
            <h2>Step 9. Medipass account</h2>
            <p class="mb-30">Save up to 5 minutes per transaction with an integrated Medipass account. With the click of a few buttons, you can quickly and easily process Hicaps, Medicare, DVA, and WorkCover NSW payments. No set up costs, no terminal required and no monthly fees. If you already have a Medipass API key, you can enter it below.</p>
            <div class="inputtext-linkarea mb-20">
               <div class="row">
               <div class="col-lg-6 col-md-6">
               <div class="form-group">
                  <input type="text" class="form-control" placeholder="API key">
               </div>
               <p>Don't have an account? <span><a href="#" class="text-green">Apply for one now.</a></span></p>
               </div>
               </div>
            </div>
            <button class="btn-fill">Save</button>
            <button class="btn-fill step-gray-btn">Skip</button>
         </div> 
         <div class="step-titletext step-titletext-gray">
            <h2>Step 10. Embed code</h2>
            <p class="mb-30">Want your clients to be able to book online via your website or other platforms? All you need to do is copy and paste this link.</p>
            <div class="textarea-box">
               <div class="form-group">
                  <textarea class="form-control">
                  <iframe width="560" height="315" src="https://www.myappointments.co/embed/owsfdh4gxyc" frameborder="0" allowfullscreen></iframe>
                  </textarea>
               </div>
            </div>
            <button class="btn-fill" data-toggle="modal" data-target="#invoicefilterpopModal">Done</button>
         </div> 
         </div> 
   </div>
   </div>

   <!--- Set Up complete Popup S ---->
   <div class="cilent-popup invoicefilterpop setup-completepop">
      <div class="modal fade " style="display: block;opacity: 1;" id="invoicefilterpopModal" role="dialog">
         <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
               <div class="modal-header">
                <button type="button" class="close bttn-close p-0" data-dismiss="modal">
                     <img src="{{asset("assets/images/close-img.png")}}" alt="">
                  </button>
               </div>
               <div class="modal-body">
                  <div class="setuptext-area">
                  <h4 >Setup complete!</h4>
                     <div class="hand-img">
                     <!-- <img src="{{asset("assets/images/hand-img.png")}}" alt=""> -->
                     <img src="{{asset("assets/images/clapping-hands.svg")}}" alt="" style="max-height: 61px;">

                     </div>
                     <p>You can return to the setup wizard at any time to complete any skipped steps or you can adjust all of these settings via your My Settings tab.</p>
                  </div>
               </div>
               <div class="modal-footer">
                  <button type="button" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-30 mb-0 w-100">Take me to my calender</button>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!--- Set Up complete Popup E ---->
  
@endsection

@section('css')

@endsection

@section('js')

   
@endsection