@extends('layouts.master')

@section('pagetitle')
Edit Profile
@endsection
@section('title')
Edit Profile
@endsection

@section('content')

@php
use App\Models\MerchantSite;
$merchant_sites = MerchantSite::where('merchant_id', @auth('web')->user()->id)->first();
@endphp

<style>
  .without::-webkit-datetime-edit-ampm-field {
    display: none;
  }

  .field-validation-error.errorShow.errorHide{
    display: none;
  }
</style>

<div class="card">
  <div class="card-body">
    <!-- Nav tabs -->

    <h2> Merchant Personal Information:</h2>
    <div class="text-right" style="margin-top: -45px;">
      <a href="{{ url('merchant/edit') }}" class="btn btn-warning btn-flat ">Edit</a>
    </div>
    <hr>

    <div class="form-group row">
      <label class="col-2 col-form-label" for="example-color-input">First Name*</label>
      <div class="col-10">
        <input type="text" data-parsley-required data-parsley-required-message="The first name field is required" name="first_name" value="{{ old('first_name', $merchants->merchant->first_name) }}" class="form-control {{ $errors->has('first_name') ? 'is-invalid' : '' }}" autocomplete="off" onfocus="manage(this)" disabled placeholder="Enter first name">
        @error('first_name')
        <div class="invalid-feedback">
          {{ $message }}
        </div>
        @enderror
      </div>
    </div>

    <div class="form-group row">
      <label class="col-2 col-form-label" for="example-color-input">Last Name*</label>
      <div class="col-10">
        <input type="text" data-parsley-required data-parsley-required-message="The last name field is required" name="last_name" value="{{ old('last_name', $merchants->merchant->last_name) }}" class="form-control {{ $errors->has('last_name') ? 'is-invalid' : '' }}" autocomplete="off" onfocus="manage(this)" disabled placeholder="Enter last name">
        @error('last_name')
        <div class="invalid-feedback">
          {{ $message }}
        </div>
        @enderror
      </div>
    </div>

    <div class="form-group row">
      <label class="col-2 col-form-label" for="example-color-input">Email*</label>
      <div class="col-10">
        <input type="text" data-parsley-required data-parsley-required-message="The email field is required" name="email" value="{{ old('email', $merchants->merchant->email) }}" class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}" disabled autocomplete="off" onfocus="manage(this)" placeholder="Enter email">
        @error('email')
        <div class="invalid-feedback">
          {{ $message }}
        </div>
        @enderror
      </div>
    </div>

    <div class="form-group row">
      <label class="col-2 col-form-label" for="example-color-input">Phone*</label>
      <div class="col-10">
        <input type="hidden" value="" autocomplete="off">
        <input type="text" value="{{ $merchants->merchant->phone }}" class="form-control" autocomplete="off" disabled placeholder="Enter Merchant phone">
      </div>
    </div>

  </div>
</div>

