@extends('layouts/layoutMaster')

@section('title', 'Webpage Settings')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/bs-stepper/bs-stepper.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/bootstrap-select/bootstrap-select.css')}}" />

<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}">
<!-- <link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}"> -->
<!-- <link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css')}}"> -->
<link rel="stylesheet" href="{{asset('assets/vendor/libs/select2/select2.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/formvalidation/dist/css/formValidation.min.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/animate-css/animate.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/sweetalert2/sweetalert2.css')}}" />
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/bs-stepper/bs-stepper.js')}}"></script>
<script src="{{asset('assets/vendor/libs/bootstrap-select/bootstrap-select.js')}}"></script>
<script src="{{asset('assets/vendor/libs/moment/moment.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables/jquery.dataTables.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-responsive/datatables.responsive.js')}}"></script>
<!-- <script src="{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.js')}}"></script> -->
<script src="{{asset('assets/vendor/libs/datatables-buttons/datatables-buttons.js')}}"></script>
<!-- <script src="{{asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.js')}}"></script> -->
<script src="{{asset('assets/vendor/libs/jszip/jszip.js')}}"></script>
<script src="{{asset('assets/vendor/libs/pdfmake/pdfmake.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-buttons/buttons.html5.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-buttons/buttons.print.js')}}"></script>
<script src="{{asset('assets/vendor/libs/select2/select2.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/FormValidation.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/Bootstrap5.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/AutoFocus.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/cleavejs/cleave.js')}}"></script>
<script src="{{asset('assets/vendor/libs/cleavejs/cleave-phone.js')}}"></script>
<script src="{{asset('assets/vendor/libs/sweetalert2/sweetalert2.js')}}"></script>
@endsection

@section('page-script')
<script src="{{asset('js/admin/webpage_settings.js')}}"></script>
 


@endsection

@section('content')

<h4 class="py-3 breadcrumb-wrapper mb-4">
  <span class="text-muted fw-light">Settings /</span> Webpage Settings
</h4>

