@extends('frontLayouts.frontApp')

@section('headerContent')
    <div class="content">
        <h2>{{ __('lang.connect_with_us') }}</h2>
    </div>
@endsection
@section('class')
    our_culture contact_us
@endsection

@section('frontContent')

    <!-- Start Content Us Content -->
    <!-- MultiStep Form -->
    <section class="contact_us_content">
      <div class="container">
          @include('frontLayouts.messages')
        <form id="msform" method="post" action="{{ route('contact_us.store') }}">
            @csrf
          <div class="row">
            <div class="col-md-1">
              <!-- progressbar -->
              <ul id="progressbar">
                <li class="active" id="account"></li>
                <li id="personal"></li>
              </ul> <!-- fieldsets -->
            </div>
            <div class="col-md-11">
                <fieldset>
                    <div class="form-card">
                        <h2 class="fs-title">{{ __('lang.basic_information') }}</h2>
                        <div class="form-box">
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label">{{ __('lang.first_name') }}</label>
                                    <input type="text" class="form-control" min="3" max="200" name="f_name" id="f_name" value="{{ old('f_name',$data['f_name'] ?? '') }}" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">{{ __('lang.last_name') }}</label>
                                    <input type="text" class="form-control" min="3" max="200" name="l_name" id="l_name"  value="{{ old('l_name',$data['l_name'] ?? '') }}" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">{{ __('lang.email') }}</label>
                                    <input type="email" class="form-control" name="email" id="email" value="{{ old('email',$data['email'] ?? '') }}" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">{{ __('lang.phone') }}</label>
                                    <input type="tel" class="form-control" name="phone" id="phone" value="{{ old('phone',$data['phone'] ?? '') }}" min="7" max="15" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button name="next" class="next action-button btn btn-warning" value="Next Step">{{ __('lang.follow_up') }}</button>
                </fieldset>
                <fieldset class="two-fieldset">
                    <div class="form-card">
                        <h2 class="fs-title">{{ __('lang.content_message') }}</h2>
                        <div class="form-box">
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label">{{ __('lang.inquiry_type') }}</label>
                                    <select class="form-select form-control" id="type" aria-label="Default select example" name="type" required>
                                        <option selected disabled>{{ __('lang.inquiry_type') }}</option>
                                        <option value="الرحلات" {{ old('type','الرحلات' ? 'selected' : '') }}>{{ __('lang.trips') }}</option>
                                        <option value="الثقافات" {{ old('type','الثقافات' ? 'selected' : '') }}>{{ __('lang.cultures') }}</option>
                                        <option value="اخرى" {{ old('type','اخرى' ? 'selected' : '') }}>{{ __('lang.other') }}</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">{{ __('lang.subject') }}</label>
                                    <input type="text" name="title" class="form-control"  id="title" value="{{ old('title',$data['title'] ?? '') }}" required>
                                </div>
                                <div class="col-md-12">
                                    <label class="form-label">{{ __('lang.your_message') }}</label>
                                    <textarea class="form-control" name="message" id="message" rows="4" required>{{ old('message',$data['message'] ?? '') }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button name="make_payment" type="submit" class="next action-button btn btn-warning" disabled id="btn_send" value="Confirm">{{ __('lang.send') }}</button>
                    <button name="previous" class="previous action-button-previous btn btn-warning">{{ __('lang.previous') }}</button>
                </fieldset>
              <fieldset>
                  <div class="form-card">
                      <h2 class="fs-title text-center">{{ __('lang.done_successfully') }}</h2> <br><br>
                      <div class="row justify-content-center">
                          <div class="col-3"> <img style="margin: auto;" src="https://img.icons8.com/color/96/000000/ok--v2.png" class="fit-image"> </div>
                      </div> <br><br>
                      <div class="row justify-content-center">
                          <div class="col-7 text-center">
                              <h5>{{ __('lang.thank_you') }}</h5>
                          </div>
                      </div>
                  </div>
              </fieldset>
            </div>
          </div>

        </form>
      </div>
    </section>
    <!-- End Content Us Content -->
@endsection

@section('js')
    <script>

        $('.form-control').keyup(function (){
            if( $('#f_name').val() != '' && $('#l_name').val() != '' && $('#email').val() != '' && $('#title').val() != '' && $('#phone').val() != '' && $('#message').val() != '' && $('#type').val() != '' ){
                $('#btn_send').prop('disabled',false);
                $('.previous').prop('disabled',true);
            }
        })
    </script>
@endsection