@extends('layouts.admin')
@section('content')
<main role="main" class="flex-shrink-0">
   <div class="container custom-container">
   <style>
      .btn-header-link::after {
      display: none !important;
      }
      .modal-dialog {
      max-width: 90%;
      }
      .alert {
         padding: 15px;
         margin-bottom: 20px;
         border: 1px solid transparent;
         border-radius: 4px;
         }
      .alert-success {
         color: #3c763d;
         background-color: #dff0d8;
         border-color: #d6e9c6;
      }
      .invalid{
         color:red;
      }
   </style>
   <div class="card mt-50 mb-50">
      <div class="card-header">
         <h4 class="mb-2">Feedback Form</h4>
      </div>

      <div class="card-body">
         <div class="custom-form">
            <form id="filterform" method="post" action="{{route('submit-data')}}" autocomplete="off">
            @csrf
            <div class="form-group">
                  <label for="ExamList">Select Exam</label>
                  <div class="form-group field-feedback-examname ">
                     <select id="feedback-examname" id="examName" class="form-control valid-field" name="examName" aria-required="true">
                        <option value="">Select Exam</option>                      
                                             </select>
                     @error('examName')
                                        <div class="invalid" >
                                            {{ $message }}
                                        </div> 
                                        @enderror
                  </div>
               </div>
               <div class="form-group">
                  <label for="ExamList">Enter Feedback</label>
                  <div class="form-group field-feedback required">
                     <textarea id="feedback" class="form-control form-control-sm valid-field" name="feedback" maxlength="200" placeholder="Enter the Feedback" aria-required="true" ></textarea>
                     @error('feedback')
                                        <div class="invalid" >
                                            {{ $message }}
                                        </div>
                                        @enderror
                  </div>
               </div>
   </br>
               <div class="form-group">
                  <button type="submit" class="btn btn-success" id="loginPageSubmitBtn">Submit</button>                        
               </div>
            </form>
         </div>
      </div>
   </div>
</main>
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
    <script>
        $(document).ready(function() {
         $('#loginPageSubmitBtn').click(function() {
        var formIsValid = true;
        $('.valid-field').each(function() {
            if ($(this).val().trim() === '') {
                $(this).next('span.text-danger').remove();
                $(this).after('<span class="text-danger">*This field is required</span>');
                if (formIsValid) {  
                    $(this).focus();
                    formIsValid = false;
                }
            } else {                
                $(this).next('span.text-danger').remove();
                
            }
        });
        return formIsValid;
        });
      });
    </script>
@endsection
<style>
   .text-right {
   text-align: right !important;
   }
</style>