<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<div class="content-wrapper">
   <div class="content-header">
      <div class="container-fluid">
         <div class="row mb-2">
            <div class="col-sm-6">
               <h1 class="m-0 text-dark">Add Batch</h1>
            </div>
            <div class="col-sm-6">
               <ol class="breadcrumb float-sm-right">
                  <li class="breadcrumb-item"><a href="<?php echo base_url() ?>admin/admin/dashboard">Dashboard</a></li>
                  <li class="breadcrumb-item"><a href="#">Admission</a></li>
                  <li class="breadcrumb-item active">Add Batch </li>
               </ol>
            </div>
         </div>
      </div>
   </div>
   <section class="content">
      <div class="container-fluid">
         <div class="card card-default">
            <div class="card-header">
               <h3 class="card-title">Add New Batch</h3>
               <div class="card-tools">
                  <a href="<?php echo base_url()?>/admin/admission/view_all_batch" class="btn btn-success btn-sm"><i class="fa fa-eye" aria-hidden="true"></i> View All Batch</a>
               </div>
            </div>
            <?php echo form_open('admin/admission/add_batch'); ?>
            <div class="card-body">
               <div class="row">
                  <div class="col-md-7">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Batch Name (बैच का नाम)<span class="required">*</span></label>
                        <div class="col-sm-12">
                           <input type="text" class="form-control"  name="batch_name"  required="required" placeholder="Enter Batch Name">
                        </div>
                     </div>
                  </div>
                  <div class="col-md-3">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Batch Size (बैच का आकार)<span class="required">*</span> </label>
                        <div class="col-sm-12">
                           <input type="number" class="form-control"  name="batch_size"  required="required" placeholder="Enter Batch Size" min="1">
                        </div>
                     </div>
                  </div>
                  <div class="col-md-2">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Batch Room No (बैच कक्ष क्रमांक)<span class="required">*</span> </label>
                        <div class="col-sm-12">
                           <select class="form-control" onchange="check_batch_room(this.value)" name="batch_room_no"  required="required" placeholder="Enter Batch Size">
                              <option value="">Select</option>
                              <option value="1">1</option>
                              <option value="2">2</option>
                              <option value="3">3</option>
                              <option value="4">4</option>
                              <option value="5">5</option>
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-4">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Batch Course (बैच की पाठ्यक्रम)<span class="required">*</span> </label>
                        <div class="col-sm-12">
                           <select type="number" class="form-control"  name="batch_course"  required="required" placeholder="Enter Batch Size">
                              <option value="">Select A Course</option>
                              <?php foreach ($all_course as $key => $course):?>
                                 <option value="<?php echo $course->course_id; ?>"><?php echo $course->course_name; ?></option>
                              <?php endforeach; ?>
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-4">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Batch Teacher (बैच की शिक्षक)<span class="required">*</span> </label>
                        <div class="col-sm-12">
                           <select type="number" class="form-control"  name="batch_teacher"  required="required" placeholder="Enter Batch Size">
                              <option value="">Select A Teacher</option>
                              <?php foreach ($all_teacher as $key => $teacher):?>
                                 <option value="<?php echo $teacher->user_id; ?>"><?php echo $teacher->user_name; ?></option>
                              <?php endforeach; ?>
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-4">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Batch Start Date (बैच आरंभ तिथि)<span class="required">*</span> </label>
                        <div class="col-sm-12">
                           <input type="date" class="form-control"  name="batch_start_date"  required="required" placeholder="Enter Batch Size"> 
                        </div>
                     </div>
                  </div>
                  <?php
                     $days = array(
                         'mon' => 'Monday',
                         'tue' => 'Tuesday',
                         'wed' => 'Wednesday',
                         'thu' => 'Thursday',
                         'fri' => 'Friday',
                         'sat' => 'Saturday',
                         'sun' => 'Sunday'
                     );
                  ?>
                  <div class="col-md-4">
                     <table width="100%">
                        <?php foreach ($days as $dayKey => $dayName): ?>
                            <tr>
                                <td>
                                    <label><input type="checkbox" id="<?php echo $dayKey; ?>-checkbox" onclick="toggleWorkingHours('<?php echo $dayKey; ?>')">&nbsp;&nbsp;<?php echo $dayName; ?></label>
                                </td>
                                <td>
                                    <input type="time" onchange="validateTime('<?php echo $dayKey; ?>')" class="" name="<?php echo $dayKey; ?>-start" id="<?php echo $dayKey; ?>-start" disabled> &nbsp;&nbsp;to&nbsp;&nbsp;
                                    <input type="time" onchange="validateTime('<?php echo $dayKey; ?>')" class="" name="<?php echo $dayKey; ?>-end" id="<?php echo $dayKey; ?>-end" disabled>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                     </table>
                  </div>
                  <div class="col-md-12">
                     <div class="form-group">
                        <button name="submit" id="submit_button" style="float: right" type="submit" class="btn btn-success">Add</button>
                     </div>
                  </div>
                  <?php echo form_close() ?>
               </div>
            </div>
         </div>
      </div>
   </section>
</div>
<script>
function check_batch_room(e) 
{
   $.ajax({
       type: "GET",
       dataType: "JSON",
       url: '<?php echo base_url(); ?>/admin/admission/check_batch_room_availability/' + e,
       beforeSend: function () {
         $(".loader").show();
       },
       success: function (response) {
         $(".loader").hide();

         if (response) {
           swal('Oops!', "Room No Already Exists", 'error');
           $('#submit_button').hide();
         } else {
           $('#submit_button').show()
         }
       },
       error: function (xhr, status, error) {
         console.log(xhr.responseText);
         $(".loader").hide();
         swal('Error!', "An error occurred while checking camp availability.", 'error');
       }
  });
}


function toggleWorkingHours(day) {
   var startInput = document.getElementById(day + '-start');
   var endInput = document.getElementById(day + '-end');
   var checkbox = document.getElementById(day + '-checkbox');
     
   startInput.disabled = !checkbox.checked;
   endInput.disabled = !checkbox.checked;
     
   if (checkbox.checked) {
       startInput.setAttribute('required', 'required');
       endInput.setAttribute('required', 'required');
   } else {
       startInput.removeAttribute('required');
       endInput.removeAttribute('required');
   }
}
function validateTime(dayKey) {
     var fromTime  = $('#'+dayKey + '-start').val();
     var toTime  = $('#'+dayKey + '-end').val();
     
      var fromTimeObj = new Date('2000/01/01 ' + fromTime);
      var toTimeObj = new Date('2000/01/01 ' + toTime);

      if (fromTimeObj >= toTimeObj) {
          alert('To Time should be greater than From Time.');
      } else if (fromTimeObj.getDate() !== toTimeObj.getDate()) {
          alert('The time cannot span across different days.');
      } else if (fromTime == toTime) {
          alert('The time cannot be Same');
      } else {
          // alert('Valid time range!');
          // Perform further actions or submit the form
      }
}
  </script>        
        