<!-- List Table -->
<div class="card">
  <div class="card-header">
    <h5 class="card-title mb-0"> 
      <a href="/school/{{$school->url}}" class="border btn " title="Click to open page" target="_blank">
        <i class="bx bx-globe bx-spin-hover bx-sm"></i>
      </a> 
      Webpage Settings
    </h5>
  </div>
  <div class="card-body">
    <div class="nav-align-left">
      <ul class="nav nav-tabs" role="tablist" style="min-width: 195px;">
        <li class="nav-item">
          <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#slider">Slider</button>
        </li>
        <li class="nav-item">
          <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#slider-theme-settings">Slider Theme Settings</button>
        </li>
        <li class="nav-item">
          <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#news">News</button>
        </li>
        <li class="nav-item">
          <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#classes">Classes</button>
        </li>
        <li class="nav-item">
          <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#video-section">Video Section</button>
        </li>
        <li class="nav-item">
          <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#gallery">Gallery</button>
        </li>
        <li class="nav-item">
          <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#teachers">Teachers</button>
        </li>
        <li class="nav-item">
          <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#school-statistics">School Statistics</button>
        </li>
        <li class="nav-item">
          <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#background-images">Background Images</button>
        </li>
        <li class="nav-item">
          <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#social-links">Social Links</button>
        </li>
      </ul>

      <div class="tab-content">
        <div class="tab-pane fade show active" id="slider">
          <!-- <div class="row">
            <div class="col-md-12 p-3">
              <a href="#" class="btn btn-primary float-right" data-bs-toggle="modal" data-bs-target="#addModalSlide">Add</a>
            </div>
          </div> -->
          
          <div class="card-datatable table-responsive">
            
            <table class="table border-top dt-column-search datatables-slides ">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Title</th>
                  <th>Sub Title</th>
                  <th>Description</th>                  
                  <th>Image</th>
                  <th>Status</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                 <tr>
                   <td colspan="7" align="center">No records found</td>
                 </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="tab-pane fade" id="slider-theme-settings">
            <form id="slider-settings-form" onsubmit="return false;">
              <div class="row g-3">
                <div class="col-md-6">
                  <label class="form-label" for="url">Heading Font Size</label>
                  <input type="text" id="heading_font_size" class="form-control" name="heading_font_size" placeholder="" 
                  value="{{ isset($webpageSliderSettings->heading_font_size)? $webpageSliderSettings->heading_font_size : '0' }}" />
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="name">Heading Color</label>
                  <input type="color" id="heading_color" class="form-control" name="heading_color" placeholder="ABC"  
                  value="{{ isset($webpageSliderSettings->heading_color)? $webpageSliderSettings->heading_color : '0' }}" />
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="url">Sub Heading Font Size</label>
                  <input type="text" id="sub_heading_font_size" class="form-control" name="sub_heading_font_size" placeholder=""  
                  value="{{ isset($webpageSliderSettings->sub_heading_font_size)? $webpageSliderSettings->sub_heading_font_size : '0' }}" />
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="name">Sub Heading Color</label>
                  <input type="color" id="sub_heading_color" class="form-control" name="sub_heading_color" placeholder="ABC"  
                  value="{{ isset($webpageSliderSettings->sub_heading_color)? $webpageSliderSettings->sub_heading_color : '0' }}" />
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="url">Description Font Size</label>
                  <input type="text" id="description_font_size" class="form-control" name="description_font_size" placeholder=""  
                  value="{{ isset($webpageSliderSettings->description_font_size)? $webpageSliderSettings->description_font_size : '0' }}" />
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="name">Description Color</label>
                  <input type="color" id="description_color" class="form-control" name="description_color" placeholder="ABC"  
                  value="{{ isset($webpageSliderSettings->description_color)? $webpageSliderSettings->description_color : '0' }}" />
                </div>
                <div class="col-md-12">
                  <button class="btn btn-success update-slider-settings" id="update-slider-settings" type="submit">Update</button>
                </div>
              </div>
            </form>
        </div>
        <div class="tab-pane fade" id="news">
           
          <div class="card-datatable table-responsive">
            <table class="table border-top dt-column-search datatables-news ">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Title</th>
                  <th>Description</th>                  
                  <th>Status</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                 <tr>
                   <td colspan="5" align="center">No records found</td>
                 </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="tab-pane fade" id="classes">
                    
          <div class="card-datatable table-responsive">
            <table class="table border-top dt-column-search datatables-classes ">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Class</th>
                  <th>Description</th>
                  <th>Status</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                 <tr>
                   <td colspan="5" align="center">No records found</td>
                 </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="tab-pane fade" id="video-section">
                    
          <div class="card-datatable table-responsive">
            <table class="table border-top dt-column-search datatables-videos">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Youtube Video Link</th>
                  <th>Title</th>
                  <th>Description</th>
                  <th>Thumbnail</th>
                  <th>Status</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                 <tr>
                   <td colspan="7" align="center">No records found</td>
                 </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="tab-pane fade" id="gallery">
                    
          <div class="card-datatable table-responsive">
            <table class="table border-top datatables-gallery">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Image</th>
                  <th>Status</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                 <tr>
                   <td colspan="4" align="center">No records found</td>
                 </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="tab-pane fade" id="teachers">
          
          <div class="card-datatable table-responsive">
            <table class="table border-top datatables-teachers">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Name</th>
                  <th>Designation</th>
                  <th>Description</th>
                  <th>Image</th>
                  <th>Status</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                 <tr>
                   <td colspan="7" align="center">No records found</td>
                 </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="tab-pane fade" id="school-statistics">
          <form id="update-webpage-stats" onsubmit="return false;">
              <div class="row g-3">
                <div class="col-md-6">
                  <label class="form-label" for="url">Total Students</label>
                  <input type="text" id="total_students" class="form-control" name="total_students" value="{{ isset($webpageStats->total_students)?$webpageStats->total_students : 0 }}"/>
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="name">Total Classes</label>
                  <input type="number" id="total_classes" class="form-control" name="total_classes"  value="{{ isset($webpageStats->total_classes)?$webpageStats->total_classes : 0 }}"/>
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="url">Total Employees</label>
                  <input type="number" id="total_employees" class="form-control" name="total_employees" value="{{ isset($webpageStats->total_employees)?$webpageStats->total_employees : 0 }}"/>
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="name">Total Busses</label>
                  <input type="number" id="total_bus" class="form-control" name="total_bus" value="{{ isset($webpageStats->total_bus)?$webpageStats->total_bus : 0 }}"/>
                </div>
                 
                <div class="col-md-12">
                  <button class="btn btn-success" type="submit">Update</button>
                </div>
              </div>
            </form>
        </div>
        <div class="tab-pane fade" id="background-images">
            
          
          <div class="card-datatable table-responsive">
            <table class="table border-top datatables-background-images">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Background</th>
                  <th>Image</th>
                  <th>Status</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                 <tr>
                   <td colspan="5" align="center">No records found</td>
                 </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="tab-pane fade" id="social-links">
          
          <div class="card-datatable table-responsive">
            <table class="table border-top datatables-social-links">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Social Site</th>
                  <th>Link</th>
                  <th>Status</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                 <tr>
                   <td colspan="5" align="center">No records found</td>
                 </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>       
  </div>
