@extends('admin.layouts.master')
@section('title', 'Edit Blog - Admin')
@section('body')
 
<section class="content">
   @include('admin.message')
      <div class="row">
        <div class="col-md-12">
        	<div class="box box-primary">
	           	<div class="box-header with-border d-flex">
              		<h3 class="box-title">{{ __('adminstaticword.UpdateBlog') }}</h3>
					<a href="{{url('blog')}}" data-toggle="tooltip" data-original-title="Go back" class="ml-auto"><i class="material-icons"><button class="btn btn-xs btn-success abc"> << {{ __('adminstaticword.Back') }}</button> </i></a>
           		</div>
	          	<div class="panel-body">
	          		<form action="{{route('blog.update',$show->id)}}" method="POST" enctype="multipart/form-data">
		                {{ csrf_field() }}
		                {{ method_field('PUT') }}

		                <div class="row">
		              	  <div class="col-md-6">
		                    <label for="date">{{ __('adminstaticword.Date') }}<sup class="redstar">*</sup></label>
							<input name="date" value="{{ $show->date }}" id="date"  class="form-control" placeholder="{{ __('adminstaticword.Select') }} {{ __('adminstaticword.Date') }}"/>
		                  </div>
		                  <div class="col-md-6 display-none">
		                    <label for="heading">{{ __('adminstaticword.User') }}<sup class="redstar">*</sup></label>
		                    <select name="user_id" class="form-control js-example-basic-single col-md-7 col-xs-12">
			                    <option  value="{{ $show->user_id }}">{{  $show->user->fname }}</option>
			                </select>
			              </div>

			                <div class="col-md-6">
		                    <label for="heading">{{ __('adminstaticword.Heading') }}<sup class="redstar">*</sup></label>
		                    <input value="{{ $show->heading }}" autofocus required name="heading" type="text" class="form-control" placeholder="{{ __('adminstaticword.Enter') }} {{ __('adminstaticword.Heading') }}"/>
		                  </div>

						  <div class="col-md-6">
							<label for="category_id">選擇分類: <sup class="redstar">*</sup></label>
							<select name="category_id" id="category_id" class="form-control">
							  <option value="1" @if ( $show->category_id  == 1) selected @endif>活動檔期</option>
							  <option value="2" @if ( $show->category_id  == 2) selected @endif>運動知識</option>
							</select>
						  </div>
						  
		              	</div>
		              	<br>
 
		              	<div class="row">
		                
		                  {{-- <div class="col-md-6 display-none">
		                    <label for="text">{{ __('adminstaticword.ButtonText') }}</label>
		                    <input value="{{ $show->text }}" autofocus name="text" type="text" class="form-control" placeholder="{{ __('adminstaticword.Enter') }} {{ __('adminstaticword.ButtonText') }}"/>
		                  </div>

		                   <div class="col-md-6 my-url @if($show->category_id == 2) display-none @endif ">
			                  <label for="url">{{ __('adminstaticword.NewsUrl') }}: <sup class="redstar">*</sup></label>
			                  <input pattern="[/^\S*$/]+" type="url" class="form-control" name="url" id="url" value="{{ $show->url }}"  placeholder="{{ __('adminstaticword.Enter') }} {{ __('adminstaticword.NewsUrl') }}" @if($show->category_id == 1) required @endif>
			                </div> --}}

							
		              	</div>
		              	<br>
		              	<div class="row">
		                  <div class="col-md-12 my-detail ">
		                    <label for="detail">{{ __('adminstaticword.Detail') }}<sup class="redstar">*</sup></label>
		                    <textarea id="detail" name="detail" rows="5"  class="form-control" placeholder="{{ __('adminstaticword.Enter') }} {{ __('adminstaticword.Detail') }}">{{ $show->detail }}</textarea>
		                  </div>
		                 
		              	</div>
		              	<br>

		              	@if(Auth::user()->role == 'admin')

		              	<div class="row">

		              		<div class="col-md-4">
			                    <label for="image">{{ __('adminstaticword.Image') }}<sup class="redstar">*</sup><span class="text-sm">- 600*400</span></label>
			                    <input type="file" name="image"  id="image"><br><img src="{{ gc_asset('images/blog/'.$show->image) }}" class="img-responsive" />
			                </div>

		              		{{-- <div class="col-md-4">
				                <label for="exampleInputTit1e">{{ __('adminstaticword.Approved') }}:</label>
				                <li class="tg-list-item">              
				                    <input class="tgl tgl-skewed" id="approved" type="checkbox" name="approved" {{ $show->approved == '1' ? 'checked' : '' }} >
				                    <label class="tgl-btn" data-tg-off="Disable" data-tg-on="Enable" for="approved"></label>
				                </li>
				                <input type="hidden"  name="free" value="0" for="approved" id="approved">
		              		</div> --}}
		              		<div class="col-md-4 display-none">
		              			<label for="exampleInput">{{ __('adminstaticword.Status') }}:</label>
				                <li class="tg-list-item">              
				                    <input class="tgl tgl-skewed" id="status" type="checkbox" name="status" @if ($show->status == 1) checked @endif >
				                    <label class="tgl-btn" data-tg-off="Disable" data-tg-on="Enable" for="status"></label>
				                </li>
				                <input type="hidden"  name="free" value="0" for="status" id="status">
		              		</div>
		              	</div>
		              	<br>

		              	@endif
						
						<div class="box-footer">
		              		<button value="" type="submit" class="btn btn-lg col-md-3 btn-primary">{{ __('adminstaticword.Save') }}</button>
		              	</div>

		          	</form>
	          	</div>
	      	</div>
      	</div>
  	</div>
</section>
@endsection

@section('script')
{{-- date range picker --}}
<script>
  $('input[name="date"]').daterangepicker({
      "singleDatePicker": true,
      "showDropdowns": true,
      "showCustomRangeLabel": false,
    locale: {
		format: 'Y-MM-DD',
		cancelLabel: '取消',
      	applyLabel: '確定',
      	daysOfWeek: [
              "日",
              "一",
              "二",
              "三",
              "四",
              "五",
              "六"
          ],
      	monthNames: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月"
          ],
      }
  }, function(start, end, label) {
  //   console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
  });
  $('input[name="date"]').on('apply.daterangepicker', function(ev, picker) {
    $(this).val( picker.startDate.format('Y-MM-DD'));
});

  var detailCol = document.querySelector('.my-detail')
  var category = document.querySelector('#category_id')
  var url = document.querySelector('.my-url')
  var urlInput = document.querySelector('#url')
  console.log(category.value,urlInput);

//   category.addEventListener('change',function () {
//     let detail = document.querySelector('.mce-tinymce.mce-container.mce-panel')
//     let iframeBody = document.querySelector('#detail_ifr').contentDocument.body
//     console.log(category.value,category.value == 1);
//     if (category.value == 1) {
//       detail.style.display = 'none'
// 	  detailCol.style.display = 'none'
//       url.style.display = 'block'
// 	  urlInput.required = true
//     }else{
//       detail.style.display = 'block'
//       detailCol.style.display = 'block'
//       url.style.display = 'none'
// 	  urlInput.required = false
//     }
//   })

</script>
@endsection