@extends('layouts.main')
@push('styles')
<link href="{{asset('css/daterangepicker.css')}}" rel='stylesheet' />
@endpush
@section('content')
<div class="row">
  <div class="col-md-12">
    <form class="card" method="post" action="{{route('routes_post_new')}}">
      {{csrf_field()}}
      <div class="card-body">
      <h3 class="card-title">{{__('strings.routes_create_header')}}</h3>

        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label class="form-label">{{__('strings.alias')}}</label>
              <input type="text" name="alias" class="form-control" placeholder="{{__('strings.alias')}}">
            </div>
          </div>

          <div class="col-md-6">
            <div class="form-group">
              <div class="form-label">{{__('strings.route_type')}}</div>
              <div class="custom-coltrols-stacked">
                <label class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="period_type" name="route_type" value="period_type" class="custom-control-input" checked="checked">
                  <span class="custom-control-label">{{__('strings.route_period_type')}}</span>
                </label>
                <label class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="repeat_type" name="route_type" value="repeat_type" class="custom-control-input">
                  <span class="custom-control-label">{{__('strings.repeat_route_type')}}</span>
                </label>
              </div>
            </div>
          </div>

          <div id="period_type_dates"  class="row col-md-12">
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">{{__('strings.range_dates')}}</label>
                <input type="text" id="range_dates" name="range_dates" class="form-control"  />
              </div>
            </div>
          </div>
          
          <input type="text" id="start_date" name="start_date" class="form-control" hidden />
          <input type="text" id="end_date" name="end_date" class="form-control" hidden />

            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">{{__('strings.start_time')}}</label>
                <input type="text" id="start_at" name="start_at" class="form-control"  />
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">{{__('strings.finish_time')}}</label>
                <input type="text" id="finish_at" name="finish_at" class="form-control"  />
              </div>
            </div>

            <div id="repeate_type_dates"  class="row col-md-12" style="display: none;">
            <div class="col-md-6">
              <div class="form-group">
                <div class="form-label">{{__('strings.repeat_route_type')}}</div>
                <div class="custom-switches-stacked">
                  <label class="custom-switch">
                    <input type="checkbox" name="all_sundays" class="custom-switch-input">
                    <span class="custom-switch-indicator"></span>
                    <span class="custom-switch-description">{{__('strings.all_sundays')}}</span>
                  </label>
                  <label class="custom-switch">
                    <input type="checkbox" name="all_mondays" class="custom-switch-input">
                    <span class="custom-switch-indicator"></span>
                    <span class="custom-switch-description">{{__('strings.all_mondays')}}</span>
                  </label>
                  <label class="custom-switch">
                    <input type="checkbox" name="all_thuesdays" class="custom-switch-input">
                    <span class="custom-switch-indicator"></span>
                    <span class="custom-switch-description">{{__('strings.all_thuesdays')}}</span>
                  </label>
                  <label class="custom-switch">
                    <input type="checkbox" name="all_wednesdays" class="custom-switch-input">
                    <span class="custom-switch-indicator"></span>
                    <span class="custom-switch-description">{{__('strings.all_wednesdays')}}</span>
                  </label>
                  <label class="custom-switch">
                    <input type="checkbox" name="all_thursdays" class="custom-switch-input">
                    <span class="custom-switch-indicator"></span>
                    <span class="custom-switch-description">{{__('strings.all_thursdays')}}</span>
                  </label>
                  <label class="custom-switch">
                    <input type="checkbox" name="all_fridays" class="custom-switch-input">
                    <span class="custom-switch-indicator"></span>
                    <span class="custom-switch-description">{{__('strings.all_fridays')}}</span>
                  </label>
                  <label class="custom-switch">
                    <input type="checkbox" name="all_saturdays" class="custom-switch-input">
                    <span class="custom-switch-indicator"></span>
                    <span class="custom-switch-description">{{__('strings.all_saturdays')}}</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
        <div class="card-footer text-right">
          <button type="submit" class="btn btn-primary">{{__('strings.submit_store')}}</button>
        </div>
    </form>
  </div>
</div>
@endsection('content')

@push('scripts')
<script src="{{asset('js/daterangepicker.js')}}" type="text/javascript"></script>
<script>
$(function() {
  initDateTimePickers();
});

$("#period_type").change(function(){
  if($("#period_type").prop( "checked" )) {
    $("#repeate_type_dates").hide("slow");
    $("#period_type_dates").show("slow");
  }
});

$("#repeat_type").change(function(){
  if($("#repeat_type").prop( "checked" )){
    $("#period_type_dates").hide("slow");
    $("#repeate_type_dates").show("slow");
  }
});

function initDateTimePickers() {
  // hide time picker
  $('#range_dates').daterangepicker({
    opens: 'right',
    autoUpdateInput: false,
    autoApply: false,
    locale: {
      format: 'YYYY-MM-DD'
    }
  });

  $('#range_dates').on('apply.daterangepicker', function(ev, picker) {
      $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
      $('#start_date').val(picker.startDate.format('YYYY-MM-DD'));
      $('#end_date').val(picker.endDate.format('YYYY-MM-DD'));
  });

  $('#start_at').daterangepicker({
    opens: 'right',
    singleDatePicker:true,
    timePicker: true,
    timePicker24Hour: true,
    locale: {
      format: 'HH:mm'
    }
  }).on('show.daterangepicker', function (ev, picker) {
            picker.container.find(".calendar-table").hide();
  });;

  $('#finish_at').daterangepicker({
    opens: 'right',
    singleDatePicker:true,
    timePicker: true,
    timePicker24Hour: true,
    locale: {
      format: 'HH:mm'
    }
  }).on('show.daterangepicker', function (ev, picker) {
            picker.container.find(".calendar-table").hide();
  });;

  /*
  $('input[name="daterange"]').daterangepicker({
    opens: 'right',
    singleDatePicker:true,
    timePicker: true,
    timePicker24Hour: true,
    timePickerIncrement: 1,
    locale: {
      format: 'HH:mm'
    }
  }).on('show.daterangepicker', function (ev, picker) {
            picker.container.find(".calendar-table").hide();
  });
  */
}
</script>
@endpush('scripts')