@extends('backend.layouts.app')

@section('content')
<div class="app-main__inner">
    <div class="app-page-title">
        <div class="page-title-wrapper">

             @if (session('message'))
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        showToast("{!! session('message') !!}", "{{ session('class') }}");
                    });
                </script>
            @endif
            
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="pe-7s-mail icon-gradient bg-tempting-azure"></i>
                </div>
                <div>Email Activity
                    <div class="page-title-subheading"></div>
                </div>
            </div>
            <div class="page-title-actions">
                <div class="d-inline-block dropdown">
                    <button type="button" class="btn-shadow  btn btn-prodriver">
                        <span class="btn-icon-wrapper pr-2 opacity-7">
                            <i class="fa fa-plus fa-w-20"></i>
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
      <div class="col-md-12">
         <div class="main-card mb-3 card">
            <div class="card-body">
               <div class="card-title">Email Templates</div>
               <button type="button" class="btn mr-2 mb-2 btn-primary" data-toggle="modal" data-target=".view-email-modal-lg">View Welcome Email</button>
               <button type="button" class="btn mr-2 mb-2 btn-primary" data-toggle="modal" data-target=".view-reminder-email-modal-lg">View Reminder 1 Email</button>
               <button type="button" class="btn mr-2 mb-2 btn-primary" data-toggle="modal" data-target=".view-reminder-two-email-modal-lg">View Reminder 2 Email</button>
               <button type="button" class="btn mr-2 mb-2 btn-primary" data-toggle="modal" data-target=".view-expire-email-modal-lg">View Expiration Email</button>
               <button type="button" class="btn mr-2 mb-2 btn-primary" data-toggle="modal" data-target=".view-certi-email-modal-lg">View Certification Email</button>
            </div>
         </div>
         <ul class="body-tabs body-tabs-layout tabs-animated body-tabs-animated nav">
           <li class="nav-item">
              <a role="tab" class="nav-link active" id="tab-0" data-toggle="tab" href="#tab-content-0" aria-selected="true">
              <span>Welcome Emails</span>
              </a>
           </li>
           <li class="nav-item">
              <a role="tab" class="nav-link" id="tab-1" data-toggle="tab" href="#tab-content-1" aria-selected="false">
              <span>Reminder Emails (1 & 2)</span>
              </a>
           </li>
           <li class="nav-item">
              <a role="tab" class="nav-link" id="tab-2" data-toggle="tab" href="#tab-content-2" aria-selected="false">
              <span>Expiration Emails</span>
              </a>
           </li>
           <li class="nav-item">
              <a role="tab" class="nav-link" id="tab-2" data-toggle="tab" href="#tab-content-3" aria-selected="false">
              <span>Certification Emails</span>
              </a>
           </li>
           <li class="nav-item">
              <a role="tab" class="nav-link" id="tab-2" data-toggle="tab" href="#tab-content-4" aria-selected="false">
              <span>Certification Queue</span>
              </a>
           </li>
        </ul>
      </div>
   </div>
    <div class="main-card mb-3 card">
        <div class="card-body">
            <div class="tab-content">
               <div class="tab-pane tabs-animation fade active show" id="tab-content-0" role="tabpanel">
                  <div class="">
                     <table style="width: 100%;" id="example" class="table table-hover table-striped table-bordered  dtr-inline collapsed">
                         <thead>
                             <tr>
                                 <th>Student</th>
                                 <th>Subject</th>
                                 <th>Date</th>
                             </tr>
                         </thead>
                         <tbody>
        
                         </tbody>
                     </table>
                  </div>
               </div>
               <div class="tab-pane tabs-animation fade" id="tab-content-1" role="tabpanel">
                  <div class="">
                     <table style="width: 100%;"  class="table table-hover table-striped table-bordered  dtr-inline collapsed">
                         <thead>
                             <tr>
                                 <th>Student</th>
                                 <th>Subject</th>
                                 <th>Date/Time</th>
                             </tr>
                         </thead>
                         <tbody>
        
                         </tbody>
                     </table>
                  </div>
               </div>
               <div class="tab-pane tabs-animation fade" id="tab-content-2" role="tabpanel">
                  <div class="">
                     <table style="width: 100%;"  class="table table-hover table-striped table-bordered  dtr-inline collapsed">
                         <thead>
                             <tr>
                                 <th>Student</th>
                                 <th>Subject</th>
                                 <th>Date/Time</th>
                             </tr>
                         </thead>
                         <tbody>
        
                         </tbody>
                     </table>
                  </div>
               </div>
               <div class="tab-pane tabs-animation fade" id="tab-content-3" role="tabpanel">
                  <div class="">
                     <table style="width: 100%;"  class="table table-hover table-striped table-bordered  dtr-inline collapsed">
                         <thead>
                             <tr>
                                 <th>Student</th>
                                 <th>Subject</th>
                                 <th>Date/Time</th>
                             </tr>
                         </thead>
                         <tbody>
        
                         </tbody>
                     </table>
                  </div>
               </div>
               <div class="tab-pane tabs-animation fade" id="tab-content-4" role="tabpanel">
                  <div class="">
                     <table style="width: 100%;"  class="table table-hover table-striped table-bordered  dtr-inline collapsed">
                         <thead>
                             <tr>
                                 <th>Student</th>
                                 <th>Subject</th>
                                 <th>Date/Time</th>
                             </tr>
                         </thead>
                         <tbody>
        
                         </tbody>
                     </table>
                  </div>
               </div>
            </div>
        </div>
    </div>
