@extends('layouts.master')

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

@section('content')

<div class="card">
  <div class="card-body">
    <!-- Nav tabs -->
    <form action="{{  url('merchant/'.$merchants->id.'/update') }}" id="form_merchant" method="POST" enctype="multipart/form-data" data-parsley-validate>
      @csrf
      <h2> Merchant Personal Information:</h2>
      <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->first_name) }}" class="form-control {{ $errors->has('first_name') ? 'is-invalid' : '' }}" autocomplete="off" onfocus="manage(this)" 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->last_name) }}" class="form-control {{ $errors->has('last_name') ? 'is-invalid' : '' }}" autocomplete="off" onfocus="manage(this)" 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->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" name="phone" id="phone" value="{{ old('phone', $merchants->phone) }}" autocomplete="off">
          <input type="text" id="formatted-phone" data-parsley-required data-parsley-required-message="The phone field is required" name="formatted-phone" value="{{ old('phone', $merchants->phone) }}" class="form-control {{ $errors->has('phone') ? 'is-invalid' : '' }}" autocomplete="off" onfocus="manage(this)" placeholder="Enter Merchant phone">
          @error('phone')
          <div class="invalid-feedback">
            {{ $message }}
          </div>
          @enderror
        </div>
      </div>

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

    </form>
  </div>
</div>

@endsection

@section('script')
<script>
    var element = document.getElementById('formatted-phone');
    var maskOptions = {
        mask: '+{1}000-000-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