@extends('layouts.frontend_default')
@section('title', 'Home')
@section('content')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style type="text/css">
  .select2-container .select2-selection--single{
        height: 56px;
        padding-top: 14px
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow{
      top: 15px;
      border-radius: 0;
      border-color: #f1f1f1;  
    }
    .select2-container{
      border: 1px solid #E0E2E3;
    }
    .select2-container--default .select2-selection--single{
      border: none;
      border-radius: 0;
    }
</style>
<section class="grey-bg-2 pb-70 pt-60">
	<div class="container">

		<div class="row">
         <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2" style="margin: auto;">
            <form action="javascript:void(0)">
               <div class="section-title">
                  <!-- <p class="section-title__text">Convert Dates</p> -->
                  
                  <h2 class="section-title__title">Convert Dates
                  </h2>
                 
               </div>
               <!-- /.section-title -->
               <div class="row ">
               	  <!-- <div class="col-lg-12 col-md-12">
                     <select>
                     	<option value="1">English Date Time to Julian Date Time</option>
                     	<option value="2">Julian Date Time to English Date Time</option>
                     </select>
                  </div> -->
                  <div class="col-lg-6 col-md-12">
                  	 <label>Date</label>
                     <input type="date" id="engdt" placeholder="English Date" name="engdt">
                  </div>
                   <div class="col-lg-2 col-md-12">
                   	<label>Hours</label>
               		 <select id="hours" class="form-control">
               		 	<option value="">Hours (00)</option>
               		 	@for($i = 0; $i < 24; $i++)
               		 	<option value="{{str_pad($i, 2, '0', STR_PAD_LEFT)}}">{{str_pad($i, 2, '0', STR_PAD_LEFT)}}</option>
               		 	@endfor
               		 </select>
                     <!-- <input type="number" id="engdt" placeholder="Hours (00)" max="23" name="engdt"> -->
                  </div>
                   <div class="col-lg-2 col-md-12">
                   	<label>Minutes</label>
                   		<select id="minutes" class="form-control">
	               		 	<option value="">Minutes (00)</option>
	               		 	@for($i = 0; $i < 60; $i++)
	               		 	<option value="{{str_pad($i, 2, '0', STR_PAD_LEFT)}}">{{str_pad($i, 2, '0', STR_PAD_LEFT)}}</option>
	               		 	@endfor
	               		 </select>
                     <!-- <input type="number" id="engdt" placeholder="Minutes (00)" max="60" name="engdt"> -->
                  </div>
                   <div class="col-lg-2 col-md-12">
                   	<label>Seconds</label>
                   		<select id="seconds" class="form-control">
	               		 	<option value="">Seconds (00)</option>
	               		 	@for($i = 0; $i < 60; $i++)
	               		 	<option value="{{str_pad($i, 2, '0', STR_PAD_LEFT)}}">{{str_pad($i, 2, '0', STR_PAD_LEFT)}}</option>
	               		 	@endfor
	               		 </select>
                     <!-- <input type="number" id="engdt" placeholder="Seconds (00)" max="60" name="engdt"> -->
                  </div>
                  <!-- /.col-lg-6 col-md-12 -->
                  <div class="col-lg-6 col-md-12 mt-2">
                  	<label>Julian Date Time</label>
                     <input type="text" id="jdt" placeholder="Julian Date Time" name="jdt">
                  </div>
                  <div class="col-md-12 mt-3">
                     <button onclick="convertDate()" class="btn-primary w-25 pull-right tp-product-details-review-btn" type="submit"><span>convert</span></button>
                  </div>
                  <!-- /.col-md-12 -->
               </div>
               <!-- /.row -->
            </form>

            <hr style="margin-top: 50px;margin-bottom: 40px;">

            <form action="javascript:void(0)" onsubmit="convertTimeZoneDate()">
               <div class="section-title">
                  <!-- <p class="section-title__text">Convert Dates</p> -->
                  
                  <h2 class="section-title__title">Convert Timezones
                  </h2>
                 
               </div>
               <!-- /.section-title -->
               <div class="row ">
                
                  <!-- <div class="col-lg-12 col-md-12">
                     <select>
                      <option value="1">English Date Time to Julian Date Time</option>
                      <option value="2">Julian Date Time to English Date Time</option>
                     </select>
                  </div> -->
                  <div class="col-lg-3 col-md-12">
                     <label>Country</label>
                     <select id="country1" required>
                      @foreach($allcountries as $key => $country)
                      <option value="{{$country->id}}">({{$country->zone_plus_minus}}{{$country->timezone}}) {{$country->country_name}} ({{$country->country_code}}) @if($country->timezone_name != 'NA') ({{$country->timezone_name}}) @endif</option>
                      @endforeach
                     </select>
                  </div>
                  <div class="col-lg-3 col-md-12">
                     <label>Date</label>
                     <input type="date" id="engdt1" placeholder="Date" name="engdt" required>
                  </div>
                   <div class="col-lg-2 col-md-12">
                    <label>Hours</label>
                   <select id="hours1" class="form-control">
                    <option value="">Hours (00)</option>
                    @for($i = 0; $i < 24; $i++)
                    <option value="{{str_pad($i, 2, '0', STR_PAD_LEFT)}}">{{str_pad($i, 2, '0', STR_PAD_LEFT)}}</option>
                    @endfor
                   </select>
                     <!-- <input type="number" id="engdt" placeholder="Hours (00)" max="23" name="engdt"> -->
                  </div>
                   <div class="col-lg-2 col-md-12">
                    <label>Minutes</label>
                      <select id="minutes1" class="form-control">
                      <option value="">Minutes (00)</option>
                      @for($i = 0; $i < 60; $i++)
                      <option value="{{str_pad($i, 2, '0', STR_PAD_LEFT)}}">{{str_pad($i, 2, '0', STR_PAD_LEFT)}}</option>
                      @endfor
                     </select>
                     <!-- <input type="number" id="engdt" placeholder="Minutes (00)" max="60" name="engdt"> -->
                  </div>
                   <div class="col-lg-2 col-md-12">
                    <label>Seconds</label>
                      <select id="seconds1" class="form-control">
                      <option value="">Seconds (00)</option>
                      @for($i = 0; $i < 60; $i++)
                      <option value="{{str_pad($i, 2, '0', STR_PAD_LEFT)}}">{{str_pad($i, 2, '0', STR_PAD_LEFT)}}</option>
                      @endfor
                     </select>
                     <!-- <input type="number" id="engdt" placeholder="Seconds (00)" max="60" name="engdt"> -->
                  </div>
                  
                  <!-- /.col-md-12 -->
               </div>
               <!-- /.row -->

               <div style="width: 100%;text-align: center;padding-top: 30px;padding-bottom: 30px;">
                 <h5>To</h5>
               </div>
               <!-- /.section-title -->
               <div class="row ">
                  <!-- <div class="col-lg-12 col-md-12">
                     <select>
                      <option value="1">English Date Time to Julian Date Time</option>
                      <option value="2">Julian Date Time to English Date Time</option>
                     </select>
                  </div> -->
                  <div class="col-lg-3 col-md-12">
                     <label>Country</label>
                     <select id="country2" required>
                      @foreach($allcountries as $key => $country)
                      <option value="{{$country->id}}">({{$country->zone_plus_minus}}{{$country->timezone}}) {{$country->country_name}} ({{$country->country_code}}) @if($country->timezone_name != 'NA') ({{$country->timezone_name}}) @endif</option>
                      @endforeach
                     </select>
                  </div>
                  <div class="col-lg-3 col-md-12">
                     <label>Date</label>
                     <input type="date" id="engdt2" placeholder="Date" name="engdt">
                  </div>
                   <div class="col-lg-2 col-md-12">
                    <label>Hours</label>
                   <select id="hours2" class="form-control">
                    <option value="">Hours (00)</option>
                    @for($i = 0; $i < 24; $i++)
                    <option value="{{str_pad($i, 2, '0', STR_PAD_LEFT)}}">{{str_pad($i, 2, '0', STR_PAD_LEFT)}}</option>
                    @endfor
                   </select>
                     <!-- <input type="number" id="engdt" placeholder="Hours (00)" max="23" name="engdt"> -->
                  </div>
                   <div class="col-lg-2 col-md-12">
                    <label>Minutes</label>
                      <select id="minutes2" class="form-control">
                      <option value="">Minutes (00)</option>
                      @for($i = 0; $i < 60; $i++)
                      <option value="{{str_pad($i, 2, '0', STR_PAD_LEFT)}}">{{str_pad($i, 2, '0', STR_PAD_LEFT)}}</option>
                      @endfor
                     </select>
                     <!-- <input type="number" id="engdt" placeholder="Minutes (00)" max="60" name="engdt"> -->
                  </div>
                   <div class="col-lg-2 col-md-12">
                    <label>Seconds</label>
                      <select id="seconds2" class="form-control">
                      <option value="">Seconds (00)</option>
                      @for($i = 0; $i < 60; $i++)
                      <option value="{{str_pad($i, 2, '0', STR_PAD_LEFT)}}">{{str_pad($i, 2, '0', STR_PAD_LEFT)}}</option>
                      @endfor
                     </select>
                     <!-- <input type="number" id="engdt" placeholder="Seconds (00)" max="60" name="engdt"> -->
                  </div>
                  
                  <div class="col-md-12 mt-3">
                     <div style="display: none;" id="gmtcont"><b>GMT: <span id="gmttime"></span></b></div>
                     <button class="btn-primary w-25 pull-right tp-product-details-review-btn" type="submit"><span>convert</span></button>
                  </div>
                  <!-- /.col-md-12 -->
               </div>
               <!-- /.row -->
            </form>

            <hr style="margin-top: 50px;margin-bottom: 40px;">

            <form action="javascript:void(0)" onsubmit="convertTimeZoneDateDST()">
               <div class="section-title">
                  <!-- <p class="section-title__text">Convert Dates</p> -->
                  
                  <h2 class="section-title__title">Convert Timezones With DST
                  </h2>
                 
               </div>
               <!-- /.section-title -->
               <div class="row ">
               
                  <!-- <div class="col-lg-12 col-md-12">
                     <select>
                      <option value="1">English Date Time to Julian Date Time</option>
                      <option value="2">Julian Date Time to English Date Time</option>
                     </select>
                  </div> -->
                  <div class="col-lg-3 col-md-12">
                     <label>Country</label>
                     <select id="country3" required>
                      @foreach($allcountries as $key => $country)
                      <option value="{{$country->id}}">({{$country->zone_plus_minus}}{{$country->timezone}}) {{$country->country_name}} ({{$country->country_code}}) @if($country->timezone_name != 'NA') ({{$country->timezone_name}}) @endif</option>
                      @endforeach
                     </select>
                  </div>
                  <div class="col-lg-3 col-md-12">
                     <label>Date</label>
                     <input type="date" id="engdt3" placeholder="Date" name="engdt" required>
                  </div>
                   <div class="col-lg-2 col-md-12">
                    <label>Hours</label>
                   <select id="hours3" class="form-control">
                    <option value="">Hours (00)</option>
                    @for($i = 0; $i < 24; $i++)
                    <option value="{{str_pad($i, 2, '0', STR_PAD_LEFT)}}">{{str_pad($i, 2, '0', STR_PAD_LEFT)}}</option>
                    @endfor
                   </select>
                     <!-- <input type="number" id="engdt" placeholder="Hours (00)" max="23" name="engdt"> -->
                  </div>
                   <div class="col-lg-2 col-md-12">
                    <label>Minutes</label>
                      <select id="minutes3" class="form-control">
                      <option value="">Minutes (00)</option>
                      @for($i = 0; $i < 60; $i++)
                      <option value="{{str_pad($i, 2, '0', STR_PAD_LEFT)}}">{{str_pad($i, 2, '0', STR_PAD_LEFT)}}</option>
                      @endfor
                     </select>
                     <!-- <input type="number" id="engdt" placeholder="Minutes (00)" max="60" name="engdt"> -->
                  </div>
                   <div class="col-lg-2 col-md-12">
                    <label>Seconds</label>
                      <select id="seconds3" class="form-control">
                      <option value="">Seconds (00)</option>
                      @for($i = 0; $i < 60; $i++)
                      <option value="{{str_pad($i, 2, '0', STR_PAD_LEFT)}}">{{str_pad($i, 2, '0', STR_PAD_LEFT)}}</option>
                      @endfor
                     </select>
                     <!-- <input type="number" id="engdt" placeholder="Seconds (00)" max="60" name="engdt"> -->
                  </div>
                  
                  <!-- /.col-md-12 -->
               </div>
               <!-- /.row -->

               <div style="width: 100%;text-align: center;padding-top: 30px;padding-bottom: 30px;">
                 <h5>To</h5>
               </div>
               <!-- /.section-title -->
               <div class="row ">
                  <!-- <div class="col-lg-12 col-md-12">
                     <select>
                      <option value="1">English Date Time to Julian Date Time</option>
                      <option value="2">Julian Date Time to English Date Time</option>
                     </select>
                  </div> -->
                  <div class="col-lg-3 col-md-12">
                     <label>Country</label>
                     <select id="country4" required>
                      @foreach($allcountries as $key => $country)
                      <option value="{{$country->id}}">({{$country->zone_plus_minus}}{{$country->timezone}}) {{$country->country_name}} ({{$country->country_code}}) @if($country->timezone_name != 'NA') ({{$country->timezone_name}}) @endif</option>
                      @endforeach
                     </select>
                  </div>
                  <div class="col-lg-3 col-md-12">
                     <label>Date</label>
                     <input type="date" id="engdt4" placeholder="Date" name="engdt">
                  </div>
                   <div class="col-lg-2 col-md-12">
                    <label>Hours</label>
                   <select id="hours4" class="form-control">
                    <option value="">Hours (00)</option>
                    @for($i = 0; $i < 24; $i++)
                    <option value="{{str_pad($i, 2, '0', STR_PAD_LEFT)}}">{{str_pad($i, 2, '0', STR_PAD_LEFT)}}</option>
                    @endfor
                   </select>
                     <!-- <input type="number" id="engdt" placeholder="Hours (00)" max="23" name="engdt"> -->
                  </div>
                   <div class="col-lg-2 col-md-12">
                    <label>Minutes</label>
                      <select id="minutes4" class="form-control">
                      <option value="">Minutes (00)</option>
                      @for($i = 0; $i < 60; $i++)
                      <option value="{{str_pad($i, 2, '0', STR_PAD_LEFT)}}">{{str_pad($i, 2, '0', STR_PAD_LEFT)}}</option>
                      @endfor
                     </select>
                     <!-- <input type="number" id="engdt" placeholder="Minutes (00)" max="60" name="engdt"> -->
                  </div>
                   <div class="col-lg-2 col-md-12">
                    <label>Seconds</label>
                      <select id="seconds4" class="form-control">
                      <option value="">Seconds (00)</option>
                      @for($i = 0; $i < 60; $i++)
                      <option value="{{str_pad($i, 2, '0', STR_PAD_LEFT)}}">{{str_pad($i, 2, '0', STR_PAD_LEFT)}}</option>
                      @endfor
                     </select>
                     <!-- <input type="number" id="engdt" placeholder="Seconds (00)" max="60" name="engdt"> -->
                  </div>
                  
                  <div class="col-md-12 mt-3">
                     <div style="display: none;" id="gmtcont2"><b>GMT: <span id="gmttime2"></span></b></div>
                     <button class="btn-primary w-25 pull-right tp-product-details-review-btn" type="submit"><span>convert</span></button>
                  </div>
                  <!-- /.col-md-12 -->
               </div>
               <!-- /.row -->
            </form>
           
         </div>
     </div>
	</div>
</section>
@section('js_script')
<!-- <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('select').select2();
    });


  function convertDate() {
  	// alert($('#engdt').val());
  	let date = '';

  	if($('#engdt').val()){
  		// alert('kk')
  		// var dd = new Date($('#engdt').val());
  		// date = dd.getFullYear() +'-'+ ("0" + (dd.getMonth() + 1)).slice(-2)+ '-' + ("0" + dd.getDate()).slice(-2)+' '+$('#hours').val() ? $('#hours').val() : '00'+':'+$('#minutes').val() ? $('#minutes').val() : '00'+':'+$('#seconds').val() ? $('#seconds').val() : '00';
  		var h = $('#hours').val() ? $('#hours').val() : '00';
  		var m = $('#minutes').val() ? $('#minutes').val() : '00';
  		var s = $('#seconds').val() ? $('#seconds').val() : '00';

  		date = $('#engdt').val()+'-'+h+'-'+m+'-'+s;
  	}
  	// alert(date)
    var request = $.ajax({
      url: "{{route('convertDate')}}",
      method: "POST",
      data: { "_token": "{{ csrf_token() }}", jdt : $('#jdt').val(), engdt : date }
    });

    request.done(function( val ) {
      // body...
      var data = jQuery.parseJSON(val);
      if(data.status){
        
        $('#jdt').val(data.jdt)
        $('#engdt').val(data.engdt)
        $('#hours').val(data._date.ihour).trigger('change');
        $('#minutes').val(data._date.imin).trigger('change');
        $('#seconds').val(data._date.isec).trigger('change');
      }else{
        alert(data.message);
      }
    })
  }

  function convertTimeZoneDate() {
    // alert($('#hours1').val());
    let date = '';

    if($('#engdt1').val()){
      var h = $('#hours1').val() ? $('#hours1').val() : '00';
      var m = $('#minutes1').val() ? $('#minutes1').val() : '00';
      var s = $('#seconds1').val() ? $('#seconds1').val() : '00';

      date = $('#engdt1').val()+'-'+h+'-'+m+'-'+s;
    }
    // alert(date)
    var request = $.ajax({
      url: "{{route('convertTimeZoneDate')}}",
      method: "POST",
      data: { "_token": "{{ csrf_token() }}", jdt : $('#jdt').val(), engdt : date,'country1':$('#country1').val(),'country2':$('#country2').val() }
    });

    request.done(function( val ) {
      // body...
      var data = jQuery.parseJSON(val);
      if(data.status){
// alert(data._date.ihour)
        $('#engdt2').val(data.engdt)
        $('#hours2').val(data._date.ihour).trigger('change');
        $('#minutes2').val(data._date.imin).trigger('change');
        $('#seconds2').val(data._date.isec).trigger('change');
        $('#gmttime').html(data.gmt_datetime)
        $('#gmtcont').show();

      }else{
        alert(data.message);
      }
    })
  }

  function convertTimeZoneDateDST() {
    // alert($('#hours1').val());
    let date = '';

    if($('#engdt3').val()){
      var h = $('#hours3').val() ? $('#hours3').val() : '00';
      var m = $('#minutes3').val() ? $('#minutes3').val() : '00';
      var s = $('#seconds3').val() ? $('#seconds3').val() : '00';

      date = $('#engdt3').val()+'-'+h+'-'+m+'-'+s;
    }
    // alert(date)
    var request = $.ajax({
      url: "{{route('convertTimeZoneDateDST')}}",
      method: "POST",
      data: { "_token": "{{ csrf_token() }}", jdt : $('#jdt').val(), engdt : date,'country3':$('#country3').val(),'country4':$('#country4').val() }
    });

    request.done(function( val ) {
      // body...
      var data = jQuery.parseJSON(val);
      if(data.status){
// alert(data._date.ihour)
        $('#engdt4').val(data.engdt)
        $('#hours4').val(data._date.ihour).trigger('change');
        $('#minutes4').val(data._date.imin).trigger('change');
        $('#seconds4').val(data._date.isec).trigger('change');
        $('#gmttime2').html(data.gmt_datetime)
        $('#gmtcont2').show();

      }else{
        alert(data.message);
      }
    })
  }
</script>

@endsection
@endsection