@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Add Batch</title>

@section('main-content')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- froala editor -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/css/froala_editor.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/css/froala_style.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/css/plugins.pkgd.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/css/plugins/files_manager.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/css/plugins/file.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/css/plugins/code_view.min.css">
<style>
  .input {
    color: #697a8d;
  }

  #loader {
    text-align: center;
    /* Align the loader to the center */
    margin-left: 15px;
    /* Adjust this value to manage space between loader and button */
    width: auto;
    display: inline-block;
  }

  #loader img {
    width: 30px;
  }
  #topicField .fr-box, .fr-toolbar.fr-desktop {
    width: 100% !important;
  }
  #topicField .fr-sticky-on {
    position: absolute;
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-text-fill-color:#697a8d !important;
  }
  .fr-wrapper>div:first-child {
    display: none;
  }
</style>

<div id="alert" class="col-md-6">
  @if(Session::has('success'))
  <div class="alert alert-primary" role="alert">
    {{Session::get('success')}}
  </div>
  @endif
</div>

<div class="content-wrapper">
  <!-- Content -->
  <div class="container-xxl flex-grow-1 container-p-y">
    <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light"></span> Add New Batch</h4>
    <!-- Basic Layout -->
    <div class="row">
      <div class="col-xl">
        <div class="card mb-4">
          <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Batch Details</h5>
            <!-- <small class="text-muted float-end">Merged input group</small> -->
          </div>
          <div class="card-body">
            <form method="POST" action="{{ url('add-new-teacher') }}" enctype="multipart/form-data">
              <div class="mb-3">
                <label class="form-label" for="basic-icon-default-fullname">Name</label>
                <div class="input-group">
                  <span id="basic-icon-default-fullname2" class="input-group-text"><i class='bx bx-group'></i></span>
                  <input type="text" name="name" id="name" placeholder="Batch name" class="form-control input form-control-line" minlength="3" maxlength="30" onkeydown="return /[a-zA-Z\s]/i.test(event.key)" autocomplete="off">
                </div>
              </div>
              <div class="mb-3">
                <label class="form-label" for="basic-icon-default-fullname">Class</label>
                <div class="input-group">
                  <span id="basic-icon-default-fullname2" class="input-group-text"><i class='bx bxs-star-half'></i></span>
                  <select name="classname" id="classname" class="form-control input form-control-line">
                    <option value="" hidden disabled selected>Select class</option>
                    @foreach($classNames as $value => $displayName)
                    <option value="{{ $value }}">{{ $displayName }}</option>
                    @endforeach
                  </select>
                </div>
              </div>
              <div class="mb-3">
                <label class="form-label" for="basic-icon-default-fullname">Subject</label>
                <div class="input-group">
                  <span id="basic-icon-default-gender" class="input-group-text"><i class='bx bx-book-reader'></i></span>
                  <!-- Dropdown for selecting gender -->
                  <select name="subjectid" id="subjectid" class="form-select input form-control-line">
                    <option value="" hidden disabled selected>Select subject</option>
                    @if(count($subjects) != 0)
                      @foreach($subjects as $key => $subject)
                        <option value="{{$subject->id}}">{{$subject->name}}</option>
                      @endforeach
                    @endif
                  </select>
                </div>
              </div>
              <div class="mb-3" id="topicField" style="display: none;">
                <label class="form-label" for="topic">Topic</label>
                <div class="input-group">
                  <!-- Input field for topic -->
                  <textarea name="topic" id="topic" class="form-control content" placeholder="Enter topic"></textarea>

                </div>
              </div>
              <div class="mb-3" id="teachersDropdown" style="display: none;">
                <label class="form-label" for="basic-icon-default-teacher">Teacher</label>
                <div class="input-group">
                  <span id="basic-icon-default-gender" class="input-group-text"><i class="bx bx-user"></i></span>
                  <!-- Dropdown for selecting teachers -->
                  <select name="teacherid" id="teacherid" class="form-select input form-control-line">
                    <!-- Options for teachers will be populated dynamically based on selected subject -->
                  </select>
                </div>
              </div>
              <div class="mb-3">
                <!-- <label class="form-label" for="basic-icon-default-fullname">Batch Date</label>
                <div class="input-group input-group-merge">
                  <span id="basic-icon-default-batchTime" class="input-group-text"><i class="bx bx-user"></i></span>
                  <input type="text" name="batchdate" id="batchdate" class="form-control input form-control-line">
                </div> -->
              </div>
              <div class="mb-3">
                <label class="form-label" for="basic-icon-default-fullname">Start Time</label>
                <div class="input-group">
                  <span id="basic-icon-default-batchTime" class="input-group-text"><i class='bx bx-time' ></i></span>
                  <input onclick="this.showPicker()" type="time" name="startbatchtime" id="startbatchtime" class="form-control input form-control-line" autocomplete="off">
                </div>
              </div>
              <div class="mb-3">
                <label class="form-label" for="basic-icon-default-fullname">End Time</label>
                <div class="input-group">
                  <span id="basic-icon-default-batchTime" class="input-group-text"><i class='bx bx-time' ></i></span>
                  <input onclick="this.showPicker()" type="time" name="endbatchtime" id="endbatchtime" class="form-control input form-control-line"autocomplete="off">
                </div>
              </div>

              <div class="mb-3">
                <label class="form-label" for="basic-icon-default-fullname">Fee</label>
                <div class="input-group">
                  <span id="basic-icon-default-batchfee" class="input-group-text">₹</span>
                  <input type="text" name="batchfee" id="batchfee" class="form-control input form-control-line" maxlength="6" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" autocomplete="off">
                </div>
              </div>
              <div class="mb-3">
                <label class="form-label" for="basic-icon-default-fullname">Mode</label>
                <div class="input-group">
                  <span id="basic-icon-default-batchmode" class="input-group-text"><i class='bx bx-disc' ></i></span>
                  <select name="mode" id="mode" class="form-control input form-control-line">
                    <option value="offline">Offline</option>
                    <option value="online">Online</option>
                  </select>
                </div>
              </div>
              <div class="mb-3" id="zoomLinkField" style="display: none;">
                <label class="form-label" for="basic-icon-default-batchlink"> Batch Link</label>
                <div class="input-group">
                  <span id="basic-icon-default-batchlink" class="input-group-text"><i class="bx bx-link"></i></span>
                  <input type="text" id="livelink" name=livelink class="form-control input form-control-line" name="zoomLink" placeholder="Enter Class Link">
                </div>
              </div>
              <div class="form-group loaderbtn_div">
                <button type="button" class="btn btn-success text-white" onclick="getuser()" id="save_btn">Save</button>
                <div class="loaderDiv" id="loader" style="display: none;">
                  <!-- Your loader HTML or spinner goes here -->
                  <img src="{{ asset('assets/loader.gif') }}" alt="Loading..." />
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- / Content -->
  <div class="content-backdrop fade"></div>
