@extends('admin.layouts.admin')
@section('title')
Admin | Add
@endsection

@section('styles')
<link rel="stylesheet" href="{{ asset('css/intlTelInput.css') }}">
@endsection

@section('content')
<!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Add {{ ucwords(str_replace("-", " ", $userType)) }}</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
              <li class="breadcrumb-item"><a href="#">Users</a></li>
              <li class="breadcrumb-item"><a href="{{ url('admin/users/'.($userType).'/list') }}">{{ ucwords(str_replace("-", " ", $userType)) }}</a></li>
              <li class="breadcrumb-item active">Add</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->        
        <!-- /.row -->
        <!-- Main row -->
        <div class="row">
        <div class="col-md-10">
        <div class="card card-primary">

            @if ($errors->any())            
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
              <!-- <div class="card-header"> -->
                <!-- <h3 class="card-title">Quick Example</h3> -->
              <!-- </div> -->
              <!-- /.card-header -->
              <!-- form start -->
              <form role="form" method="post" action="{{ url('admin/users/'.$userType.'/save') }}" enctype="multipart/form-data">
              @csrf
              <input type="hidden" name="latitude" class="form-control latitude" value="">
              <input type="hidden" name="longitude" class="form-control longitude" value="">

                <div class="card-body">
                  <div class="form-group {{ $errors->has('name') ? ' is-invalid' : '' }}">
                    <label for="exampleInputEmail1">Name <span class="text-danger">*</span></label> 
                    <input type="text" class="form-control {{ $errors->has('name') ? ' is-invalid' : '' }} " id="exampleInputName1" placeholder="Enter Name" name="name" value="{{ old('name')??'' }}">
                    @if ($errors->has('name'))
                        <span class="form-control-feedback text-danger" role="alert">
                          <strong>{{ $errors->first('name') }}</strong>
                        </span>
                    @endif
                  </div>

                  <div class="form-group {{ $errors->has('email') ? ' is-invalid' : '' }}" >
                    <label for="exampleInputEmail2">Email address <span class="text-danger">*</span></label>
                    <input type="email" class="form-control {{ $errors->has('name') ? ' is-invalid' : '' }} " id="exampleInputEmail2" placeholder="Enter email" value="{{ old('email')??'' }}" name="email">
                    @if ($errors->has('email'))
                        <span class="form-control-feedback text-danger" role="alert">
                          <strong>{{ $errors->first('email') }}</strong>
                        </span>
                    @endif
                  </div>

                  <div class="form-group {{ $errors->has('phone') ? ' is-invalid' : '' }}">
                    <label for="mobile">Phone number <span class="text-danger"></span></label>
                    <input type="text" class="form-control {{ $errors->has('phone') ? ' is-invalid' : '' }}" id="mobile2" placeholder="Enter phone" name="phone" value="{{ old('phone')??'' }}">
                    <input type="hidden" name="country_code" value="{{ old('country_code') }}">
                    @if ($errors->has('phone'))
                        <span class="form-control-feedback text-danger" role="alert">
                          <strong>{{ $errors->first('phone') }}</strong>
                        </span>
                    @endif
                  </div>

                  <div class="form-group {{ $errors->has('address') ? ' is-invalid' : '' }}">
                    <label>Address <span class="text-danger">*</span></label>
                    <textarea class="form-control {{ $errors->has('address') ? ' is-invalid' : '' }}" rows="5" id="address" name="address" placeholder="Enter address">{{ old('address')? old('address'):($recordDetails['user_profile']['address']??'') }}</textarea>
                    @if ($errors->has('address'))
                      <span class="form-control-feedback text-danger" role="alert">
                        <strong>{{ $errors->first('address') }}</strong>
                      </span>
                    @endif
                  </div>

                  <div class="form-group">
                      <div class="row">
                          <div class="col-md-12" id="map" >
                              <div class="hpadding20">
                                  <div id="map_canvas" class=""></div>
                              </div>
                              <div class="lat-long-div-text" style="display: none;">
                                  <span class="text-danger"><label class="d-none">[ NOTE *: You can drag the marker ]</label></span>        
                              </div>
                          </div>
                      </div>
                  </div>                  
                  <div class="form-group {{ $errors->has('user_timezone') ? ' is-invalid' : '' }}">
                    <label for="user_timezone">Select timezone <span class="text-danger">*</span></label>
                    <select class="form-control select2 timezone {{ $errors->has('user_timezone') ? ' is-invalid' : '' }}" id="timezone" name="user_timezone">
                      <option value="">-- Select timezone --</option>
                    </select>                    
                    @if ($errors->has('user_timezone'))
                        <span class="form-control-feedback text-danger user_timezone" role="alert">
                          <strong>{{ $errors->first('user_timezone') }}</strong>
                        </span>
                    @endif
                  </div>
                  <div class="form-group">
                    <label for="state">State</label>
                    <input type="text" class="form-control" id="state" placeholder="Enter State" name="state" value="{{ old('state')? old('state'):($recordDetails['user_profile']['state']??'') }}">
                  </div> 

                  <div class="form-group">
                    <label for="exampleInputPassword1">Zip code</label>
                    <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Enter zip code" name="zip_code" value="{{ old('zip_code')??'' }}">
                  </div>

                  <div class="form-group {{ $errors->has('profile_image') ? ' is-invalid' : '' }}">
                    <label for="exampleInputFile">Profile image</label>
                    <div class="input-group">
                      <div class="custom-file mb-3">
                        <input type="file" class="custom-file-input {{ $errors->has('profile_image') ? ' is-invalid' : '' }}" id="customFile" name="profile_image" value="{{ old('profile_image')??'' }}">
                        <label class="custom-file-label" for="customFile">Choose file</label>
                      </div>                      
                    </div>
                    @if ($errors->has('profile_image'))
                        <span class="form-control-feedback text-danger" role="alert">
                          <strong>{{ $errors->first('profile_image') }}</strong>
                        </span>
                    @endif

                    <span class="text-danger" >
                      <strong>Note: {{ ucwords(str_replace("-", " ", $userType)) }} will receive an email with login credential.</strong>
                    </span>                    
                  </div>                                  
                </div>
                <!-- /.card-body -->

                <div class="card-footer">
                  <a href="{{ url('admin/users/'.$userType.'/list') }}" class="btn btn-danger">Back</a>&nbsp;
                  <button type="submit" class="btn btn-primary">Save</button>
                </div>
              </form>
            </div>          
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>        
        <!-- /.row (main row) -->
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
@endsection