<div class="card">
  <div class="card-body">
    <!-- Nav tabs -->
    <form action="{{ url('merchant-site/'.$merchants->id.'/update') }}" id="form_merchant" method="POST" enctype="multipart/form-data" data-parsley-validate>
      @csrf

      <h2>Merchant Business Information:</h2>
      <hr>

      <div class="form-group row">
        <label class="col-2 col-form-label" for="example-color-input">Business Name*</label>
        <div class="col-10">
          <input type="text" data-parsley-required data-parsley-required-message="The name field is required" name="name" value="{{ old('name', $merchants->name) }}" class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}" autocomplete="off" onfocus="manage(this)" placeholder="Enter name">
          @error('name')
          <div class="invalid-feedback">
            {{ $message }}
          </div>
          @enderror
        </div>
      </div>

      <div class="form-group row">
        <label class="col-2 col-form-label" for="example-color-input">Business Phone Number*</label>
        <div class="col-10">
          <input type="hidden" name="phone" id="phone" value="{{ old('phone', $merchants->phone) }}" autocomplete="off">
          <input type="text" id="formatted-phone" name="formatted-phone" value="{{ old('phone', $merchants->phone) }}" class="form-control {{ $errors->has('phone') ? 'is-invalid' : '' }}" autocomplete="off" onfocus="manage(this)" placeholder="Enter Business phone">
          @error('phone')
          <div class="invalid-feedback">
            {{ $message }}
          </div>
          @enderror
        </div>
      </div>

      <div class="form-group row">
        <label class="col-2 col-form-label" for="example-color-input"> Business License / Legal Documents / Certificate of Insurance / Identity Card*</label>
        <div class="col-10">
          @foreach($merchants->merchantSiteDocument as $doc)
          <iframe src="{{ env('UPLOAD_URL') .'/'.$doc->document }}" width="50%" height="450px;"> </iframe>
          <!-- <embed
            src="{{ env('UPLOAD_URL') .'/'.$doc->document }}" style="width:150px; height:150px;" frameborder="0"   
        > -->
          @endforeach
        </div>
      </div>

      <div class="form-group row">
        <label class="col-2 col-form-label" for="example-color-input"> Business Type*</label>
        <div class="col-10">

          <input type="text" name="business_type" disabled value="{{ ucfirst(@$merchants->business_type) }}" autocomplete="off" class="form-control {{ $errors->has('business_type') ? 'is-invalid' : '' }}">
          @error('business_type')
          <div class="invalid-feedback">
            {{ $message }}
          </div>
          @enderror

        </div>
      </div>

      <div class="form-group row">
        <label class="col-2 col-form-label" for="example-color-input"> Image*</label>
        <div class="col-10">
          <input type="file" id="fileInput" {{ $merchants->image === null ? 'data-parsley-required' : '' }} data-parsley-required-message="The image field is required" name="image" id="fileInput" class="form-control help-block {{ $errors->has('image') ? 'is-invalid' : '' }}" onchange="previewOldImg(this);" value="{{ env('UPLOAD_URL').'/'.$merchants->image }}">
          <span id="error-image"></span>
          @if($merchants->image)
          <img id="oldImg" src="{{ env('UPLOAD_URL').'/'.$merchants->image }}" style="object-fit: cover; max-height: 250px;">
          @else
          <img src="{{ url('images/dummy-logo.png') }}" style="width: 153px; height: 153px;">
          @endif
          @error('image')
          <div class="invalid-feedback">
            {{ $message }}
          </div>
          @enderror
        </div>
      </div>

      <div class="form-group row">
        <label class="col-2 col-form-label" for="example-color-input"> Cover Image*</label>
        <div class="col-10">
          <input type="file" id="fileCoverInput" {{ $merchants->cover_image === null ? 'data-parsley-required' : '' }} data-parsley-required-message="The cover image field is required" name="cover_image" id="filesInput" class="form-control {{ $errors->has('cover_image') ? 'is-invalid' : '' }}" onchange="previewFile(this);">
          <span id="error"></span>
          @if( $merchants->image)
          <img id="previewImg" src="{{ env('UPLOAD_URL').'/'.$merchants->cover_image }}" style="max-height: 250px; overflow-y: hidden; object-fit: cover;">
          @else
          <img src="{{ url('images/dummy-logo.png') }}" style="width: 153px; height: 153px;">
          @endif
          @error('cover_image')
          <div class="invalid-feedback">
            {{ $message }}
          </div>
          @enderror
        </div>
      </div>

      <div class="form-group row">
        <label class="col-2 col-form-label" for="example-color-input"> Minimum Order Amount*</label>
        <div class="col-10">
          <input type="text" name="min_order_amount" data-parsley-required data-parsley-required-message="The amount field is required" value="{{ old('min_order_amount', $merchants->min_order_amount) }}" onfocus="manage(this)" autocomplete="off" class="form-control {{ $errors->has('min_order_amount') ? 'is-invalid' : '' }}" placeholder="Enter minimum amount order">
          @error('min_order_amount')
          <div class="invalid-feedback">
            {{ $message }}
          </div>
          @enderror
        </div>
      </div>


      <div class="form-group row">
        <label class="col-2 col-form-label" for="example-color-input"> Minimum Cook Time*</label>
        <div class="col-10">
          <!-- <div class="clockpicker" data-placement="bottom" data-align="top" data-autoclose="true"> -->
          <input type="text" id="timepicker" class="form-control bootstrapMaterialDatePicker {{ $errors->has('min_cook_time') ? 'is-invalid' : '' }}" data-parsley-required data-parsley-required-message="The time field is required" name="min_cook_time" value="{{ old('min_cook_time',  Carbon\Carbon::parse($merchants['min_cook_time'])->format('h:i')) }}" placeholder="Enter hr/min">
          <!-- <div class="input-group-append">
              <span class="input-group-text"><i class="icon-clock"></i></span>
            </div> -->
          @error('min_cook_time')
          <div class="invalid-feedback">
            {{ $message }}
          </div>
          @enderror
          <!-- </div> -->
        </div>
      </div>


      <!-- <div class="form-group row">
        <label class="col-2 col-form-label" for="example-color-input"> Minimum Cook Time*</label>
        <div class="col-10">
          <input type="time" name="min_cook_time" data-parsley-required value="{{ Carbon\Carbon::parse($merchants['min_cook_time'])->format('h:i'); }}" autocomplete="off" class="form-control without {{ $errors->has('min_cook_time') ? 'is-invalid' : '' }}" placeholder=" Enter hr/min">
          @error('min_cook_time')
          <div class="invalid-feedback">
            {{ $message }}
          </div>
          @enderror
        </div>
      </div> -->

      <div class="form-group row">
        <label class="col-2 col-form-label" for="example-color-input"> Price Range*</label>
        <div class="col-10">
          <select name="price_range" id="mySelect" data-parsley-required data-parsley-required-message="The price range field is required" class="form-control  {{ $errors->has('price_range') ? 'is-invalid' : '' }}">
            <option value="">Select Price Range</option>
            <!-- <option value="{{ $merchants->price_range }}" {{ @$merchants['price_range'] ? "selected" : "" }} disabled>{{ $merchants->price_range }}</option> -->
            <option value="1" {{ $merchants->price_range == 1 ? "selected" : ""}}>1</option>
            <option value="2" {{ $merchants->price_range == 2 ? "selected" : "" }}>2</option>
            <option value="3" {{ $merchants->price_range == 3 ? "selected" : "" }}>3</option>
            @error('price_range')
            <div class="invalid-feedback">
              {{ $message }}
            </div>
            @enderror
          </select>
        </div>
      </div>

      <div class="form-group row">
        <label class="col-2 col-form-label" for="example-color-input"> Food Type*</label>
        <div class="col-10">
          <select name="food_type" id="foodtype" data-parsley-required data-parsley-required-message="The food type field is required" id="food_type" class="form-control @error('food_type') is-invalid @enderror">
            <!-- <option value="{{ $merchants->food_type }}" {{ @$merchants['food_type'] ? "selected" : "" }} disabled>{{ $merchants->food_type }}</option> -->
            <option value="">Select Food Type</option>
            @foreach($foodCategories as $f)
            <option value="{{ $f->food_type }}" {{ $f->food_type == @$merchants['food_type'] ? "selected" : "" }}>
              {{ ucfirst($f->food_type) }}
            </option>
            <!-- <option value="{{ $f->food_type }}">{{  $f->food_type }} </option> -->
            @endforeach

            @error('food_type')
            <div class="invalid-feedback">
              {{ $message }}
            </div>
            @enderror
          </select>
          <!-- <input type="text" name="food_type" value="{{ $merchants->food_type }}" autocomplete="off" class="form-control"> -->
        </div>
      </div>

      @if($merchant_sites->business_type == 'grocery')

      <div class="form-group row">
        <label class="col-2 col-form-label" for="example-color-input"> Site Type*</label>
        <div class="col-10">
          <select name="site_type" id="siteType" data-parsley-required data-parsley-required-message="The site type field is required" id="site_type" class="form-control @error('site_type') is-invalid @enderror">
            <option value="">Select Site Type</option>
            <!-- <option value="{{ $merchants->site_type }}" {{ @$merchants['site_type'] ? "selected" : "" }} disabled>{{ $merchants->site_type }}</option> -->
            <option value="wholesale" {{ @$merchants->site_type ? "selected" : ""}}>wholesale</option>
            <option value="retail" {{ @$merchants->site_type ? "selected" : ""}}>retail</option>
            @error('site_type')
            <div class="invalid-feedback">
              {{ $message }}
            </div>
            @enderror
          </select>
          <!-- <input type="text" name="food_type" value="{{ $merchants->food_type }}" autocomplete="off" class="form-control"> -->
        </div>
      </div>
      @endif

      <div class="form-group row">
        <label class="col-2 col-form-label" for="example-color-input"> Description*</label>
        <div class="col-10">
          <textarea id="ckeditor" name="description" data-parsley-required="true" data-parsley-errors-container="#description-errors" data-parsley-required-message="This description field is required" rows="6">{{ $merchants->description }}</textarea>
          <!-- <textarea data-parsley-required class="ckeditor {{ $errors->has('description') ? 'is-invalid' : '' }}" rows="25" cols="15" id="description" name="description"> {{ $merchants->description }} </textarea> -->

          <div id="description-errors"></div>
        </div>
      </div>

      <input type="hidden" id="latitude" name="latitude" value="{{ $merchants->latitude }}">
      <input type="hidden" id="longitude" name="longitude" value="{{ $merchants->longitude }}">

      <div class="form-group row">
        <label class="col-2 col-form-label" for="example-color-input"> Location*</label>
        <div class="col-10">
          <div id="pac-container">
            <input id="autocomplete" type="text" data-parsley-required data-parsley-required-message="The location field is required" name="address" id="tbName" value="{{ $merchants->address }}" class="form-control {{ $errors->has('address') ? 'is-invalid' : '' }}" onFocus="geolocate()" autocomplete="off" placeholder=" Enter Location">
            @error('address')
            <div class="invalid-feedback">
              {{ $message }}
            </div>
            @enderror

          </div>
        </div>
      </div>
      
      <div class="form-group row">
        <label class="col-2 col-form-label" for="example-color-input"> City*</label>
        <div class="col-10">
          <input type="text" name="city" id="locality" data-parsley-required data-parsley-required-message="The city field is required" value="{{ old('city', $merchants->city) }}" class="form-control {{ $errors->has('city') ? 'is-invalid' : '' }}" autocomplete="off" onfocus="manage(this)" disabled="true" placeholder="Enter city">
          @error('city')
          <div class="invalid-feedback">
            {{ $message }}
          </div>
          @enderror
        </div>
      </div>

      <div class="form-group row">
        <label class="col-2 col-form-label" for="example-color-input"> State*</label>
        <div class="col-10">
          <input type="text" id="administrative_area_level_1" name="state" data-parsley-required data-parsley-required-message="The state field is required" value="{{ old('state', $merchants->state) }}" class="form-control {{ $errors->has('state') ? 'is-invalid' : '' }}" autocomplete="off" onfocus="manage(this)" disabled="true" placeholder="Enter state">
          @error('state')
          <div class="invalid-feedback">
            {{ $message }}
          </div>
          @enderror
        </div>
      </div>

      <div class="form-group row">
        <label class="col-2 col-form-label" for="example-color-input"> Country*</label>
        <div class="col-10">
          <input type="text" id="country" name="country" data-parsley-required data-parsley-required-message="The country field is required" value="{{ old('country', $merchants->country) }}" autocomplete="off" disabled class="form-control {{ $errors->has('country') ? 'is-invalid' : '' }}" onfocus="manage(this)" placeholder="Enter country">
          @error('country')
          <div class="invalid-feedback">
            {{ $message }}
          </div>
          @enderror
        </div>
      </div>

      <div class="form-group row">
        <label class="col-2 col-form-label" for="example-color-input"> Zip*</label>
        <div class="col-10">
          <input type="text" id="postal_code" name="zip" data-parsley-required data-parsley-required-message="The zip field is required" value="{{ old('zip', $merchants->zip) }}" class="form-control {{ $errors->has('zip') ? 'is-invalid' : '' }}" autocomplete="off" onfocus="manage(this)" disabled="true" placeholder="Enter zip">
          @error('zip')
          <div class="invalid-feedback">
            {{ $message }}
          </div>
          @enderror
        </div>
      </div>

      <div id="map" style="width:100%;height:400px;"></div>

      <div id="infowindow-content">
        <span id="place-name" class="title"></span><br />
        <span id="place-address"></span>
      </div>

      <div class="mt-2 text-right">
        <input class="btn btn-warning" id="hide" type="submit" value="Edit" id="btSubmit">
      </div>

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

