@extends('admin.layouts.master')
@section('body')
@section('title', 'ADD User - Admin')

@include('admin.message')

<section class="content">
  <div class="row">
    <div class="col-md-12">
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title"> {{ __('adminstaticword.Add') }} {{ __('adminstaticword.Role') }}</h3>
          <div class="float-right"><h4 class="admin-form-text"><a href="{{ route('user.index') }}" data-toggle="tooltip" data-original-title="Go back" class="btn-floating"><i class="material-icons"><button class="btn btn-xs btn-success abc"> << {{ __('adminstaticword.Back') }}</button> </i></a></h4></div>
        </div>
        <div class="panel-body">
          <form action="{{ route('user.store') }}" method="POST" enctype="multipart/form-data">
            {{ csrf_field() }}

            <div class="row">
              <div class="col-md-6 col-6">
                 <label for="fname">
                {{ __('adminstaticword.FirstName') }} : <sup class="redstar">*</sup>
                </label>
                <script>
                  function showKeyPress(evt) {
                    if( !checkSpecificKey(evt.keyCode) ){
                      evt.preventDefault();
                      return;
                    }
                  }
                  function checkSpecificKey(keyCode) {
                    var specialKey = "[`~!#$^&*()=|{}':;',\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'";//Specific Key list
                    var realkey = String.fromCharCode(keyCode);
                    var flg = false;
                    flg = (specialKey.indexOf(realkey) >= 0);
                    if (flg) {
                    // alert('請勿輸入特殊字元: '   realkey);
                    return false;
                    }
                  return true;
                  }
                  // document.onkeypress = showKeyPress;
                </script>
                <input onkeypress="showKeyPress(event)" value="{{ old('fname') }}"  autofocus required name="fname" id="fname" type="text" class="form-control" placeholder="{{ __('adminstaticword.Enter') }} {{ __('adminstaticword.FirstName') }}"/>
              </div>
              {{-- <div class="col-md-6 col-6">
                <label for="lname">
                  {{ __('adminstaticword.LastName') }} : <sup class="redstar">*</sup>
                </label>
                <input value="{{ old('lname')}}" required name="lname" type="text" class="form-control" placeholder="{{ __('adminstaticword.Enter') }} {{ __('adminstaticword.LastName') }}"/>
              </div> --}}
            </div>
            <br>

            <div class="row">
              <div class="col-md-6"> 
                <label for="role">{{ __('adminstaticword.SelectRole') }}: <sup class="redstar">*</sup></label>
                <select class="form-control" name="role" required>
                  <option value="" selected>{{ __('adminstaticword.SelectanOption') }}</option>
                  <option value="admin">{{ __('adminstaticword.Admin') }}</option>
                  <option value="instructor">{{ __('adminstaticword.Instructor') }}</option>
                </select>
              </div> 
            </div>

            <div class="row">
              <div class="col-md-6  ">
                  <label for="email">{{ __('adminstaticword.Email') }}: <sup class="redstar">*</sup></label>
                  <input id="email" value="{{ old('email')}}" type="email" name="email" placeholder="{{ __('adminstaticword.Enter') }} {{ __('adminstaticword.Email') }}" class="form-control" autocomplete="off">
              </div>
              <div class="col-md-6  ">
                <label for="mobile">{{ __('adminstaticword.Mobile') }}: <sup class="redstar">*</sup></label>
                <input value="{{ old('mobile')}}" type="text" name="mobile" placeholder="{{ __('adminstaticword.Enter') }} {{ __('adminstaticword.Mobile') }}" class="form-control" autocomplete="off">
              </div>
              <div class="col-md-6 hidden-area d-none">
                <label for="password">{{ __('adminstaticword.Password') }}: <sup class="redstar">*</sup> </label>
                <input id="password" type="password" name="password" placeholder="{{ __('adminstaticword.Enter') }} {{ __('adminstaticword.Password') }}" class="form-control" autocomplete="new-password">
              </div>
            </div>
            
            <br>


            {{-- <div class="row">
              <div class="col-md-12">
                <div role="tw-city-selector" data-bootstrap-style data-has-zipcode></div>
                <label for="exampleInputDetails">{{ __('adminstaticword.Address') }}:</label>
              </div>
            </div> --}}
            

            <br>

            {{-- <div class="row city-selector-set">
              <div class="col-md-4">
                <label for="city_id">{{ __('adminstaticword.ChooseState') }} : </label>
                <select id="country_id" class="form-control js-example-basic-single county" name="country_id">
                </select>
              </div>
            
              <div class="col-md-4">
                <label for="state_id">{{ __('adminstaticword.ChooseCity') }} : </label>
                <select id="upload_id" class="form-control js-example-basic-single district" name="state_id"></select>
               </div>


              
              <div class="col-md-4"> 
                <label for="pin_code">{{ __('adminstaticword.Pincode') }} :</sup></label>
                <input class=" form-control zipcode" type="text" size="3" readonly placeholder="郵遞區號" name="pin_code">
              </div>
              
              
            </div>
              <div class="col-12">
                <label for="exampleInputDetails">{{ __('adminstaticword.Address') }} :</label>
                <input id="address" name="address" class="form-control" placeholder="{{ __('adminstaticword.Enter') }} {{ __('adminstaticword.Address') }}">
              </div>
            <br> --}}


            <div class="row">
              <div class="col-md-3">
                <label for="exampleInputSlug">{{ __('adminstaticword.Image') }} : </label> <p class="inline info">{{ __('adminstaticword.Recommendedsize') }} : 625x625</p>
                <br>
                <input type="file" name="user_img" accept="image/*" id="user_img" class="inputfile inputfile-1" />
                <label for="user_img"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>{{ __('adminstaticword.Chooseafile') }}&hellip;</span>
              </div>
              
            
            </div>
            <br>

            <div class="row">
              <div class="col-md-3 display-none">
                <label for="exampleInputDetails">{{ __('adminstaticword.Verified') }}:</label> 
                <li class="tg-list-item">
                
                  <input class="tgl tgl-skewed" id="jeet1"   type="checkbox"/>
                  <label class="tgl-btn" data-tg-off="Off" data-tg-on="On" for="jeet1"></label>
                
                </li>
                <input type="hidden" name="verified" value="0" id="jeet11"> 
           
                </div>
              <div class="col-md-3">
                <label for="exampleInputDetails">{{ __('adminstaticword.Status') }}:</label>
                <li class="tg-list-item">
                <input class="tgl tgl-skewed" id="jeet120"  type="checkbox"/>
                <label class="tgl-btn" data-tg-off="Deactive" data-tg-on="Active" for="jeet120"></label>
                </li>
                <input type="hidden" name="status" value="0" id="jeet121">
              </div>
              
              <div class="col-md-3 ">
                <label for="exampleInputDetails">推薦 :</label>
                <li class="tg-list-item">
                  <input class="tgl tgl-skewed" id="jeet125"  type="checkbox"/>
                  <label class="tgl-btn" data-tg-off="Deactive" data-tg-on="Active" for="jeet125"></label>
                </li>
                <input type="hidden" name="featured" value="0" id="jeet126">
              </div>
            </div>
            <br>

            <div class="row">
              <div class="col-md-12">
                <label for="details">{{ __('adminstaticword.Detail') }}:</label>
                <textarea id="details" name="detail" rows="3"  class="form-control" placeholder="{{ __('adminstaticword.Enter') }} {{ __('adminstaticword.Detail') }}"></textarea>
              </div>
            </div>
            <br>
            <br>

            
            <!-- 社群 
            <div class="box-header with-border">
              <h3 class="box-title">{{ __('adminstaticword.SocialProfile') }}</h3>
            </div>
            <br>

            <div class="row">
              <div class="col-md-6">
                <label for="fb_url">
                {{ __('adminstaticword.FacebookUrl') }}:
                </label>
                <input autofocus name="fb_url" type="text" class="form-control" placeholder="Facebook.com/"/>
              </div>
              <div class="col-md-6">
                <label for="youtube_url">
                {{ __('adminstaticword.YoutubeUrl') }}:
                </label>
                <input autofocus name="youtube_url" type="text" class="form-control" placeholder="youtube.com/"/>
                <br>
              </div>
            
              <div class="col-md-6">
                <label for="twitter_url">
                {{ __('adminstaticword.TwitterUrl') }}:
                </label>
                <input autofocus name="twitter_url" type="text" class="form-control" placeholder="Twitter.com/"/>
              </div>
              <div class="col-md-6">
                <label for="linkedin_url">
                {{ __('adminstaticword.LinkedInUrl') }}:
                </label>
                <input autofocus name="linkedin_url" type="text" class="form-control" placeholder="Linkedin.com/"/>
              </div>
            </div>
            <br>
            <br>
            -->

            <div class="box-footer">
              <button type="submit" class="btn btn-md btn-primary">
                <i class="fa fa-plus-circle"></i> {{ __('adminstaticword.AddUser') }}
              </button>
            </form>
              <a href="{{ route('user.index') }}" title="Cancel and go back" class="btn btn-md btn-default btn-flat">
                <i class="fa fa-reply"></i> {{ __('adminstaticword.Back') }}
              </a>
            </div>
            <br>

          
        </div>
        <!-- /.panel body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</section>

