@extends('backend.master')

@section('title')
    {{ ___('common.dashboard') }}
@endsection

@section('content')
    <div class="page-content">




        <form method="post" action="{{route('apply.form')}}" id="general-info-form" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="form_type" value="general-info">
        <div class="row g-4">
            <div class="col-12">
                @include('backend.applications.school.tabs') <!-- sidebar -->
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        {{-- content  --}}
                        <div class="col-12 table-content table-basic mb_30">
                            <div class="card">
                                <div class="card-header"><h4>{{___("school.General information")}}</h4></div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-xl-6 col-lg-6 mb_20">
                                          <label for="inputname" class="form-label text-capitalize">{{___("school.School address")}} <span class="text-danger">*</span></label>
                                          <input type="text" name="school_address" class="form-control ot-input min_width_200 @error('school_address') is-invalid @enderror" placeholder="" value="{{ old('school_address', @$data['item']->school_address) }}" readonly>
                                          @error('school_address')
                                              <div id="validationServer04Feedback" class="invalid-feedback">
                                                  {{ $message }}
                                              </div>
                                          @enderror
                                        </div>
                                        <div class="col-xl-6 col-lg-6 mb_20 ">
                                            <label for="inputname" class="form-label text-capitalize">{{___("school.School establishment year")}}  <span class="text-danger">*</span></label>
                                            <div class="c-datepicker-date-editor c-datepicker-single-editor J-yearPicker-single">
                                                <input type="text" readonly type="range"  name="school_establishment_year" class="form-control ot-input w-100  @error('school_establishment_year') is-invalid @enderror" placeholder="" value="{{ old('school_establishment_year', @$data['item']->school_establishment_year) }}" readonly>
                                                @error('school_establishment_year')
                                                    <div id="validationServer04Feedback" class="invalid-feedback">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-xl-6 col-lg-6 mb_20">
                                            <label for="inputname" class="form-label text-capitalize">{{___("school.Date of first commencement of school")}} <span class="text-danger">*</span></label>
                                            <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-day">
                                                {{-- <i class="c-datepicker-range__icon kxiconfont icon-clock"></i> --}}
                                                <input type="text" readonly name="date_of_first_commencement_of_school" class="form-control ot-input  only-date @error('date_of_first_commencement_of_school') is-invalid @enderror" placeholder="" value="{{ old('date_of_first_commencement_of_school', @$data['item']->date_of_first_commencement_of_school) }}" readonly>
                                                @error('date_of_first_commencement_of_school')
                                                    <div id="validationServer04Feedback" class="invalid-feedback">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-xl-6 col-lg-6 mb_20">
                                            <label for="inputname" class="form-label text-capitalize">{{___("school.School academic session")}} <span class="text-danger">*</span></label>
                                            <input type="text" name="school_academic_session" class="form-control ot-input min_width_200 @error('school_academic_session') is-invalid @enderror" placeholder="" value="{{ old('school_academic_session', @$data['item']->school_academic_session) }}" readonly>
                                            @error('school_academic_session')
                                                <div id="validationServer04Feedback" class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                        <div class="col-xl-6 col-lg-6 mb_20">
                                            <label for="inputname" class="form-label text-capitalize">{{___("school.School Time - full time")}} <span class="text-danger">*</span></label>
                                            <div class="timerange">
                                              <input type="text" readonly name="school_time_full_time" class="form-control ot-input min_width_200 @error('school_time_full_time') is-invalid @enderror" placeholder="" value="{{ old('school_time_full_time', @$data['item']->school_time_full_time) }}" readonly>
                                              @error('school_time_full_time')
                                                  <div id="validationServer04Feedback" class="invalid-feedback">
                                                      {{ $message }}
                                                  </div>
                                              @enderror
                                            </div>
                                        </div>

                                        <div class="col-xl-6 col-lg-6 mb_20">
                                            <label for="inputname" class="form-label text-capitalize">{{___("school.School Time - Half time")}} <span class="text-danger">*</span></label>
                                            <div class="timerange">
                                                <input type="text" readonly name="school_time_half_time" class="form-control ot-input min_width_200 @error('school_time_half_time') is-invalid @enderror" placeholder="" value="{{ old('school_time_half_time', @$data['item']->school_time_half_time) }}" readonly>
                                                @error('school_time_half_time')
                                                    <div id="validationServer04Feedback" class="invalid-feedback">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                            </div>

                                        </div>
                                        <div class="col-xl-6 col-lg-6 mb_20">
                                            <label for="inputname" class="form-label text-capitalize">{{___("school.Academic learning time for each class")}} <span class="text-danger">*</span></label>

                                            <div class="timerange">
                                                <input type="text" readonly name="academic_learning_time_for_each_class" class="form-control ot-input min_width_200 @error('academic_learning_time_for_each_class') is-invalid @enderror" placeholder="" value="{{ old('academic_learning_time_for_each_class', @$data['item']->academic_learning_time_for_each_class) }}" readonly>
                                                @error('academic_learning_time_for_each_class')
                                                    <div id="validationServer04Feedback" class="invalid-feedback">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-xl-6 col-lg-6 mb_20">
                                            <label for="inputname" class="form-label text-capitalize">{{___("school.Lunch time for each class")}} <span class="text-danger">*</span></label>

                                            <div class="timerange">
                                              <input type="text" readonly name="lunch_time_for_each_class" class="form-control ot-input min_width_200 @error('lunch_time_for_each_class') is-invalid @enderror" placeholder="" value="{{ old('lunch_time_for_each_class', @$data['item']->lunch_time_for_each_class) }}" readonly>
                                              @error('lunch_time_for_each_class')
                                                  <div id="validationServer04Feedback" class="invalid-feedback">
                                                      {{ $message }}
                                                  </div>
                                              @enderror
                                          </div>
                                        </div>
                                        <div class="col-xl-6 col-lg-6 mb_20">
                                            <label for="inputname" class="form-label text-capitalize">{{___("school.Sports and physical education time for each class")}} <span class="text-danger">*</span></label>

                                            <div class="timerange">
                                                <input type="text" readonly name="sports_and_physical_education_time_for_each_class" class="form-control ot-input min_width_200 @error('sports_and_physical_education_time_for_each_class') is-invalid @enderror" placeholder="" value="{{ old('sports_and_physical_education_time_for_each_class', @$data['item']->sports_and_physical_education_time_for_each_class) }}" readonly>
                                                @error('sports_and_physical_education_time_for_each_class')
                                                    <div id="validationServer04Feedback" class="invalid-feedback">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-xl-6 col-lg-6 mb_20">
                                            <label for="inputname" class="form-label text-capitalize">{{___("school.Name of Trust Society Management Committee")}} <span class="text-danger">*</span></label>
                                            <input type="text" name="name_of_trust_society_management_committee" class="form-control ot-input min_width_200 @error('name_of_trust_society_management_committee') is-invalid @enderror" placeholder="" value="{{ old('name_of_trust_society_management_committee', @$data['item']->name_of_trust_society_management_committee) }}" readonly>
                                            @error('name_of_trust_society_management_committee')
                                                <div id="validationServer04Feedback" class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                        <div class="col-xl-6 col-lg-6 mb_20">
                                            <label for="inputname" class="form-label text-capitalize">{{___("school.Registration No")}} <span class="text-danger">*</span></label>
                                            <input type="number" name="registration_no" class="form-control ot-input min_width_200 @error('registration_no') is-invalid @enderror" placeholder="" value="{{ old('registration_no', @$data['item']->registration_no) }}" readonly>
                                            @error('school_academic_session')
                                                <div id="validationServer04Feedback" class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                        <div class="col-xl-6 col-lg-6 mb_20">
                                            <label for="inputname" class="form-label text-capitalize">{{___("school.Under the Societies Registration Act, 1860")}} <span class="text-danger">*</span></label>
                                            <input type="text" name="under_the_societies_registration_act_1860" class="form-control ot-input min_width_200 @error('under_the_societies_registration_act_1860') is-invalid @enderror" placeholder="" value="{{ old('under_the_societies_registration_act_1860', @$data['item']->under_the_societies_registration_act_1860) }}" readonly>
                                            @error('under_the_societies_registration_act_1860')
                                                <div id="validationServer04Feedback" class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                        <div class="col-xl-6 col-lg-6 mb_20">
                                            <label for="inputname" class="form-label text-capitalize">{{___("school.Under the Mumbai Public Trustee System Act, 1950")}} <span class="text-danger">*</span></label>
                                            <input type="text" name="under_the_mumbai_public_trustee_system_act_1950" class="form-control ot-input min_width_200 @error('under_the_mumbai_public_trustee_system_act_1950') is-invalid @enderror" placeholder="" value="{{ old('under_the_mumbai_public_trustee_system_act_1950', @$data['item']->under_the_mumbai_public_trustee_system_act_1950) }}" readonly>
                                            @error('under_the_mumbai_public_trustee_system_act_1950')
                                                <div id="validationServer04Feedback" class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                        <div class="col-xl-6 col-lg-6 mb_20 ">
                                          <label for="inputname" class="form-label text-capitalize">{{___("school.Till what period the registration of Trust Society Management Committee is valid")}}  <span class="text-danger">*</span></label>
                                          <div class="c-datepicker-date-editor c-datepicker-single-editor J-yearPicker-single">
                                              <input type="text" readonly type="range"  name="till_what_period_the_registration_of_trust" class="form-control ot-input w-100  @error('till_what_period_the_registration_of_trust') is-invalid @enderror" placeholder="" value="{{ old('till_what_period_the_registration_of_trust', @$data['item']->till_what_period_the_registration_of_trust) }}" readonly>
                                              @error('till_what_period_the_registration_of_trust')
                                                  <div id="validationServer04Feedback" class="invalid-feedback">
                                                      {{ $message }}
                                                  </div>
                                              @enderror
                                          </div>
                                        </div>


                                        <div class="col-xl-6 col-lg-6 mb_20">
                                            <label for="inputname" class="form-label text-capitalize">{{___("school.Is there evidence that the Trust / Society / Management / Committee is not privately owned? If the organization is not privately owned, a copy of the list of members with their addresses should be attached to the affidavit")}} <span class="text-danger">*</span></label>
                                            <input type="text" name="is_there_evidence_that_the_trust" class="form-control ot-input min_width_200 @error('is_there_evidence_that_the_trust') is-invalid @enderror" placeholder="" value="{{ old('is_there_evidence_that_the_trust', @$data['item']->is_there_evidence_that_the_trust) }}" readonly>
                                            @error('is_there_evidence_that_the_trust')
                                                <div id="validationServer04Feedback" class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 table-content table-basic mb_30 mb_30">
                            <div class="card">
                                <div class="card-header d-flex align-items-center gap-4 flex-wrap">
                                    <p class="m-0 flex-fill">{{(___("school.School name,and name, office address of Manager, Chairman,Secretary"))}}</p>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="table-responsive">
                                                <table class="table school_borderLess_table" id="school-user-info">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col">{{(___("school.Name"))}} <span class="text-danger">*</span>
                                                                @if($errors->any())
                                                                    @if ($errors->has('school_user_name.*'))
                                                                        <span class="custom-message">{{ 'the fields are required' }}
                                                                    @endif
                                                                @endif
                                                            </th>
                                                            <th scope="col">{{(___("school.Designation"))}} <span class="text-danger">*</span>
                                                                @if($errors->any())
                                                                    @if ($errors->has('school_user_degisnation.*'))
                                                                        <span class="custom-message">{{ 'the fields are required' }}
                                                                    @endif
                                                                @endif
                                                            </th>
                                                            <th scope="col">{{(___("school.Address"))}} <span class="text-danger">*</span>
                                                                @if($errors->any())
                                                                    @if ($errors->has('school_user_address.*'))
                                                                        <span class="custom-message">{{ 'the fields are required' }}
                                                                    @endif
                                                                @endif
                                                            </th>
                                                            <th scope="col">{{(___("school.Mobile number (office accomodation)"))}} <span class="text-danger">*</span>
                                                                @if($errors->any())
                                                                    @if ($errors->has('school_user_telephone.*'))
                                                                        <span class="custom-message">{{ 'the fields are required' }}
                                                                    @endif
                                                                @endif
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                            @foreach (@$data['item']->school_user_name as $key=>$item)
                                                            <tr>
                                                                <td>
                                                                    <input type="text" name="school_user_name[]" class="form-control ot-input min_width_200 " placeholder="" value="{{ @$data['item']->school_user_name[$key] }}" readonly>
                                                                </td>
                                                                <td>
                                                                    <input type="text" name="school_user_degisnation[]" class="form-control ot-input min_width_200 " placeholder="" value="{{ @$data['item']->school_user_degisnation[$key] }}" readonly>
                                                                </td>
                                                                <td>
                                                                    <input type="text" name="school_user_address[]" class="form-control ot-input min_width_200 " placeholder="" value="{{ @$data['item']->school_user_address[$key] }}" readonly>
                                                                </td>
                                                                <td>
                                                                  <input type="number" name="school_user_telephone[]" class="form-control ot-input min_width_200 " placeholder="" value="{{ @$data['item']->school_user_telephone[$key] }}" readonly>
                                                                    
                                                                </td>
                                                            </tr>
                                                            @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 table-content table-basic mb_10">
                            <div class="card">
                                <div class="card-header d-flex align-items-center gap-4 flex-wrap">
                                    <p class="m-0 flex-fill">{{___("school.Total income and expenditure for the last three years excluding balance or deficit")}}</p>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="table-responsive">
                                                <table class="table school_borderLess_table" id="total-income">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col">{{___("school.Year")}} <span class="text-danger">*</span>
                                                                @if($errors->any())
                                                                    @if ($errors->has('account_year.*'))
                                                                        <span class="custom-message">{{ 'the fields are required' }}
                                                                    @endif
                                                                @endif
                                                            </th>
                                                            <th scope="col">{{___("school.Income")}} <span class="text-danger">*</span>
                                                                @if($errors->any())
                                                                    @if ($errors->has('account_income.*'))
                                                                        <span class="custom-message">{{ 'the fields are required' }}
                                                                    @endif
                                                                @endif
                                                            </th>
                                                            <th scope="col">{{___("school.Expense")}} <span class="text-danger">*</span>
                                                                @if($errors->any())
                                                                    @if ($errors->has('account_expense.*'))
                                                                        <span class="custom-message">{{ 'the fields are required' }}
                                                                    @endif
                                                                @endif
                                                            </th>
                                                            <th scope="col">{{___("school.balance/deficit")}} <span class="text-danger">*</span>
                                                                @if($errors->any())
                                                                    @if ($errors->has('account_balance.*'))
                                                                        <span class="custom-message">{{ 'the fields are required' }}
                                                                    @endif
                                                                @endif
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                            @foreach (@$data['item']->account_year as $key=>$item)
                                                            <tr>
                                                                <td>
                                                                    <input type="number" step="any" name="account_year[]" class="form-control ot-input min_width_200 " placeholder="" value="{{ @$data['item']->account_year[$key] }}" readonly>
                                                                </td>
                                                                <td>
                                                                    <input type="number" step="any" name="account_income[]" class="form-control ot-input min_width_200 " placeholder="" value="{{ @$data['item']->account_income[$key] }}" readonly>
                                                                </td>
                                                                <td>
                                                                    <input type="number" step="any" name="account_expense[]" class="form-control ot-input min_width_200 " placeholder="" value="{{ @$data['item']->account_expense[$key] }}" readonly>
                                                                </td>
                                                                <td>
                                                                  <input type="number" step="any" name="account_balance[]" class="form-control ot-input min_width_200 " placeholder="" value="{{ @$data['item']->account_balance[$key] }}" readonly>
                                                                    
                                                                </td>
                                                            </tr>
                                                            @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- content  --}}
                    </div>
                </div>
            </div>
            
        </div>
        </form>
        <!-- table leave container end -->
    </div>