</div>
 
<!-- add Modals start-->

<div class="modal fade" id="addModalSlide" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">Add Slide</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="add-form-slide" enctype="multipart/form-data" onsubmit="return false;">
         <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label" for="title">Title</label>
              <input type="text" id="title" class="form-control" name="title" placeholder="" required />
            </div>
            <div class="col-md-6">
              <label class="form-label" for="sub_title">Subtitle</label>
              <input type="text" id="sub_title" class="form-control" name="sub_title" placeholder=""  required />
            </div>
            <div class="col-md-12">
              <label class="form-label" for="description">Description</label>
              <input type="text" id="description" class="form-control" name="description" placeholder=""  required />
            </div>
             
            <div class="col-md-6">
              <label class="form-label" for="image">Image</label>
              <input type="file" id="slider_image" class="form-control" name="image" placeholder=""  required />
            </div>
            <div class="col-md-6">
              <label class="form-label" for="status">Status</label>
              <select class="form-select form-control" name="status" required >
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary data-submit add-slide">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="addModalNews" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">Add News</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="add-form-news" onsubmit="return false;">
         <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label" for="title">Title</label>
              <input type="text" id="news-title" class="form-control" name="title" placeholder=""  required />
            </div>
            <div class="col-md-6">
              <label class="form-label" for="phone_number">Description</label>
              <input type="text" id="news-description" class="form-control" name="description" placeholder=""  required />
            </div>
             
            <div class="col-md-6">
              <label class="form-label" for="email">Status</label>
              <select class="form-select form-control" name="status" id="news-status" required >
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary data-submit add-record">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="addModalClass" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">Add Class</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="add-form-class" onsubmit="return false;">
         <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label" for="class_name">Class</label>
              <input type="text" id="class-class_name" class="form-control" name="class_name" placeholder=""  required />
            </div>
            <div class="col-md-6">
              <label class="form-label" for="description">Description</label>
              <input type="text" id="class-description" class="form-control" name="description" placeholder=""  required />
            </div>
             
            <div class="col-md-6">
              <label class="form-label" for="email">Status</label>
              <select class="form-select form-control" id="class-status" name="status" required >
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary data-submit add-record">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div>
  
