@extends('layouts.app')

@section('title')

Section Editor

@parent

@stop

{{-- page level styles --}}

@section('header_styles')
<!--page level css -->
<link href="{{ asset('assets/vendors/select2/css/select2.min.css') }}" type="text/css" rel="stylesheet">
<link href="{{ asset('assets/vendors/select2/css/select2-bootstrap.css') }}" rel="stylesheet">
<!--end of page level css-->
@stop
@section('content')
<main>
  <section>
    <div class="container">
      <div class="row">
        <div class="col-12">
          <h2 class="h2">Section Editor</h2>
          <hr>
        </div>
        <div class="col-12">
          <div class="card">
            <div class="card-body">
              <form name="first" method="post" action="{{ route('call_for_section_editor') }}" enctype="multipart/form-data">
                @csrf
                <div class="row">
                  <div class="col-md-12">

                    @if ($errors->any())
                    <div class="form-row">
                      <div class="col-md-12 alert alert-danger px-3 pt-3">
                        <strong>Whoops!</strong> There were some problems with your input.<br>
                        <ul class="px-3 pt-2 m-0 ">
                          @foreach ($errors->all() as $error)
                          <li>{{ $error }}</li>
                          @endforeach
                        </ul>
                      </div>
                    </div>
                    @endif

                    @if ($message = Session::get('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                      {!! $message !!}
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    @endif

                    <div class="form-row">
                      <div class="form-group col-md-4">
                        <label for="edit-last_name">Title: *</label>
                        <select class="form-control w-100" id="title" name="title" required='required'>
                          <option value="Mr." @if(old('title')=='Mr.' ) {{ 'selected' }} @endif>Mr. </option>
                          <option value="Mrs." @if(old('title')=='Mrs.' ) {{ 'selected' }} @endif>Mrs.</option>
                          <option value="Ms." @if(old('title')=='Ms.' ) {{ 'selected' }} @endif>Ms</option>
                          <option value="Prof." @if(old('title')=='Prof.' ) {{ 'selected' }} @endif>Prof.</option>
                          <option value="Dr." @if(old('title')=='Dr.' ) {{ 'selected' }} @endif>Dr.</option>
                        </select>
                      </div>

                      <div class="form-group col-md-4">
                        <label class="control-label">First Name: *</label>
                        <input type="text" maxlength="50" name="first_name" size="60" value="{{ old("first_name") }}" class="form-control" required="required">
                      </div>

                      <div class="form-group col-md-4">
                        <label for="edit-last_name">Last Name: *</label>
                        <input type="text" maxlength="100" name="last_name" id="" size="60" value="{{ old("last_name") }}" class="form-control" required="required">
                      </div>

                      <div class="form-group col-md-4">
                        <label for="edit-email">Email: *</label>
                        <input type="email" maxlength="50" name="email" id="" size="60" value="{{ old("email") }}" class="form-control" required="required">
                      </div>

                      <div class="form-group col-md-4">
                        <label class="control-label">City: *</label>
                        <input type="text" maxlength="50" name="city" size="60" value="{{ old("city") }}" class="form-control" required="required">
                      </div>

                      <div class="form-group col-md-4">
                        <label for="edit-last_name">Country: *</label>
                        <select class="form-control w-100" id="country" name="country" required='required'>
                          <option value="">Country</option>
                          @foreach ($country as $countries)
                          <option value="{{$countries->printable_name}}" {{ old("country") == $countries->printable_name ? "selected" : "" }}> {{$countries->printable_name}}</option>
                          @endforeach
                        </select>
                      </div>

                      <div class="form-group col-md-12">
                        <label for="edit-email">Field of expertise: *</label>
                        <input type="text" maxlength="50" name="expertise" id="" size="60" value="{{ old("expertise") }}" class="form-control" required="required">
                      </div>

                      <div class="form-group col-md-12">
                        <label for="edit-email">Comments:</label>
                        <textarea cols="60" rows="3" name="comments" id="edit-comments" class="form-control">{{ old('comments') }}</textarea>
                      </div>

                      <div class="form-group col-md-12">
                        <div class="input-group mb-3">
                          <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroupFileAddon01">Upload CV</span>
                          </div>
                          <div class="custom-file">
                            <input type="file" name="cv[]" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01" accept=".png,.gif,.jpg,.jpeg,.pdf,.doc,.docx">
                            <label class="custom-file-label mt-0" for="inputGroupFile01">Choose file</label>
                          </div>
                        </div>
                        <p class="text-danger">Upload only WORD or PDF file!</p>
                      </div>

                      <div class="form-group col-md-12">

                        <div class="row">
                          <div class="col-12 d-flex justify-content-center">
                            <div class="captcha">
                              <span>{!! captcha_img() !!}</span>
                            </div>
                            <button type="button" class="btn btn-danger ml-2" class="refresh-captcha" id="refresh-captcha">
                              &#x21bb;
                            </button>
                          </div>
                          <div class="form-group my-2 mx-auto col-8 col-md-3 col-lg-2">
                            <input id="captcha" type="text" class="form-control" placeholder="Enter Captcha" name="captcha" required="required">
                            @if ($errors->has('captcha'))

                            <span class="invalid-feedback" style="display: block;">

                              <strong>{{ $errors->first('captcha') }}</strong>

                            </span>

                            @endif
                          </div>
                        </div>

                      </div>

                    </div>
                    <hr>
                  </div>
                  <div class="col-md-9 text-center m-auto">
                    <input class="btn btn-dark" name="section_editor" type="submit" value="Submit">
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

<!----Main Section Ends---->
@endsection
{{-- page level scripts --}}
@section('footer_scripts')
<script src="{!! asset('assets/vendors/select2/js/select2.js') !!}"></script>
<script src="{!! asset('js/filter.js') !!}"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
  $("#country").select2({
    theme: "bootstrap",
    placeholder: "Select Country",
    width: '100%',
    height: '50px'
  });
</script>
<script>
  $('#inputGroupFile01').on('change', function() {
    //get the file name
    var fileName = $(this).val();
    //replace the "Choose a file" label
    $(this).next('.custom-file-label').html(fileName);
  })
</script>
@stop