@endsection
@push('script')
    {{-- other  --}}
    {{-- <script src="https://code.jquery.com/jquery-1.12.4.min.js" crossorigin="anonymous"></script> --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src="{{ asset('backend') }}/assets/js/dateYearTime/datepicker.all.js"></script>
    <script src="{{ asset('backend') }}/assets/js/dateYearTime/datepicker.en.js"></script>
<script type="text/javascript">
    $(function(){
      $('.J-datepicker-time').datePicker({
        format: 'HH:mm:ss',
        min: '04:23:11',
        language: 'en'
      });
      $('.J-datepicker-time-range').datePicker({
        format: 'HH:mm:ss',
        isRange: true,
        min: '04:23:11',
        max: '20:59:59',
        language: 'en'
      });

      var DATAPICKERAPI = {
        activeMonthRange: function () {
          return {
            begin: moment().set({ 'date': 1, 'hour': 0, 'minute': 0, 'second': 0 }).format('YYYY-MM-DD HH:mm:ss'),
            end: moment().set({ 'hour': 23, 'minute': 59, 'second': 59 }).format('YYYY-MM-DD HH:mm:ss')
          }
        },
        shortcutMonth: function () {
          var nowDay = moment().get('date');
          var prevMonthFirstDay = moment().subtract(1, 'months').set({ 'date': 1 });
          var prevMonthDay = moment().diff(prevMonthFirstDay, 'days');
          return {
            now: '-' + nowDay + ',0',
            prev: '-' + prevMonthDay + ',-' + nowDay
          }
        },
        shortcutPrevHours: function (hour) {
          var nowDay = moment().get('date');
          var prevHours = moment().subtract(hour, 'hours');
          var prevDate=prevHours.get('date')- nowDay;
          var nowTime=moment().format('HH:mm:ss');
          var prevTime = prevHours.format('HH:mm:ss');
          return {
            day: prevDate + ',0',
            time: prevTime+',' + nowTime,
            name: 'Nearly '+ hour+' Hours'
          }
        },
        rangeMonthShortcutOption1: function () {
          var result = DATAPICKERAPI.shortcutMonth();
          var resultTime= DATAPICKERAPI.shortcutPrevHours(18);
          return [{
            name: 'Yesterday',
            day: '-1,-1',
            time: '00:00:00,23:59:59'
          }, {
            name: 'This Month',
            day: result.now,
            time: '00:00:00,'
          }, {
            name: 'Lasy Month',
            day: result.prev,
            time: '00:00:00,23:59:59'
          }, {
            name: resultTime.name,
            day: resultTime.day,
            time: resultTime.time
          }];
        },
        rangeShortcutOption1: [{
          name: 'Last week',
          day: '-7,0'
        }, {
          name: 'Last Month',
          day: '-30,0'
        }, {
          name: 'Last Three Months',
          day: '-90, 0'
        }],
        singleShortcutOptions1: [{
          name: 'Today',
          day: '0',
          time: '00:00:00'
        }, {
          name: 'Yesterday',
          day: '-1',
          time: '00:00:00'
        }, {
          name: 'One Week Ago',
          day: '-7'
        }]
      };
        $('.J-datepicker').datePicker({
          hasShortcut:true,
          language: 'en',
          min:'2018-01-01 04:00:00',
          max:'2029-10-29 20:59:59',
          shortcutOptions:[{
            name: 'Today',
            day: '0'
          }, {
            name: 'Yesterday',
            day: '-1',
            time: '00:00:00'
          }, {
            name: 'One Week Ago',
            day: '-7'
          }],
          hide:function(){
            console.info(this)
          }
        });


        $('.J-datepicker-day').datePicker({
          hasShortcut: false,
          format: 'YYYY-MM-DD',
          language: 'en',
          between:'month'
        });


        $('.J-datepicker-range-day').datePicker({
          hasShortcut: true,
          language: 'en',
          format: 'YYYY-MM-DD',
          isRange: true,
          shortcutOptions: DATAPICKERAPI.rangeShortcutOption1
        });


        $('.J-datepickerTime-single').datePicker({
          format: 'YYYY-MM-DD HH:mm',
          language: 'en',
        });


        $('.J-datepickerTime-range').datePicker({
          format: 'YYYY-MM-DD HH:mm',
          isRange: true,
          language: 'en'
        });


        $('.J-datepicker-range').datePicker({
          hasShortcut: true,
          language: 'en',
          min: '2018-01-01 06:00:00',
          max: '2029-04-29 20:59:59',
          isRange: true,
          shortcutOptions: [{
            name: 'Yesterday',
            day: '-1,-1',
            time: '00:00:00,23:59:59'
          },{
            name: 'Last Week',
            day: '-7,0',
            time:'00:00:00,'
          }, {
            name: 'Last Month',
            day: '-30,0',
            time: '00:00:00,'
          }, {
            name: 'Last Three Months',
            day: '-90, 0',
            time: '00:00:00,'
          }],
          hide: function (type) {
            console.info(this.$input.eq(0).val(), this.$input.eq(1).val());
            console.info('Type:',type)
          }
        });
        $('.J-datepicker-range-betweenMonth').datePicker({
          isRange: true,
          between:'month',
          language: 'en',
          hasShortcut: true,
          shortcutOptions: DATAPICKERAPI.rangeMonthShortcutOption1()
        });


        $('.J-datepicker-range-between30').datePicker({
          isRange: true,
          language: 'en',
          between: 30
        });

        $('.J-yearMonthPicker-single').datePicker({
          format: 'YYYY-MM',
          language: 'en',
          min: '2018-01',
          max: '2029-04',
          hide: function (type) {
            console.info(this.$input.eq(0).val());
          }
        });

        $('.J-yearPicker-single').datePicker({
          format: 'YYYY',
          language: 'en',
          min: '2018',
          max: '2029'
        });


    });
  </script>

  <script>
      $('.timerange').on('click', function(e) {
    e.stopPropagation();
    var input = $(this).find('input');

    var now = new Date();
    var hours = now.getHours();
    var period = "PM";
    if (hours < 12) {
      period = "AM";
    } else {
      hours = hours - 11;
    }
    var minutes = now.getMinutes();

    var range = {
      from: {
        hour: hours,
        minute: minutes,
        period: period
      },
      to: {
        hour: hours,
        minute: minutes,
        period: period
      }
    };

    if (input.val() !== "") {
      var timerange = input.val();
      var matches = timerange.match(/([0-9]{2}):([0-9]{2}) (\bAM\b|\bPM\b)-([0-9]{2}):([0-9]{2}) (\bAM\b|\bPM\b)/);
      if( matches.length === 7) {
        range = {
          from: {
            hour: matches[1],
            minute: matches[2],
            period: matches[3]
          },
          to: {
            hour: matches[4],
            minute: matches[5],
            period: matches[6]
          }
        }
      }
    };
    console.log(range);

    var html = '<div class="timerangepicker-container">'+
      '<div class="timerangepicker-from">'+
      '<label class="timerangepicker-label">From:</label>' +
      '<div class="timerangepicker-display hour">' +
          '<span class="increment fa fa-angle-up"></span>' +
          '<span class="value">'+('0' + range.from.hour).substr(-2)+'</span>' +
          '<span class="decrement fa fa-angle-down"></span>' +
      '</div>' +
      ':' +
      '<div class="timerangepicker-display minute">' +
          '<span class="increment fa fa-angle-up"></span>' +
          '<span class="value">'+('0' + range.from.minute).substr(-2)+'</span>' +
          '<span class="decrement fa fa-angle-down"></span>' +
      '</div>' +
      ':' +
      '<div class="timerangepicker-display period">' +
          '<span class="increment fa fa-angle-up"></span>' +
          '<span class="value">PM</span>' +
          '<span class="decrement fa fa-angle-down"></span>' +
      '</div>' +
      '</div>' +
      '<div class="timerangepicker-to">' +
      '<label class="timerangepicker-label">To:</label>' +
      '<div class="timerangepicker-display hour">' +
          '<span class="increment fa fa-angle-up"></span>' +
          '<span class="value">'+('0' + range.to.hour).substr(-2)+'</span>' +
          '<span class="decrement fa fa-angle-down"></span>' +
      '</div>' +
      ':' +
      '<div class="timerangepicker-display minute">' +
          '<span class="increment fa fa-angle-up"></span>' +
          '<span class="value">'+('0' + range.to.minute).substr(-2)+'</span>' +
          '<span class="decrement fa fa-angle-down"></span>' +
      '</div>' +
      ':' +
      '<div class="timerangepicker-display period">' +
          '<span class="increment fa fa-angle-up"></span>' +
          '<span class="value">PM</span>' +
          '<span class="decrement fa fa-angle-down"></span>' +
      '</div>' +
      '</div>' +
    '</div>';

    $(html).insertAfter(this);
    $('.timerangepicker-container').on(
      'click',
      '.timerangepicker-display.hour .increment',
      function(){
        var value = $(this).siblings('.value');
        value.text(
          increment(value.text(), 12, 1, 2)
        );
      }
    );

    $('.timerangepicker-container').on(
      'click',
      '.timerangepicker-display.hour .decrement',
      function(){
        var value = $(this).siblings('.value');
        value.text(
          decrement(value.text(), 12, 1, 2)
        );
      }
    );

    $('.timerangepicker-container').on(
      'click',
      '.timerangepicker-display.minute .increment',
      function(){
        var value = $(this).siblings('.value');
        value.text(
          increment(value.text(), 59, 0 , 2)
        );
      }
    );

    $('.timerangepicker-container').on(
      'click',
      '.timerangepicker-display.minute .decrement',
      function(){
        var value = $(this).siblings('.value');
        value.text(
          decrement(value.text(), 12, 1, 2)
        );
      }
    );

    $('.timerangepicker-container').on(
      'click',
      '.timerangepicker-display.period .increment, .timerangepicker-display.period .decrement',
      function(){
        var value = $(this).siblings('.value');
        var next = value.text() == "PM" ? "AM" : "PM";
        value.text(next);
      }
    );

  });

  $(document).on('click', e => {

    // $('#general-info-form').validate({
    //   alert("dfsfds");
    //   errorPlacement: function(error, element) {
    //     error.insertBefore(element);
    //   }
    // });

    if(!$(e.target).closest('.timerangepicker-container').length) {
      if($('.timerangepicker-container').is(":visible")) {
        var timerangeContainer = $('.timerangepicker-container');
        if(timerangeContainer.length > 0) {
          var timeRange = {
            from: {
              hour: timerangeContainer.find('.value')[0].innerText,
              minute: timerangeContainer.find('.value')[1].innerText,
              period: timerangeContainer.find('.value')[2].innerText
            },
            to: {
              hour: timerangeContainer.find('.value')[3].innerText,
              minute: timerangeContainer.find('.value')[4].innerText,
              period: timerangeContainer.find('.value')[5].innerText
            },
          };

          timerangeContainer.parent().find('input').val(
            timeRange.from.hour+":"+
            timeRange.from.minute+" "+
            timeRange.from.period+"-"+
            timeRange.to.hour+":"+
            timeRange.to.minute+" "+
            timeRange.to.period
          );
          timerangeContainer.remove();
        }
      }
    }

  });

  function increment(value, max, min, size) {
    var intValue = parseInt(value);
    if (intValue == max) {
      return ('0' + min).substr(-size);
    } else {
      var next = intValue + 1;
      return ('0' + next).substr(-size);
    }
  }

  function decrement(value, max, min, size) {
    var intValue = parseInt(value);
    if (intValue == min) {
      return ('0' + max).substr(-size);
    } else {
      var next = intValue - 1;
      return ('0' + next).substr(-size);
    }
  }
  </script>
@endpush