@section('script')
<script>
  $("#fileInput").change(function() {
    var error = document.getElementById("error-image")
    var val = $(this).val();

    switch (val.substring(val.lastIndexOf('.') + 1).toLowerCase()) {
    case 'gif': case 'jpg': case 'png': case 'jpeg': case 'tiff':
    case 'bmp':
    if ($("#oldImg").is(":hidden")) {
      $("#oldImg").show().css("display", "block");
    }
    break;
    default:
    $(this).val('');
    $("#oldImg").hide();
    $(this).closest('div.form-group').find(".field-validation-error").removeClass("field-validation-error")
      error.innerHTML = "<span style='color: red;'>" +
        "Allowed file format: JPEG, GIF, BMP, TIFF and PNG.</span>"
        break;
      }
    });

  $("#fileCoverInput").change(function() {
    var error = document.getElementById("error")
    var val = $(this).val();

    switch (val.substring(val.lastIndexOf('.') + 1).toLowerCase()) {
    case 'gif': case 'jpg': case 'png': case 'jpeg': case 'tiff':
    case 'bmp':
    if ($("#previewImg").is(":hidden")) {
      $("#previewImg").show().css("display", "block");
    }
    break;
    default:
    $(this).val('');
    $("#previewImg").hide();
      error.innerHTML = "<span style='color: red;'>" +
        "Allowed file format: JPEG, GIF, BMP, TIFF and PNG.</span>"
        break;
      }
  });  

  $(document).ready(function() {
    $(window).keydown(function(event) {
      if (event.keyCode == 13) {
        event.preventDefault();
        return false;
      }
    });
  });

  CKEDITOR.replace('ckeditor');
  CKEDITOR.config = {
    autoUpdateElement: true,
  }

  CKEDITOR.on('instanceReady', function() {
    $('#ckeditor').attr('required', '');
    $.each(CKEDITOR.instances, function(instance) {
      CKEDITOR.instances[instance].on("change", function(e) {
        for (instance in CKEDITOR.instances) {
          CKEDITOR.instances[instance].updateElement();
          $('form').parsley().validate();
        }
      });
    });
  });
