@extends('layouts/contentLayoutMaster')
@section('title', 'Create User')
@section('vendor-style')
  {{-- Page Css files --}}
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/pickers/pickadate/pickadate.css')) }}">
@endsection
@section('page-style')
  {{-- Page Css files --}}
  <link rel="stylesheet" href="{{ asset(mix('css/plugins/forms/validation/form-validation.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('css/pages/app-user.css')) }}">
  <style>
    select[readonly], #myCheck[readonly], #myCheckLabel[readonly] {
      pointer-events:none;
    }
  </style>
@endsection

@php
  $configData = Helper::applClasses();
  $vendor_users = Auth::user();
  $roles = $vendor_users->roles()->pluck('name')->implode(' ');
@endphp

@section('content')
<!-- users edit start -->
<section class="users-edit">
  <div class="card">
    <div class="card-content">
      <div class="card-body">
        <div class="tab-content">
          <div class="tab-pane active" id="account" aria-labelledby="account-tab" role="tabpanel">
            <!-- users edit account form start -->
            <form novalidate action="{{ url('users/store') }}" method="post">
              {{ csrf_field() }}
              <div class="row">
                <div class="col-12 col-sm-5">

                  <!-- <div class="form-group">
                    <label>Select User</label>
                    <select name="status" class="form-control">
                      <option value="0">Select User</option>
                      @if($users)
                        @foreach($users as $user)
                          <option value="{{ $user->id }}">{{ $user->first_name }} {{ $user->middle_name }} {{ $user->last_name }}</option>
                        @endforeach
                      @endif
                      <option value="new">New</option>
                    </select>
                  </div> -->

                  
                  <div>
                    <input type="checkbox" id="myCheck" {{ ($roles == 'VENDOR_ADMIN') ? 'readonly' : '' }} onclick="myFunction()">
                    <label for="myCheck" id="myCheckLabel" {{ ($roles == 'VENDOR_ADMIN') ? 'readonly' : '' }}>Vendor* (Select for Vendor Users)</label>
                    <div id="text" style="display:none">
                      <div class="row">

                        <div class="col-md-12">
                          <div class="form-group">
                          <label for="vendor_id">Vendor</label>
                            <select class="form-control" name="vendor_id" id="vendor_id" {{ ($roles == 'VENDOR_ADMIN') ? 'readonly' : '' }}>
                              <option value="">Select Vendor</option>
                              @if($roles == 'VENDOR_ADMIN')
                                @if ($vendors)
                                  @foreach ($vendors as $vendor)
                                    @if($vendor->id == $vendor_users->vendor_id)
                                    <option value="{{ $vendor->id }}">{{ $vendor->name }}</option>
                                    @endif
                                  @endforeach
                                @endif
                              @else
                                @if ($vendors)
                                  @foreach ($vendors as $vendor)
                                    <option value="{{ $vendor->id }}">{{ $vendor->name }}</option>
                                  @endforeach
                                @endif
                              @endif
                            </select>
                          </div>
                        </div>

                      </div>

                    </div>
                  </div>

                  <div class="form-group">
                    <div class="controls">
                      <label>First Name <span style="color:red">*</span></label>
                      <input type="text" name="first_name" class="form-control" placeholder="First Name" pattern="[A-Za-z]*" value="{{ old('first_name') }}" required data-validation-required-message="This first_name field is required">
                      @if($errors->has('first_name'))
                        <p class="text-danger">{{ $errors->first('first_name') }}</p>
                      @endif
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="controls">
                      <label>Middle Name</label>
                      <input type="text" name="middle_name" class="form-control" placeholder="Middle Name" pattern="[A-Za-z]*" value="{{ old('middle_name') }}" />
                      @if($errors->has('middle_name'))
                        <p class="text-danger">{{ $errors->first('middle_name') }}</p>
                      @endif
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="controls">
                      <label>Last Name <span style="color:red">*</span></label>
                      <input type="text" name="last_name" class="form-control" placeholder="Last Name" pattern="[A-Za-z]*" value="{{ old('last_name') }}" required data-validation-required-message="This last_name field is required">
                      @if($errors->has('last_name'))
                        <p class="text-danger">{{ $errors->first('last_name') }}</p>
                      @endif
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="controls">
                      <label>E-mail <span style="color:red">*</span></label>
                      <input type="email" name="email" class="form-control" pattern="^([a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*)$" placeholder="Email" value="{{ old('email') }}" required data-validation-required-message="This email field is required">
                      @if($errors->has('email'))
                        <p class="text-danger">{{ $errors->first('email') }}</p>
                      @endif
                    </div>
                  </div>
                  <div class="form-group">
                    <label>Country Code</label>
                    <select name="country_code" id="country_code" class="form-control">
                      <option value="91" Selected>India (+91)</option>
                      <option value="44">UK (+44)</option>
                      <option value="1">USA (+1)</option>
                    </select>
                    @if($errors->has('country_code'))
                      <p class="text-danger">{{ $errors->first('country_code') }}</p>
                    @endif
                  </div>
                  <div class="form-group">
                    <div class="controls">
                      <label>Mobile <span style="color:red">*</span></label>
                      <input type="tel" name="mobile"minlength="10" maxlength="10"   class="form-control" pattern="\d+" placeholder="Mobile" value="{{ old('mobile') }}" required data-validation-required-message="This mobile field is required">
                      @if($errors->has('mobile'))
                        <p class="text-danger">{{ $errors->first('mobile') }}</p>
                      @endif
                    </div>
                  </div>
                  <!-- Email input-->
                  <div class="form-group">
                    <div class="controls">
                      <label>Password <span style="color:red">* </span><small>(Should contain atleast a small, a caps, a digit and a special character.) </small></label>
                      <input name="password" type="password" placeholder="Password" class="form-control" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"   value="{{ old('password') }}" required>
                      @if($errors->has('password'))
                        <p class="text-danger">{{ $errors->first('password') }}</p>
                      @endif
                    </div>
                  </div>

                  <div class="form-group">
                    <label>Status</label>
                    <select name="status" class="form-control">
                      <option value="A">Active</option>
                      <option value="I">Deactive</option>
                    </select>
                  </div>
                  <div class="row">
                    <div class="col-12 d-flex flex-sm-row flex-column justify-content-end mt-1">
                      <button type="submit" class="btn btn-primary glow mb-1 mb-sm-0 mr-0 mr-sm-1">Save Changes</button>
                      <button type="reset" class="btn btn-outline-warning">Reset</button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <!-- users edit account form ends -->
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- users edit ends -->
@endsection

@section('vendor-script')
  {{-- Vendor js files --}}
  <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/forms/validation/jqBootstrapValidation.js')) }}"></script>
  


@endsection

@section('page-script')
  {{-- Page js files --}}
  <script src="{{ asset(mix('js/scripts/pages/app-user.js')) }}"></script>
  <script src="{{ asset(mix('js/scripts/navs/navs.js')) }}"></script>
  <script src="{{ asset(mix('js/scripts/forms/select/form-select2.js')) }}"></script>
  
 
  <script>
    function myFunction() {
      var checkBox = document.getElementById("myCheck");
      var text = document.getElementById("text");
      if (checkBox.checked == true){
        text.style.display = "block";
      } else {
        text.style.display = "none";
      }
    }
  </script>
  @if($vendor_id != NULL)
    <script>
      $('#myCheck').trigger('click');
      
      $(document).ready(function($){
        $('#vendor_id').find('option[value={{ $vendor_id }}]').attr('selected','selected');
      });
    </script>
  @endif

@endsection