@endsection


@section('scripts')

<script>
(function($) {
  "use strict";

  $('#married_status').change(function() {
      
    if($(this).val() == 'Married')
    {
      $('#doaboxxx').show();
    }
    else
    {
      $('#doaboxxx').hide();
    }
  });

  $(function() {
    $( "#dob,#doa" ).datepicker({
      changeYear: true,
      yearRange: "-100:+0",
      dateFormat: 'yy/mm/dd',
    });
  });

  

  $(function() {
    var urlLike = '{{ url('country/dropdown') }}';
    $('#country_id').change(function() {
      var up = $('#upload_id').empty();
      var cat_id = $(this).val(); 
      if(cat_id){
        $.ajax({
          headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          type:"GET",
          url: urlLike,
          data: {catId: cat_id},
          success:function(data){   
            console.log(data);
            up.append('<option value="0">Please Choose</option>');
            $.each(data, function(id, title) {
              up.append($('<option>', {value:filter(id), text:filter(title)}));
            });
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest);
          }
        });
      }
    });
  });

  $(function() {
    var urlLike = '{{ url('country/gcity') }}';
    $('#upload_id').change(function() {
      var up = $('#grand').empty();
      var cat_id = $(this).val();    
      if(cat_id){
        $.ajax({
          headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          type:"GET",
          url: urlLike,
          data: {catId: cat_id},
          success:function(data){   
            console.log(data);
            up.append('<option value="0">Please Choose</option>');
            $.each(data, function(id, title) {
              up.append($('<option>', {value:filter(id), text:filter(title)}));
            });
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest);
          }
        });
      }
    });
  });
})(jQuery);

</script>

{{-- tw-city-selector --}}
{{-- <script src="{{ asset('js/tw-city-selector.min.js') }}"></script>
<script>
   new TwCitySelector({
            el: '.city-selector-set',
            elCounty: '.county', // 在 el 裡查找 element
            elDistrict: '.district', // 在 el 裡查找 element
            elZipcode: '.zipcode' // 在 el 裡查找 element
        });
</script> --}}
<script>
document.addEventListener("DOMContentLoaded", function(){
  const hiddenAreas = [...document.querySelectorAll('.hidden-area')]
  const role = document.querySelector('[name="role"]')
  role.addEventListener('change' , () => {
    if (role.value === 'instructor') {
      hiddenAreas.forEach( hiddenArea => {
        hiddenArea.classList.add('d-none')
        input = hiddenArea.querySelector('input')
        input.required = false
        input.disabled = true
        input.value = ''
      })
    }else{
      hiddenAreas.forEach( hiddenArea => {
        hiddenArea.classList.remove('d-none')
        input = hiddenArea.querySelector('input')
        input.required = true
        input.disabled = false
      })
    }
  })
});
</script>

@endsection