@extends('layouts.app')

@section('content')
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="{{ asset('css/datepickerjs.css') }}">
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
    <form method="POST" class="userform" autocomplete="off" action="{{ route('users.store') }}" >
        @csrf

        <div class="form-group row">
            <label for="lastname" class="col-md-4 col-form-label text-md-right">First Name</label>
            <div class="col-md-6">
                <input id="firstname" autocomplete="off" type="text" class="form-control @error('firstname') is-invalid @enderror" name="firstname" value="{{ old('firstname') }}">
                @error('firstname')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>
        <div class="form-group row">
            <label for="lastname" class="col-md-4 col-form-label text-md-right">Last Name</label>
            <div class="col-md-6">
                <input id="lastname" autocomplete="off" type="text" class="form-control @error('lastname') is-invalid @enderror" name="lastname" value="{{ old('lastname') }}">
                @error('lastname')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>
        <div class="form-group row">
            <label for="email" class="col-md-4 col-form-label text-md-right">Email</label>
            <div class="col-md-6">
                <input id="email" autocomplete="off" type="text" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}">
                @error('email')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>
        <div class="form-group row">
            <label for="contact" class="col-md-4 col-form-label text-md-right">Contact No.</label>
            <div class="col-md-6">
                <input id="contact" autocomplete="off" type="text" class="form-control @error('contact') is-invalid @enderror" name="contact" value="{{ old('contact') }}">
                @error('contact')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>
        <div class="form-group row">
            <label for="address" class="col-md-4 col-form-label text-md-right">Adress</label>
            <div class="col-md-6">
                <input id="address" autocomplete="off" type="text" class="form-control @error('address') is-invalid @enderror" name="address" value="{{ old('address') }}">
                @error('address')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>
        <div class="form-group row">
            <label for="birthdate" class="col-md-4 col-form-label text-md-right">Birth Date</label>
            <div class="col-md-6">
                <input id="birthdate" autocomplete="off" type="text" class="form-control @error('birthdate') is-invalid @enderror" name="birthdate" value="{{ old('birthdate') }}">
                @error('birthdate')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>
        <div class="form-group row">
            <label for="account_number" class="col-md-4 col-form-label text-md-right">Account No.</label>
            <div class="col-md-6">
                <input id="account_number" autocomplete="off" type="text" class="form-control @error('account_number') is-invalid @enderror" name="account_number" value="{{ old('account_number') }}">
                @error('account_number')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>
        <div class="form-group row mb-0">
            <div class="col-md-6 offset-md-4">
                <input class="btn btn-sm btn-primary " type="submit" value="Add" >
            </div>
        </div>
    </form>
        </div>
    </div>
</div>
@endsection
@section('script')
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="{{ asset('js/jquery.validate.js') }}"></script>
<script>
$(document).ready(function () {
    $("#birthdate").datepicker({
        dateFormat: "dd-mm-yy",
        minDate: 0,
    });
    /*======================= Form Start =========================== */
    $('.userform').validate({
        rules: {
            "firstname": {
                required: true,
            },"lastname": {
                required: true,
            }, "email": {
                required: true
            }, "contact": {
                required: true
            }, "address": {
                required: true
            }, "birthdate": {
                required: true
            }, "account_number": {
                required: true
            }
        },
        messages: {
            "firstname": {
                required: "Please Enter First Name",
            },"lastname": {
                required: "Please Enter Last Name",
            }, "email": {
                required: "Please Enter Email",
            }, "contact": {
                required: "Please Enter Contact No"
            }, "address": {
                required: "Please Enter Address"
            }, "birthdate": {
                required: "Please Select Birth Data"
            }, "account_number": {
                required: "Please Enter Account Number"
            }
        },
    });
});
</script>
@endsection