@extends('backend.layouts.app')

@section('title',__('label.create_chaturmas_date_page_title').' | '.env('APP_NAME'))

@push('after-styles')
@endpush

@section('breadcrumb')
    <div class="subheader py-2 py-lg-4 subheader-solid" id="kt_subheader">
        <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
            <!--begin::Info-->
            <div class="d-flex align-items-center flex-wrap mr-1">
                <!--begin::Page Heading-->
                <div class="d-flex align-items-baseline mr-5">
                    <!--begin::Page Title-->
                    <!--end::Page Title-->
                    <!--begin::Breadcrumb-->
                   <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                        <li class="breadcrumb-item active">
                            <a href="{{ route('admin.dashboard') }}" class="text-muted">{{ __('breadcrumb.dashboard') }}</a>
                        </li>    
                        <li class="breadcrumb-item active">
                            <a href="{{ route('admin.chaturmas-date.index') }}" class="text-muted">{{ __('breadcrumb.chaturmas_dates') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            {{ __('breadcrumb.add_chaturmas') }}
                        </li>
                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page Heading-->
            </div>
            <!--end::Info-->
        </div>
    </div>
@endsection

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-custom">
                    <div class="card-header">
                        <h3 class="card-title">
                            {{ __('label.create_chaturmas_date_form_title') }}
                        </h3>
                        <div class="card-toolbar">
                            <div class="example-tools justify-content-center">
                                <span class="example-toggle" data-toggle="tooltip" title="View code"></span>
                                <span class="example-copy" data-toggle="tooltip" title="Copy code"></span>
                            </div>
                        </div>
                    </div>
                    <!--begin::Form-->
                    {{ Form::open(['route' => 'admin.chaturmas-date.store','id' => 'createJatiForm', 'files' => true]) }}
                        @include('backend.chaturmas-date.partials._form')
                    {{ Form::close() }}

                    <!--end::Form-->
                </div>
            </div>
        </div>
    </div>
@endsection

@section('after-scripts')
@component('backend.layouts.components.validation')@endcomponent
<script>
        function demo1() {
            $(".allow-numeric").on("keypress keyup blur",function (event) {    
                $(this).val($(this).val().replace(/[^\d].+/, ""));

                if ((event.which < 48 || event.which > 57)) {
                    $(".error").css("display", "inline");
                    event.preventDefault();
                }else{
                    $(".error").css("display", "none");
                }
            });

            $.validator.addMethod('validDate', function (value, element) {
                return this.optional(element) || /^(0?[1-9]|1[012])[ /](0?[1-9]|[12][0-9]|3[01])[ /][0-9]{4}$/.test(value);
            }, 'Please provide a date in the mm/dd/yyyy format');

            $.validator.addMethod('dateBefore', function (value, element, params) {
                // if end date is valid, validate it as well
                var end = $(params);
                if (!end.data('validation.running')) {
                    $(element).data('validation.running', true);
                    setTimeout($.proxy(

                    function () {
                        this.element(end);
                    }, this), 0);
                    // Ensure clearing the 'flag' happens after the validation of 'end' to prevent endless looping
                    setTimeout(function () {
                        $(element).data('validation.running', false);
                    }, 0);
                }
                return this.optional(element) || this.optional(end[0]) || new Date(value) < new Date(end.val());

            }, 'Must be before corresponding to date');

            $.validator.addMethod('dateAfter', function (value, element, params) {
                // if start date is valid, validate it as well
                var start = $(params);
                if (!start.data('validation.running')) {
                    $(element).data('validation.running', true);
                    setTimeout($.proxy(

                    function () {
                        this.element(start);
                    }, this), 0);
                    setTimeout(function () {
                        $(element).data('validation.running', false);
                    }, 0);
                }
                return this.optional(element) || this.optional(start[0]) || new Date(value) > new Date($(params).val());

            }, 'Must be after corresponding from date');
        }

        $("#year").datepicker({
            format: "yyyy",
            viewMode: "years", 
            minViewMode: "years",
            orientation: "bottom",
        });
        
        $(document).ready(function () {
            demo1();
            $("#createJatiForm").validate({
                errorClass: 'is-invalid',
                normalizer: function(value) {
                    return $.trim(value);
                },
                rules: {
                    year: {
                        required: true,
                    },
                    from: {
                        dateBefore: '#to',
                        required: true
                    },
                    to: {
                        dateAfter: '#from',
                        required: true
                    }
                },
                onfocusout: function(element) {
                    // "eager" validation
                    // this.element(element);
                },
                errorPlacement: function ( error, element ) {
                    if(element.parent().hasClass('input-group')){
                        error.insertAfter( element.parent() );
                    } else{
                        error.insertAfter( element );
                    }
                }
            });
        });
    </script>
@endsection