@extends('layouts.app')

@push('style')
  

 
  <style>
@media only screen and(max-width: 525px)  {
    .custom-select{
        width: 100%;
    }
}
@media only screen and(min-width: 769px)  {
      .input-group {
      
      width:200px;
  }
  .input-group-text {
    min-width:260px;
  /*  max-width:200px;*/
  }
}

form {
  position: relative;
  
}
.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0.5;
  transform: translate(-50%, -50%);
}
      </style>
  @endpush

@section('content')  
           
<div id="registerForm" class="mt-2"> 
    
    <div class="mb-3 col-sm-12 col-md-12 col-xl-10 mx-auto">
    <div class=" mx-auto justify-content-center  col-sm-11 ps-2 mx-auto">
    <div class="returnmessage d-none alert alert-success mt-0 text-center h4">  </div>
        <h2 class="lead1"> {{__('applabels.contactMessageHeader')}} </h2>
        <div class="lead   mt-4"> {{__('applabels.contactMessage')}} </div>
    </div>
    <form action="{{ route('request.send') }}" method="POST" id="requestForm" class="d-inline  fs-6 needs-validation"> 

    <input type='hidden' name='users_id'   value='{{ $userId }}' >
    <input type='hidden' name='pages_id'  value='{{ $pagesId }}' > 
    <div class="d-flex mx-auto justify-content-center  mb-3 col-sm-12 mx-auto">
                    <div class="input-group justify-content-center flex-nowrap  ">
                        <label class="input-group-text col-sm-4" for="name">{{ __('applabels.name') }}</label> 
                        <input class="form-control item col-sm-8"   type='text' name='name'   value='' required>
                        <div class="invalid-feedback"> </div>  
                    </div>
                </div>
        <div class="d-flex mx-auto justify-content-center  mb-3 col-sm-12 mx-auto">
                    <div class="input-group justify-content-center flex-nowrap  ">
                        <label class="input-group-text col-sm-4" for="email">{{ __('applabels.email') }}</label> 
                        <input class="form-control item col-sm-8"   type='email' name='email'   value='' required>
                        <div class="invalid-feedback"> </div>  
                    </div>
                </div>
             
           
            <div class="d-flex mx-auto justify-content-center   mb-3 col-sm-12 mx-auto   " id="">
                
                <div class="input-group  justify-content-center flex-nowrap col-sm-12">
                    <label class="input-group-text col-sm-4" for="type"  > {{ __('applabels.subject') }}</label>
                    <select class="custom-select w-75 ps-2" name="type" id="type" required>
                          <option value="" selected disabled>{{ __('applabels.Choose...') }}</option>
                          <option value="Suggest a Feature" {{ ($subject == 'feature' ? 'selected' : '') }} >Suggest a Feature</option>
                          <option value="Report a Bug" {{ ($subject == 'bug' ? 'selected' : '') }} >Report a Bug</option>
                          <option value="Other issue"  >Other issue</option>
                    </select>
                    
                </div>
            </div>
            <div class="d-flex mx-auto justify-content-center   mb-3 col-sm-12 mx-auto   " id="">
                
                <div class="input-group  justify-content-center flex-nowrap col-sm-12">
                    <label class="input-group-text col-sm-4" for="message"  > {{ __('applabels.message') }}</label>
                    <textarea class="form-control" aria-label="With textarea" id="message" name="message"></textarea>

                </div>
            </div>
            
           
            <div class="d-flex pt-2 flex-row bd-highlight justify-content-center mb-2 col-sm-12 col-md-12 col-xl-12 mx-auto">
                <div class="input-group justify-content-center flex-nowrap ">
                    <button type="submit" id="btnsend" class="btn btn-primary col-12"> {{ __('applabels.send') }}</button>
                </div>
            </div>
        </div>
    </form>
 
</div>
<div class="overlay d-none" id="loading" >
    <div class="d-flex justify-content-center">
      <div class="spinner-border"  style="width: 4rem; height: 4rem;" role="status" >
        <span class="sr-only">Loading...</span>
      </div>
    </div>
  </div>


@endsection
    @push('scripts')   
    

    <script type="text/javascript">  
       $(document).on('submit',"#requestForm" , function(e) {  
            
                e.preventDefault();
                var formData = $(requestForm).serializeArray();
                console.log(formData);
                $('#loading').removeClass('d-none' );
                $('#btnsend').prop("disabled", true);
                if ($("#requestForm")[0].checkValidity()) { 
                    $.ajax({
                        type: 'POST',
                        url: "{{ route('request.send') }}",
                        data: formData,
                        datatype: "json",
                        success: function(data) { 
                            console.log('success send'+data)
                            $('.returnmessage').empty(); $('.returnmessage').removeClass('d-none');
                            $('.returnmessage').html( "{{ __('applabels.messagesend') }}");
                            //$(requestForm).addClass('d-none')
                            $('#btnsend').prop("disabled", false);
                            $('#loading').addClass('d-none');
                            $('#requestForm')[0].reset();
                        },

                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            console.log(textStatus +  errorThrown);
                        }
                    })
                } else {
                    $("#requestForm")[0].reportValidity();
                }

            })
        
    </script>

    @endpush