<div class="modal fade" id="addModalVideo" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">Add Video</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="add-form-video" onsubmit="return false;">
         <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label" for="title">Title</label>
              <input type="text" id="video-title" class="form-control" name="title" placeholder=""  required />
            </div>
            <div class="col-md-6">
              <label class="form-label" for="link">Youtube Video Link</label>
              <input type="text" id="video-link" class="form-control" name="link" placeholder=""  required />
            </div>
            <div class="col-md-12">
              <label class="form-label" for="description">Description</label>
              <input type="text" id="video-description" class="form-control" name="description" placeholder=""  required />
            </div>
             
            <div class="col-md-6">
              <label class="form-label" for="image">Thumbnail</label>
              <input type="file" id="video-image" class="form-control" name="image" placeholder=""  required />
            </div>
            <div class="col-md-6">
              <label class="form-label" for="email">Status</label>
              <select class="form-select form-control" id="video-status" name="status" required >
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary data-submit add-record">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div> 

<div class="modal fade" id="addModalImage" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">Add Image</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="add-form-image" onsubmit="return false;">
         <div class="row g-3">
                       
            <div class="col-md-6">
              <label class="form-label" for="image">Image</label>
              <input type="file" id="image-image" class="form-control" name="image" placeholder=""  required />
            </div>
            <div class="col-md-6">
              <label class="form-label" for="email">Status</label>
              <select class="form-select form-control" name="status" id="image-status" required >
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
          </div>
          
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary data-submit add-record">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div> 

<div class="modal fade" id="addModalTeacher" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">Add Teacher</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="add-form-teacher" onsubmit="return false;">
         <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label" for="name">Name</label>
              <input type="text" id="teacher-name" class="form-control" name="name" placeholder=""  required />
            </div>
            <div class="col-md-6">
              <label class="form-label" for="designation">Designation</label>
              <input type="text" id="teacher-designation" class="form-control" name="designation" placeholder=""  required />
            </div>
            <div class="col-md-12">
              <label class="form-label" for="description">Description</label>
              <input type="text" id="teacher-description" class="form-control" name="description" placeholder=""  required />
            </div>
             
            <div class="col-md-6">
              <label class="form-label" for="image">Image</label>
              <input type="file" id="teacher-image" class="form-control" name="image" placeholder=""  required />
            </div>
            <div class="col-md-6">
              <label class="form-label" for="email">Status</label>
              <select class="form-select form-control" name="status" id="teacher-status" required >
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary data-submit add-record">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div> 

<div class="modal fade" id="addModalBackgroundImage" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">Add Background Image</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="add-form-background-image" onsubmit="return false;">
         <div class="row g-3">
                       
            <div class="col-md-6">
              <label class="form-label" for="email">Background</label>
              <select class="form-select form-control" id="background-image-background" name="background" required >
                <option value="classes" > Classes</option>
                <option value="video"   > Video</option>
                <option value="stats"   > Stats</option>
              </select>
            </div>

            
            <div class="col-md-6">
              <label class="form-label" for="email">Status</label>
              <select class="form-select form-control" id="background-image-status" name="status" required >
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label" for="image">Image</label>
              <input type="file" id="background-image-image" class="form-control" name="image" placeholder=""  required />
            </div>
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary data-submit add-record">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div> 

<div class="modal fade" id="addModalSocialLink" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">Add Social Link</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="add-form-social-link" onsubmit="return false;">
         <div class="row g-3">
                       
            <div class="col-md-6">
              <label class="form-label" for="email">Social Site</label>
              <select class="form-select form-control" id="social-link-social_site" name="social_site" required >
                <option value="facebook" > Facebook</option>
                <option value="twitter"  > Twitter</option>
                <option value="linkedin" > Linkedin</option>
                <option value="youtube"  > Youtube</option>
              </select>
            </div>

            <div class="col-md-6">
              <label class="form-label" for="link">Link</label>
              <input type="text" id="social-link-link" class="form-control" name="link" placeholder=""  required />
            </div>
            <div class="col-md-6">
              <label class="form-label" for="email">Status</label>
              <select class="form-select form-control" id="social-link-status" name="status">
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary data-submit add-record">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div>