@section('scripts')
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key={{ get_setting('google-api-key') }}"></script>

<script type="text/javascript">
  $('.select2').select2({
    placeholder: "Select school",
    multiple: false,
    dropdownCssClass: "bigdrop",
    allowClear: true,
    escapeMarkup: function (m) { return m; }
  });

  // Add the following code if you want the name of the file appear on select
  $(".custom-file-input").on("change", function() {
    var fileName = $(this).val().split("\\").pop();
    $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
  });
    
</script>

<script>
    $(document).ready(function() {
        $('button[type="submit"]').on("click", function() {          
            var country_code = $(".iti__selected-dial-code").text();
            $("input[name=country_code]").val(country_code);

            var latitude = $('input[name=latitude]').val().trim();
            var longitude = $('input[name=longitude]').val().trim();

            if(latitude.length == 0 || longitude.length == 0 || latitude.length == '' || longitude.length == ''){
              alert("Enter valid address");
              return false;
            }

            return true;
        });

        jQuery(document).on('click, change','form select', function() {
          $(this).removeClass("is-invalid").parents('div.is-invalid').find('span.form-control-feedback.text-danger').hide();
        });
    });
</script>

<script type="text/javascript">
  $("#address").on("blur", function(){
    var address  = $('textarea[name=address]').val().trim();
    $('input[name=latitude]').val('');
    $('input[name=longitude]').val('');

    if(address == '') {
        return false;
    }
    var geocoder = new google.maps.Geocoder();            

    geocoder.geocode( { 'address': address}, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {
            var latitude  = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            $('input[name=latitude]').val(latitude);
            $('input[name=longitude]').val(longitude);
            //console.log(latitude+"--"+longitude);

            setTimeout(function () {
                initialize(latitude, longitude)
            }, 10);
        }
        else{
            $('input[name=latitude]').val('');
            $('input[name=longitude]').val('');
        } 
    });
}); //.blur();

function initialize(latitude, longitude) {
    $('.loader').hide();
    $("#map_canvas").css({height: '300px', width: '100%' });
    $(".lat-long-div-text, .address-valid").show();        
    var myLatLng = {lat: latitude, lng: longitude};
    
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: myLatLng,
        zoom: 14                    
    });
            
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        draggable: false,
        animation: google.maps.Animation.DROP,
        title: latitude + ', ' + longitude 
    }); 

    google.maps.event.addListener(marker,'dragend',function(event){
        $('input[name=latitude]').val(event.latLng.lat());
        $('input[name=longitude]').val(event.latLng.lng());
    });                  
}
</script>
<script>
  var timezones = moment.tz.names();
  var options = [], text, select = $("#timezone");

  for (var i=0; i<timezones.length; i++) {
    text = "(GMT "+moment.tz(timezones[i]).format('Z')+") " + timezones[i];
    select.append($("<option></option>").attr("value", timezones[i]).text(text));
  }

  var $timezoneSelect = $(".select2.timezone");

  $timezoneSelect.select2({
    placeholder: "--- Select your timezone ---",
    multiple: false,
    dropdownCssClass: "bigdrop",
    allowClear: true,
    escapeMarkup: function (m) { return m; }
  });

  $timezoneSelect.on("select2:open", function (e) {
    $("span.user_timezone").hide();
  });

  $timezoneSelect.val(
    "{{ $recordDetails['user_profile']['user_timezone']??'' }}" ).trigger('change');
</script>
@endsection