@extends('layouts.app')
@section('content')
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h3 class="text-themecolor">Therapy List</h3>
    </div>
    <div class="col-md-7 align-self-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ action('HomeController@index') }}">Home</a></li>
            <li class="breadcrumb-item active">Therapy List</li>
        </ol>
    </div>

</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="card">
<div class="card-body">
<form id="CustomerForm" name="CustomerForm" class="form-horizontal" autocomplete="off">
          @csrf
           <input type="hidden" name="id" id="faqid">
            <div class="form-group">
                <label for="name" class="col-sm-6 control-label">Name</label>
                <div class="col-sm-12">
                    <input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" value="" maxlength="50" required="">
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-sm-6 control-label">Date of Birth</label>
                <div class="col-sm-12">
                    <input type="date" class="form-control" id="dob" name="dob" placeholder="Date Of Birth" value="" maxlength="50" required="">
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-sm-6 control-label">Email</label>
                <div class="col-sm-12">
                    <input type="email" class="form-control" id="email" name="email" placeholder="Enter Your Email Id" value="" maxlength="50" required="">
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-sm-6 control-label">Address</label>
                <div class="col-sm-12">
                    <textarea class="form-control" id="address" name="address" placeholder="Enter Your Address"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-sm-6 control-label">City</label>
                <div class="col-sm-12">
                    <input type="text" class="form-control" id="city" name="city" placeholder="City" value="" maxlength="50" required="">
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-sm-6 control-label">Country</label>
                <div class="col-sm-12">
                    <input type="text" class="form-control" id="country" name="country" placeholder="country" value="" maxlength="50" required="">
                </div>
            </div>
            <div class="col-sm-offset-2 col-sm-10">
             <button type="submit" class="btn btn-primary" id="btn-save" value="create">Save changes
             </button>
             <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function ()
{
    var token = $("input[name='_token']").val();
		$.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      		}
          });
          if ($("#CustomerForm").length > 0) {
    $("#CustomerForm").validate({

    rules: {
      name: {
        required: true,
        maxlength: 50
      },

        email: {
                required: true,
                maxlength: 50,
                email: true,

            },
            dob:
                {
                  required: true
                },
                address:
                {
                    required: true,
                    minlength: 3,
                    maxlength: 100
                },
                city:
                {
                   required: true,
                },
                country:
                {
                    required: true,
                },

    },
    messages: {

      name: {
        required: "Please enter name",
        maxlength: "Your last name maxlength should be 50 characters long."
      },
      email: {
          required: "Please enter valid email",
          email: "Please enter valid email",
          maxlength: "The email name should less than or equal to 50 characters",

        },
        dob:
                    {
                      required:"Please Enter Your Date of Birth",
                    },
                    address:
                    {
                        required: "Please Enter Address",
                        minlength: "Your name minlength should be 3 characters.",
                        maxlength: "Your name maxlength should be 50 characters long."
                    },
                    city:
                    {
                        required: "Please Select Yout City",
                    },
                    country:
                    {
                        required: "Please Select Yout State",
                    },

    },
    submitHandler: function(form) {
      $('#btn-save').html('Sending..');
      $.ajax({
        url: "{{ url('/get-customer-list/store')}}",
        type: "POST",
        data: $('#CustomerForm').serialize(),
        dataType: "json",
        success: function( response )
        {
              $('#CustomerForm').trigger("reset");
              $('#ajax-Customer-modal').modal('hide');
              $('#btn-save').html('Save Changes');
                location.reload();          
        },
    error: function (response)
        {
            console.log('Error:', response);
              $('#CustomerForm').html(response);
              $('#btn-save').html('Save Changes');
    }
      });
    }
  })
}
});
</script>
@endsection