<!-- add modals end  -->


<!-- edit Modals start-->

<div class="modal fade" id="editModalSlide" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">Edit Slide</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="edit-form-slide" enctype="multipart/form-data" onsubmit="return false;">
          <input type="text" id="edit-slide-id" class="form-control"  name="id" value="" readonly hidden>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label" for="title">Title</label>
              <input type="text" id="edit-slide-title" class="form-control" name="title" placeholder=""  required />
            </div>
            <div class="col-md-6">
              <label class="form-label" for="sub_title">Subtitle</label>
              <input type="text" id="edit-slide-sub_title" class="form-control" name="sub_title" placeholder=""  required />
            </div>
            <div class="col-md-12">
              <label class="form-label" for="description">Description</label>
              <input type="text" id="edit-slide-description" class="form-control" name="description" placeholder=""  required />
            </div>
             
            <div class="col-md-6">
              <label class="form-label" for="user_name">Image</label>
              <input type="file" id="edit-slide-image" class="form-control" name="image" placeholder=""  />
              <br>
              <img src="#" height="100" id="edit-slide-image-src" >
            </div>
            <div class="col-md-6">
              <label class="form-label" for="email">Status</label>
              <select class="form-select form-control" name="status" id="edit-slide-status" required >
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary data-submit update-slide">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="editModalNews" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">Edit News</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="edit-form-news" onsubmit="return false;">
          <input type="text" id="edit-news-id" class="form-control"  name="id" hidden readonly>
         <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label" for="title">Title</label>
              <input type="text" id="edit-news-title" class="form-control" name="title" placeholder=""  required />
            </div>
            <div class="col-md-6">
              <label class="form-label" for="phone_number">Description</label>
              <input type="text" id="edit-news-description" class="form-control" name="description" placeholder=""  required />
            </div>
             
            <div class="col-md-6">
              <label class="form-label" for="email">Status</label>
              <select class="form-select form-control" name="status" id="edit-news-status" required >
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary data-submit update-news">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="editModalClass" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">Edit Class</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="edit-form-class" onsubmit="return false;">
          <input type="text" id="edit-class-id" class="form-control"  name="id" hidden readonly>
         <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label" for="class_name">Class</label>
              <input type="text" id="edit-class-class_name" class="form-control" name="class_name" placeholder=""  required />
            </div>
            <div class="col-md-6">
              <label class="form-label" for="description">Description</label>
              <input type="text" id="edit-class-description" class="form-control" name="description" placeholder=""  required />
            </div>
             
            <div class="col-md-6">
              <label class="form-label" for="email">Status</label>
              <select class="form-select form-control" id="edit-class-status" name="status" required >
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary data-submit update-class">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div>
  
<div class="modal fade" id="editModalVideo" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">Edit Video</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="edit-form-video" onsubmit="return false;">
          <input type="text" id="edit-video-id" class="form-control"  name="id" hidden readonly>
         <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label" for="title">Title</label>
              <input type="text" id="edit-video-title" class="form-control" name="title" placeholder=""  required />
            </div>
            <div class="col-md-6">
              <label class="form-label" for="link">Youtube Video Link</label>
              <input type="text" id="edit-video-link" class="form-control" name="link" placeholder=""  required />
            </div>
            <div class="col-md-12">
              <label class="form-label" for="description">Description</label>
              <input type="text" id="edit-video-description" class="form-control" name="description" placeholder=""  required />
            </div>
             
            <div class="col-md-6">
              <label class="form-label" for="image">Thumbnail</label>
              <input type="file" id="edit-video-image" class="form-control" name="image" placeholder=""   />
              <br>
              <img src="#" height="100" id="edit-video-image-src" >
            </div>
            <div class="col-md-6">
              <label class="form-label" for="email">Status</label>
              <select class="form-select form-control" id="edit-video-status" name="status" required >
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary data-submit update-video">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div> 

