@push("style")
<style>
  @media screen and (max-width:400px){
    frm{
      margin-top:0px;
    }
  }
  .error-message {
        font-weight: bold;
    }
    .contact_img{
      max-width:380px;
      width:100%;
      height:350px;
      border-radius:5px;
    }
    .contact_form {
    background-color: #ffffff;
    padding-top: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    padding-left: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
}
.contact_form .form-control{
  border-color:none !important;
}
.dark-mode .error-message {
    color: red !important;
}
</style>
@endpush
<section class="dt-bg frm">
  <div class="container">
  <h3 class=" fs-3 text-center my-5 banner-title">Reach <span class="text-primary">Out to Us</span></h3>
        <div class="row mx-1 align-items-center">
          <div class="col-lg-4 col-md-4 col-12" style="border:none;" data-aos="fade-left">
              <img class="contact_img" src="{{ asset('assets/b2c_img/contact_us.jpg')}}" alt="feedback">
          </div>
          <div class="dt-bg col-lg-8 col-md-8 col-12 p-4" style="border:none;" data-aos="fade-right">
                  @include('common.alert')
              @if(session('success'))
              <div class="alert alert-success">
                  {{ session('success') }}
              </div>
              @endif
            <form class="contact_form" action="{{ route('fe.feedback.store')}}" method="post" role="form" id="email-form">
              @csrf
              @if(!is_student_master())
              <div class="row">
                <div class="col-md-6 form-group">
                  <input type="text" name="name" class="form-control" placeholder="Your Name">
                </div>
                <div class="col-md-6 form-group mt-3 mt-md-0">
                  <input type="email" class="form-control" name="email" placeholder="Your Email">
                </div>
              </div>
              @elseif(is_student_master())
              <input type="hidden" name="name">
              <input type="hidden" name="email">
              @endif
              <div class="form-group mt-3">
                <input type="text" class="form-control" name="subject" placeholder="Subject">
              </div>
              <div class="form-group mt-3">
                <textarea class="form-control" name="message" rows="3" placeholder="Message"></textarea>
              </div>
              <div class="mt-2 text-center"><button type="submit" class="btn default-btn">Send Message</button></div>
            </form>
          </div>
    </div> 
  </div>
</section>
@push('script')
<script src="{{ asset('assets/vidiyal/plugins/select2/js/select2.min.js') }}"></script>
<script src="{{ asset('assets/vidiyal/js/tags.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script>
    $(document).ready(function() {
    $('#email-form').validate({
        rules: {
            name: {
                required: true,
                validation_name: true,
                maxlength: 191, 
            },
            email: {
                required: true,
                email: true,
                maxlength: 191, 
            },
            subject: {
                required: true,
                maxlength: 191,
                validation_name: true 
            },
            message: { 
                required: true,
                validation_name: true,
                maxlength: 800, 
            }
        },
        messages: {
            name: {
                required: '<span class="error-message">This field is required...!</span>',
            },
            email: {
                required: '<span class="error-message">This field is required...!</span>',
                email: '<span class="error-message">Please enter a valid email address.</span>'
            },
            subject: {
                required: '<span class="error-message">This field is required...!</span>',
                maxlength: '<span class="error-message">Make sure your entry is within 191 characters...!</span>',
            },
            message: {
                required: '<span class="error-message">This field is required...!</span>',
            },
        },
        errorClass: 'invalid',
        validClass: 'valid',
        errorElement: 'div',
        errorPlacement: function (error, element) {
            error.addClass('invalid-feedback');
            element.closest('.form-group').append(error);
        } 
    });

    $.validator.addMethod("validation_name", function (value, element) {
        return this.optional(element) || /^[a-zA-Z][a-zA-Z -]*$/i.test(value);
        // ^[a-zA-Z] checks that the first character is a letter
        // [a-zA-Z -]* checks that the rest of the characters are letters, spaces, or hyphens
    }, '<span class="error-message">Please enter alphabets, spaces, and hyphens only, without leading spaces.</span>');
});

</script>
@endpush