@extends('layouts.app', ['class' => 'bg-default'])
@push('header')
<link type="text/css" href="{{ asset('bctc') }}/css/datepicker.min.css" rel="stylesheet">
@endpush
@section('content')
<div class="header bg-gradient-primary py-7 py-lg-8">
  <div class="container">
    <div class="header-body text-center mt-7 mb-7">
      <div class="row justify-content-center">
        <div class="col-lg-5 col-md-6">
          <h1 class="text-white">{{ __('Welcome to the B.R.A.I.N. Cancer Foundation of the Treasure Coast Data Dashboard.') }}</h1>
          <p style="color:white;">If you, a loved one, or someone you know has been diagnosed with cancer in the Treasure Coast, share this link and have them sign up with our data center. Our research group is looking to provide evidence to prove possible cancer clusters developing in the local area.</p>
          <br>
          <h3 style="color:white;">JOIN THE FIGHT AGAINST CANCER CLUSTERS</h3>
        </div>
      </div>
    </div>
  </div>
  <div class="separator separator-bottom separator-skew zindex-100">
    <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
    </svg>
  </div>
</div>

<div class="container mt--10 pb-5"></div>


<!-- <div class="col-md-4">
      <div class="form-group">
        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
      </div>
    </div> -->


<form class="enquiry" id="enquiry">
  @csrf
  <div class="row">
    <div class="col col-md-2"></div>
    <div class="col-md-4">
      <div class="form-group">
        <input type="text" name="fname" placeholder="First Name" class="form-control" id="fname" required />
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <input type="text" name="lname" placeholder="Last Name" class="form-control" id="lname" required />
      </div>
    </div>
    <div class="col col-md-2"></div>
  </div>
  <div class="row">
    <div class="col col-md-2"></div>
    <div class="col-md-4">
      <div class="form-group">
        <input type="email" name="email" class="form-control" id="email" placeholder="name@example.com" required>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <input type="text" name="phone" class="form-control" id="phone" placeholder="Phone Number" required>
      </div>
    </div>
    <div class="col col-md-2"></div>
  </div>
  <!--<div class="row">
  <div class="col col-md-2"></div>
    <div class="col-md-4">
      <div class="form-group has-success">
        <input type="text" placeholder="Success" class="form-control is-valid" />
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group has-danger">
        <input type="email" placeholder="Error Input" class="form-control is-invalid" />
      </div>
    </div>
    <div class="col col-md-2"></div>
  </div>-->
  <div class="row">
    <div class="col col-md-2"></div>
    <div class="col-md-4">
      <div class="form-group">
        <!-- <input type="text" placeholder="Age" class="form-control" /> -->
        <input name="age" id="age" class="form-control datepicker2" value="Enter your date of birth" required>


      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <!-- <input type="text" placeholder="Type of cancer" class="form-control" /> -->
        <select name="cancer" id="type" class="form-control" required>
          <option value="">Type of Cancer</option>
          @foreach($cancers as $cancer)
          <option value="{{$cancer->id}}">{{$cancer->name}}</option>
          @endforeach
        </select>
      </div>
    </div>

    <div class="col col-md-2"></div>
  </div>

  <div class="row">
    <div class="col col-md-2"></div>
    <div class="col-md-4">
      <div class="form-group">
        <input type="text" name="address" id="address" placeholder="Address" class="form-control" required />
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <input type="text" id="state" name="state" placeholder="States" class="form-control" required />
      </div>
    </div>
    <div class="col col-md-2"></div>
  </div>

  <div class="row">
    <div class="col col-md-2"></div>
    <div class="col-md-4">
      <div class="form-group">
        <input type="text" id="zip" name="zip" placeholder="Zip Code" class="form-control" required />
      </div>
    </div>

    <div class="col col-md-6">

    </div>
  </div>





  <!-- SUBMIT BUTTON -->
  <div class="row justify-content-center">
    <div class="col-md-4">
    <div class="alert alert-danger" style="display:none">
          <ul>
              @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
              @endforeach
          </ul>
      </div>
      <button type="submit" id="submit" class="btn btn-block btn-warning mb-3">SUBMIT INFORMATION</button>
      <div class="modal fade" id="modal-notification" tabindex="-1" role="dialog" aria-labelledby="modal-notification" aria-hidden="true">
        <div class="modal-dialog modal-danger modal-dialog-centered modal-" role="document">
          <div class="modal-content bg-gradient-danger">

            <div class="modal-header">
              <h6 class="modal-title" id="modal-title-notification">Your attention is required</h6>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>

            <div class="modal-body">

              <div class="py-3 text-center">
                <i class="ni ni-bell-55 ni-3x"></i>
                <h4 class="heading mt-4">IMPORATANT NOTICE:</h4>
                <p>By checking this box and submitting this information, I am in agreement with the following:<br>I am aware that I am disclosing my personal information and that it may be used for public educational purposes by the BRAIN Cancer Foundation of the Treasure Coast.</p>
              </div>
              <div class="custom-control custom-checkbox mb-3">
                <!--  <input type="checkbox" id="accept"> -->
                <input class="custom-control-input" id="accept" type="checkbox">
                <!-- <label >I Aceept Terms & Conditions</label> -->
                <label class="custom-control-label" for="accept">I Aceept Terms & Conditions</label>
              </div>

            </div>

            <div class="modal-footer">
              <button type="button" id="save" class="btn btn-white btn-save">Ok, Got it</button>
              <button type="button" class="btn btn-link text-white ml-auto" data-dismiss="modal">Close</button>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

