@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10">

            <div class="card px-3">
                <div class="card-body">
                    <div class="card px-3 alert alert-danger">
                        <div class="card-body">
                            <button class="btn btn-sm btn-primary" onclick="window.history.back();">< Back</button>
                            <div class="text-center">
                                <p class="my_header_1">Set Today's Local Date Before Continuing</p>
                                <br>
                            </div>

                            <form action="{{ route('saveDate') }}" method="post" name="saveDateForm">
                                @csrf
                                <div class="form-group row">
                                    <label for="localDate" class="col-sm-2 col-form-label"><b>Set Local Date</b></label>
                                    <div class="col-sm-4">
                                        <input type="text" name="localDate" id="localDate" class="form-control text-center"
                                                maxlength="10" minlength="10"
                                                placeholder="13/11/2016"
                                                autocomplete="off"
                                                oninput="validateLocalDate(this)" required>
                                        <br>
                                        <span id="date_msg_box"></span>
                                    </div>
                                    <div class="col-sm-2">
                                        <button type="submit" class="btn btn-warning">Save Date</button>
                                    </div>
                                </div>
                            </form>
                            <br>
                            <p>Correct Date Format is <b>dd/mm/yyyy.</b></p>
                        </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function validateLocalDate(input)
    {
        var val = input.value;
        if (val.length == 10)
        {
            $("#date_msg_box").html('Output:- ' +val+" E.C");
        }
    }
</script>
@endsection