</div>

<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/js/froala_editor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/js/froala_editor.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/js/plugins.pkgd.min.js"></script>
<script>
  $(document).ready(function() {
    new FroalaEditor('.content', {
      pastePlain: 'true',
      imageUploadURL: '/UploadFiles',
      imageUploadMethod: 'POST',
      imageUploadParam: 'up_image',
      imageUploadParams: {
        _token: "{{csrf_token()}}",
        froala: 'true',
      }
    });
  });
</script>
<script>
  // Now use jQuery instead of $ to avoid conflicts
  $(document).ready(function($) {
    $('#batchdate').datepicker({
      dateFormat: 'dd-mm-yy',
      changeMonth: true,
      changeYear: true,
      yearRange: 'c-120:c', // This will allow selection of years starting 120 years ago up to the current year
      minDate: 0 // Restrict selection to past dates
    });
  });
</script>
<script>
  $(document).ready(function() {
    $('#mode').change(function() {
      var selectedMode = $(this).val();

      // Show the Zoom link field if 'Online' mode is selected
      if (selectedMode === 'online') {
        $('#zoomLinkField').show();
      } else {
        $('#zoomLinkField').hide();
      }
    });

    $('#subjectid').change(function() {
      var subjectId = $(this).val();

      // Show the topic input field if a subject is selected
      if (subjectId !== '') {
        $('#topicField').show();
      } else {
        $('#topicField').hide();
      }
      $.ajax({
        type: 'GET',
        url: '/get-teachers/' + subjectId,
        success: function(response) {
          $('#teachersDropdown').show();
          // Clear previous options
          $('#teacherid').empty();

          // Populate teachers dropdown with received data
          $.each(response.teachers, function(key, value) {
            $('#teacherid').append('<option value="' + value.id + '">' + value.first_name + ' ' + value.last_name +'</option>');
          });

          if(response.teachers.length==0){
            $('#teacherid').append(`<option selected disabled hidden>No Teacher Found</option>`);
            $('#teacherid').prop("disabled",true);
          } else{
            $('#teacherid').prop("disabled",false);
          }
        },
        error: function(xhr, status, error) {
          console.error('Error fetching teachers:', error);
        }
      });
    });
  });

  // $( document ).ready(function() {
  function getuser(){
    $('#save_btn').prop('disabled',true);
    $('.text-danger').remove();
    $('#loader').show();
    var formData = new FormData();
    var name = ($('#name').val()).trim();
    var classname = $('#classname').val();
    var subjectid = $('#subjectid').val();
    var topic = $('#topic').val();
    var teacherid = $('#teacherid').val();
    // var batchdate = $('#batchdate').val();
    var startbatchtime = $('#startbatchtime').val();
    var endbatchtime = $('#endbatchtime').val();
    var batchfee = ($('#batchfee').val()).trim();
    var mode = $('#mode').val();
    var livelink = ($('#livelink').val()).trim();

    formData.append('name', name);
    formData.append('classname', classname);
    formData.append('subjectid', subjectid);
    formData.append('topic', topic);
    formData.append('teacherid', teacherid);
    // formData.append('batchdate', batchdate);
    formData.append('startbatchtime', startbatchtime);
    formData.append('endbatchtime', endbatchtime);
    formData.append('batchfee', batchfee);
    formData.append('mode', mode);
    formData.append('livelink', livelink);
    $.ajax({
      type: "post",
      url: "{{ route('batches.store') }}",
      contentType: 'multipart/form-data',
      cache: false,
      contentType: false,
      processData: false,
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      data: formData,
      success: function(data) {
        if (data.hasOwnProperty('success')) {
          window.location.href = data.success;
        }
        else if(data.hasOwnProperty('errorMsg')){
          alert(data['errorMsg']);
        } 
        else if (data.hasOwnProperty('error')) {
          if (data.error === 'Teacher already assigned to this subject in the same class batch.') {
            // Display a specific message or handle the error as needed
            alert('Teacher already assigned to this subject in the same class batch.');
          } else {
            // Handle other error messages
            $.each(data.error, function(field_name, error) {
              if (!$('#' + field_name).closest('div').next().hasClass('text-danger')) {
                $('#' + field_name).closest('div').after('<span class="text-strong text-danger">' + error + '</span>');
              }
            });
          }
        }
        $('#save_btn').prop('disabled',false);
      },
      error: function() {
        // Hide loader in case of an error
        $('#loader').hide();
        $('#save_btn').prop('disabled',false);
        // Handle error
      },
      complete: function() {
        // Hide loader when the request is completed (success, error, or failure)
        $('#loader').hide();
        $('#save_btn').prop('disabled',false);
      }

    })
  }

  // function printErrorMsg (msg) {
  //     $(".print-error-msg").find("ul").html('');
  //     $(".print-error-msg").css('display','block');
  //     $.each( msg, function( key, value ) {
  //         $(".print-error-msg").find("ul").append('<li>'+value+'</li>');
  //     });
  // }        
  // });
</script>
@endsection