</form>

@endsection

@push('js')
<script src="{{ asset('bctc') }}/js/datepicker.min.js"></script>
<script src="{{ asset('js/sweetalert.min.js') }}"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('.datepicker2').datepicker({
      format: 'yyyy-mm-dd',
      endDate: new Date()
    });

    var $submit = $("#save").hide(),
      $cbs = $('#accept').click(function() {
        $submit.toggle($cbs.is(":checked"));
      });
    $("#enquiry").validate({
      submitHandler: function(form) {
        $('#modal-notification').modal('show');
      },
      rules: {
        email: {
          required: true,
          email: true
        },
        lname: {
          required: true,
        },
        fname: {
          required: true,
        },
        phone: {
          required: true,
          number: true,
          minlength: 10,
        },
        age: {
          required: true,
          // date: true
        },
        cancer: {
          required: true,
        },
        address: {
          required: true,

        },
        zip: {
          required: true,
          number: true,
          minlength: 5,
          maxlength: 5
        },
        state: {
          required: true,
        },

      },
      messages: {
        email: "Please enter a valid email address",
        lname: "Please enter a last name",
        fname: "Please enter a first name",
        phone: "Please enter a valid phone number",
        age: "Please select your date of birth",
        cancer: "Please select a type of cancer",
        address: "Your address is required",
        zip: "Your valid postal code is required",
        state: "Please enter your state",

      }
    });
    $("#save").click(function(e) {

      // e.preventDefault();
      $('.alert-danger').hide();
      $('.alert-danger').html('');
      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });
      var fname = $("#fname").val();
      var lname = $("#lname").val();
      var email = $("#email").val();
      var phone = $("#phone").val();
      var age = $("#age").val();
      var type = $("#type").val();
      var address = $("#address").val();
      var state = $("#state").val();
      var zip = $("#zip").val();

      $.ajax({
        type: 'POST',
        url: "{{ route('addEnquiry') }}",

        data: {
          fname: fname,
          lname: lname,
          email: email,
          phone: phone,
          age: age,
          type: type,
          address: address,
          state: state,
          zip: zip,
        },
        success: function(data) { 
          $('#modal-notification').modal('hide');
          if (data == 'success') {
            $("#enquiry").trigger("reset");
            swal({
              title: "Success !",
              text: "Thank you , Your information has been submitted successfully",
              icon: "success",
              timer: 2000,
              buttons: false,
            });
            window.location.replace("http://www.braincancertc.org/");
          }else{
            swal({
              title: "Error !",
              text: "Something internal error happened please try again",
              icon: "error",
              timer: 2000,
              buttons: false,
            });
          }

        },
        error: function(request, status, error) {
          $('#modal-notification').modal('hide');
          json = $.parseJSON(request.responseText);
          $.each(json.errors, function(key, value) {
            $('.alert-danger').show();
            $('.alert-danger').append('<p>' + value + '</p>');
          })
        }
      });
    });


  });
</script>
@endpush