<div class="modal fade" id="editModalImage" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">Edit Image</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="edit-form-image" onsubmit="return false">
          <input type="text" id="edit-image-id" class="form-control"  name="id" hidden readonly>
         <div class="row g-3">
                       
            <div class="col-md-6">
              <label class="form-label" for="image">Image</label>
              <input type="file" id="edit-image-image" class="form-control" name="image" placeholder=""  />
              <br>
              <img src="#" height="100" id="edit-image-image-src" >
            </div>
            <div class="col-md-6">
              <label class="form-label" for="email">Status</label>
              <select class="form-select form-control" name="status" id="edit-image-status" required >
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary data-submit update-image">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div> 

<div class="modal fade" id="editModalTeacher" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">Edit Teacher</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="edit-form-teacher" onsubmit="return false;">
          <input type="text" id="edit-teacher-id" class="form-control"  name="id" hidden readonly>
         <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label" for="name">Name</label>
              <input type="text" id="edit-teacher-name" class="form-control" name="name" placeholder=""  required />
            </div>
            <div class="col-md-6">
              <label class="form-label" for="designation">Designation</label>
              <input type="text" id="edit-teacher-designation" class="form-control" name="designation" placeholder=""  required />
            </div>
            <div class="col-md-12">
              <label class="form-label" for="description">Description</label>
              <input type="text" id="edit-teacher-description" class="form-control" name="description" placeholder=""  required />
            </div>
             
            <div class="col-md-6">
              <label class="form-label" for="image">Image</label>
              <input type="file" id="edit-teacher-image" class="form-control" name="image" placeholder=""  />
              <br>
              <img src="#" height="100" id="edit-teacher-image-src" >
            </div>
            <div class="col-md-6">
              <label class="form-label" for="email">Status</label>
              <select class="form-select form-control" id="edit-teacher-status" name="status" required >
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary data-submit update-teacher">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div> 

<div class="modal fade" id="editModalBackgroundImage" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">Edit Background Image</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="edit-form-background-image" onsubmit="return false;">
          <input type="text" id="edit-background-image-id" class="form-control"  name="id" hidden readonly>
         <div class="row g-3">
                       
            <div class="col-md-6">
              <label class="form-label" for="background">Background</label>
              <select class="form-select form-control" id="edit-background-image-background" name="background" required >
                <option value="classes" > Classes</option>
                <option value="video"   > Video</option>
                <option value="stats"   > Stats</option>
              </select>
            </div>

            
            <div class="col-md-6">
              <label class="form-label" for="email">Status</label>
              <select class="form-select form-control" id="edit-background-image-status" name="status" required >
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label" for="image">Image</label>
              <input type="file" id="edit-background-image-image" class="form-control" name="image" placeholder=""   />
              <br>
              <img src="#" height="100" id="edit-background-image-image-src" >
            </div>
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary data-submit update-background-image">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div> 

<div class="modal fade" id="editModalSocialLink" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">Edit Social Link</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="edit-form-social-link" onsubmit="return false;">
          <input type="text" id="edit-social-link-id" class="form-control"  name="id" hidden readonly>
         <div class="row g-3">
                       
            <div class="col-md-6">
              <label class="form-label" for="email">Social Site</label>
              <select class="form-select form-control" id="edit-social-link-social_site" name="social_site" required >
                <option value="facebook" > Facebook</option>
                <option value="twitter"  > Twitter</option>
                <option value="linkedin" > Linkedin</option>
                <option value="youtube"  > Youtube</option>
              </select>
            </div>

            <div class="col-md-6">
              <label class="form-label" for="link">Link</label>
              <input type="text" id="edit-social-link-link" class="form-control" name="link" placeholder=""  required />
            </div>
            <div class="col-md-6">
              <label class="form-label" for="status">Status</label>
              <select class="form-select form-control" name="status" id="edit-social-link-status" required >
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary data-submit update-social-links">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div>

<!-- edit modals end  -->
@endsection