</div>
@endsection
<div class="modal fade view-email-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Welcome Email</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
            </button>
         </div>
         <div class="modal-body">
            <p>Hello {student name},<br><br>
               Thank you for registering with us for drivers training.
               <br><br>
               Your account with us has been created. you must now confirm your email address and create a password to complete the setup process. 
               <br><br>
               Go to the link below to verify your account.<br><br>
               {confirmation_link}<br><br>
               We will be communicating with you at this email address throughout the course. It is important that we have your correct details on file.<br><br>
               We look forward to seeing you for your training,<br><br>
            </p>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>
<div class="modal fade view-reminder-email-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Reminder 1 Email</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
            </button>
         </div>
         <div class="modal-body">
           <p align="center"><b>Sent after a student has not been certified within 9 months.</b><br>
              Variables will be automatically replaced with their respective values
           </p>
           <hr>
           ProDrivers Training Reminder<br><br>Hello {student name},
           <br><br> 
           This is a reminder to complete your course with us. If you do not finish your in-car lessons by {date here}, your lessons will expire and you will need to re-take the course. As per MTO requirement all students are required to complete the course within a year from commenced date. 
           <br><br> 
           Please contact your driving instructor or us at info@myprodrivers.ca or by phone at: 519-267-8838 
           <br><br> 
           We look forward to hearing from you, 
           <br>      
        </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>
<div class="modal fade view-reminder-two-email-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Reminder 1 Email</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
            </button>
         </div>
         <div class="modal-body">
           <p align="center"><b>Sent after a student has not been certified within 11 months.</b><br>
              Variables will be automatically replaced with their respective values
           </p>
           <hr>
           ProDrivers Training Reminder<br><br>Hello {student name},
           <br><br> 
           This is a reminder to complete your course with us. If you do not finish your in-car lessons by {date here}, your lessons will expire and you will need to re-take the course. As per MTO requirement all students are required to complete the course within a year from commenced date. 
           <br><br> 
           Please contact your driving instructor or us at info@myprodrivers.ca or by phone at: 519-267-8838 
           <br><br> 
           We look forward to hearing from you, 
           <br>    
        </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>
<div class="modal fade view-expire-email-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Expiration Email</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
            </button>
         </div>
         <div class="modal-body">
           <p align="center"><b>Sent after a student has not been certified within 1 year.</b><br>
              Variables will be automatically replaced with their respective values
           </p>
           <hr>
           Your ProDrivers Account Has Expired..<br><br>Hello {student name},<br><br> 
           Unfortunately you have not completed our course within the allotted 1 year time frame and your account has expired. As per MTO requirement you will need to re-take the course in order to become certified. 
           <br><br>
           Please get in contact with us at info@myprodrivers.ca or by phone at: 519-267-8838 
           <br><br>
           We look forward to hearing from you, 
           <br>    	
        </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>
<div class="modal fade view-certi-email-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Expiration Email</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
            </button>
         </div>
         <div class="modal-body">
           <p align="center"><b>Sent after a student has been succesfully certified.</b><br>
              Variables will be automatically replaced with their respective values
           </p>
           <hr>
           Your Certification at Pro Drivers<br><br>Hello {student name}, <br><br> 
           Congratulations on successfully completing our driver training course. You have been certified and are now able to obtain your certificate through the Ministry of Transportation.  <br><br> 
           We have attached a copy of your ProDrivers certificate for your personal records. Please note: this certificate is for your records only and is not suitable for Insurance purposes. <br><br>
           For Insurance purposes, the MTO indicates you must obtain in person, a paper copy at any (Service Ontario) office. Ask for your (DLH) record or (Drivers Licence History).<br><br> 
           You can book a road test at: www.drivetest.ca/book-a-road-test <br><br> 
           Thank you,<br><br>  
           Management of Pro Drivers   
           <br><br>
           <p style="background:yellow;width:fit-content;">(This email is sent along with an attachment of the students ProDrivers certificate.)</p>
        </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>