</script>

<!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAquzgo847shlU-SpPXLZMgShv6EW9pQmw&callback=initMap&initAutocomplete&libraries=places&v=weekly&channel=2" async> </script> -->

<script>
  //Preview old image 
  function previewOldImg(input) {
    var file = $("input[name=image]").get(0).files[0];

    if (file) {
      var reader = new FileReader();

      reader.onload = function() {
        $("#oldImg").attr("src", reader.result);
      }

      reader.readAsDataURL(file);
    }
  }

  //Preview image cover images
  function previewFile(input) {
    var file = $("input[name=cover_image]").get(0).files[0];

    if (file) {
      var reader = new FileReader();

      reader.onload = function() {
        $("#previewImg").attr("src", reader.result);
      }

      reader.readAsDataURL(file);
    }
  }

  function initialize() {
    initMap();
    initAutocomplete();
  }

  var map, marker;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: 40.749933,
        lng: -73.98633
      },
      zoom: 13
    });
  }

  var placeSearch, autocomplete;
  var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'short_name',
    country: 'long_name',
    postal_code: 'short_name'
  };

  function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    autocomplete = new google.maps.places.Autocomplete(
      /** @type {!HTMLInputElement} */
      (document.getElementById('autocomplete')), {
        types: ['geocode']
      });

    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
  }

  function fillInAddress() {
    // Get the place details from the autocomplete object.
    const place = autocomplete.getPlace();
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17); // Why 17? Because it looks good.
    }
    if (!marker) {
      marker = new google.maps.Marker({
        map: map,
        anchorPoint: new google.maps.Point(0, -29)
      });
    } else marker.setMap(null);
    marker.setOptions({
      position: place.geometry.location,
      map: map
    });

    for (const component in place.componentForm) {
          const componentType = component.types[0];
      document.getElementById(component).value = " ";
      document.getElementById(component).disabled = false;
    }

    //-- ADD LAT AND LON HERE TO APEND TO HIDDEN HTML INPUT 
    document.getElementById("latitude").value = place.geometry.location.lat();
    document.getElementById("longitude").value = place.geometry.location.lng();

    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    for (var i = 0; i < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      if (componentForm[addressType]) {
        const val = place.address_components[i][componentForm[addressType]];
        document.getElementById(addressType).value = val;
      }
    }
  }

  // Bias the autocomplete object to the user's geographical location,
  // as supplied by the browser's 'navigator.geolocation' object.
  function geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        var circle = new google.maps.Circle({
          center: geolocation,
          radius: position.coords.accuracy
        });
        autocomplete.setBounds(circle.getBounds());
      });
    }
  }
</script>

 <!-- map key -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAquzgo847shlU-SpPXLZMgShv6EW9pQmw&libraries=places&callback=initialize" async> </script>

<script>
  var element = document.getElementById('formatted-phone');
  var maskOptions = {
    mask: '+{1}000-000-0000-[0000]',
  };
  var mask = IMask(element, maskOptions);

  $formatted = document.getElementById('formatted-phone');

  $formatted.addEventListener('input', function(e) {
    console.log(e)
    document.getElementById('phone').value = mask.unmaskedValue;
  })
</script>
@endsection