@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="periodeditform" autocomplete="off" action="{{ route('periodmaster.update',$period_master->id) }}">
        @csrf
        @method('PUT')
        <div class="form-group row">
            <label for="name" class="col-md-4 col-form-label text-md-right">Start Date</label>
            <div class="col-md-6">
                <input id="datepickerstartDate" autocomplete="off" type="text" class="form-control @error('start_date') is-invalid @enderror" name="start_date" value="{{ filled($period_master->start_date)? date('d-m-Y',strtotime($period_master->start_date)) : ''}}">
                @error('start_date')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>
        <div class="form-group row">
            <label for="name" class="col-md-4 col-form-label text-md-right">End Date</label>
            <div class="col-md-6">
                <input id="datepickerendDate" autocomplete="off" type="text" class="form-control @error('end_date') is-invalid @enderror" name="end_date" value="{{filled($period_master->end_date) ? date('d-m-Y',strtotime($period_master->end_date))  : ''}}">

                @error('end_date')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>
        <div class="form-group row">
            <label for="name" class="col-md-4 col-form-label text-md-right">Period Name</label>
            <div class="col-md-6">
                <input id="period_name" autocomplete="off" type="text" class="form-control @error('period_name') is-invalid @enderror" name="period_name" value="{{ $period_master->period_name }}">
                @error('period_name')
                    <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="Update" >
            </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 () {
        $("#datepickerstartDate").datepicker({
        dateFormat: "dd-mm-yy",
        minDate: 0,
        onSelect: function (date) {
            var dt2 = $('#datepickerendDate');
            var startDate = $(this).datepicker('getDate');
            var minDate = $(this).datepicker('getDate');
            dt2.datepicker('setDate', minDate);
            startDate.setDate(startDate.getDate() + 365);
            //sets dt2 maxDate to the last day of 365 days window
            dt2.datepicker('option', 'maxDate', startDate);
            dt2.datepicker('option', 'minDate', minDate);
            $(this).datepicker('option', 'minDate', minDate);
        }
    });
    $('#datepickerendDate').datepicker({
        dateFormat: "dd-mm-yy"
    });

    /*======================= Form Start =========================== */
    $('.periodeditform').validate({
        rules: {
            "start_date": {
                required: true,
            },"end_date": {
                required: true,
                greaterThan:"#datepickerstartDate"
            }, "period_name": {
                required: true
            }
        },
        messages: {
            "start_date":{
                required: "Please Enter Strat Date"   
            }, "end_date": {
                required: "Please Enter End Date",
            }, "period_name": {
                required: "Please Enter Period Name",
            }
        },
    });
});
</script>
@endsection