@extends('layouts.admin')

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

@section('main-content')

<style>
  .input {
    color: #697a8d;
  }
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-text-fill-color:#697a8d !important;
  }
</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 Subject</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">Subject Details</h5>
            <!-- <small class="text-muted float-end">Merged input group</small> -->
          </div>
          <div class="card-body">
            <form method="POST" action="{{ url('add-new-subject') }}" enctype="multipart/form-data">
              <div class="mb-3">
                <label class="form-label" for="basic-icon-default-fullname">Subject Name</label>
                <div class="input-group">
                  <span id="basic-icon-default-fullname2" class="input-group-text"><i class='bx bx-book-open'></i></span>
                  <input type="text" name="subjectname" id="subjectname" placeholder="Subject 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>
                <button type="button" onclick="getsubject()" class="btn btn-success text-white" id="save_btn">Save</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- / Content -->
  <div class="content-backdrop fade"></div>
</div>


<script>
  // $( document ).ready(function() {
  function getsubject() {
    $('.text-danger').hide();
    $("#save_btn").prop("disabled",true);
    var formData = new FormData();
    const subjectname = ($('#subjectname').val()).trim();
    
    formData.append('subjectname', subjectname);
   
    $.ajax({
      type: "post",
      url: "{{ route('subjects.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 ($.isEmptyObject(data.error)) {
          window.location.href = data.success;
        } else {
          // printErrorMsg(data.error);
          $.each(data.error, function(field_name, error) {
            // $(document).find('[name='+field_name+']').after('<span class="text-strong text-danger">' +error+ '</span>')
            $(document).find('#' + field_name + '').closest('div').after('<span class="text-strong text-danger">' + error + '</span>')
          })
        }
        $("#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