@extends('layouts.app')

@section('title', __( 'user.add_user' ))

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
  <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">@lang( 'user.add_user' )</h1>
</section>

<!-- Main content -->
<section class="content">
{!! Form::open(['url' => action([\App\Http\Controllers\ManageUserController::class, 'store']), 'method' => 'post', 'id' => 'user_add_form' ]) !!}
  <div class="row">
    <div class="col-md-12">
  @component('components.widget')
      <div class="col-md-2">
        <div class="form-group">
          {!! Form::label('surname', __( 'business.prefix' ) . ':') !!}
            {!! Form::text('surname', null, ['class' => 'form-control', 'placeholder' => __( 'business.prefix_placeholder' ) ]); !!}
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group">
          {!! Form::label('first_name', __( 'business.first_name' ) . ':*') !!}
            {!! Form::text('first_name', null, ['class' => 'form-control', 'required', 'placeholder' => __( 'business.first_name' ) ]); !!}
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group">
          {!! Form::label('last_name', __( 'business.last_name' ) . ':') !!}
            {!! Form::text('last_name', null, ['class' => 'form-control', 'placeholder' => __( 'business.last_name' ) ]); !!}
        </div>
      </div>
      <div class="col-md-4">
        <div class="form-group">
          {!! Form::label('email', __( 'business.email' ) . ':*') !!}
          {!! Form::text('email', null, ['class' => 'form-control', 'required', 'placeholder' => __( 'business.email' ) ]); !!}
          {{-- Validation error message --}}
          @if ($errors->has('email'))
              <p class="help-block text-danger">{{ $errors->first('email') }}</p>
          @endif
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="col-md-3">
        <div class="form-group">
          <div class="checkbox">
            <br/>
            <label>
                 {!! Form::checkbox('is_active', 'active', true, ['class' => 'input-icheck status']); !!} {{ __('lang.status_for_user') }}
            </label>
            @show_tooltip(__('lang.tooltip_enable_user_active'))
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group">
          <div class="checkbox">
            <br/>
            <label>
                 {!! Form::checkbox('supervisor', 1, false, ['class' => 'input-icheck status', 'id' => 'supervisor_checkbox']); !!} {{ __('lang.supervisor') }}
            </label>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group">
          <div class="checkbox">
            <br/>
            <label>
                 {!! Form::checkbox('sales_person', 1, false, ['class' => 'input-icheck status']); !!} {{ __('lang.as_sales_person') }}
            </label>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group">
          <div class="checkbox">
            <br/>
            <label>
                 {!! Form::checkbox('is_enable_service_staff_pin', 1, false, ['class' => 'input-icheck status', 'id' => 'is_enable_service_staff_pin']); !!} {{ __('lang.enable_service_staff_pin') }}
            </label>
            @show_tooltip(__('lang.tooltip_is_enable_service_staff_pin'))
          </div>
        </div>
      </div>
      <div class="col-md-3 hide service_staff_pin_div">
        <div class="form-group">
          {!! Form::label('service_staff_pin', __( 'lang.staff_pin' ) . ':') !!}
            {!! Form::password('service_staff_pin', ['class' => 'form-control', 'required' => true, 'placeholder' => __( 'lang.staff_pin' ) ]); !!}
        </div>
      </div>
  @endcomponent
  </div>
  <div class="col-md-12">
    @component('components.widget', ['title' => __('lang.roles_and_permissions')])
      <div class="col-md-12" id="allocate_sales_person_div" hidden>
        {!! Form::label('allocate_supervisor_ids', __('lang.allocate_supervisor') . ':') !!}
        <!-- زرار تحديد الكل -->
        <button type="button"  class="btn btn-success btn-xs select_sales_person"><i class="fa fa-check" id="select_sales_person" style="font-size: 10px;"></i></button>
        <!-- زرار إلغاء التحديد -->
        <button type="button"  class="btn btn-danger btn-xs deselect_sales_person"><i class="fa fa-times" id="deselect_sales_person" style="font-size: 10px;"></i></button>
        <div class="form-group">
            {!! Form::select('allocate_supervisor_ids[]', getSalesPersons(), null , ['class' => 'form-control select', 'id' => 'sales_person_id', 'multiple' => 'multiple', 'style' => 'width: 300px !important;']) !!}
        </div>
      </div>

      <div class="col-md-4">
        <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('allow_login', 1, true, 
                [ 'class' => 'input-icheck', 'id' => 'allow_login']); !!} {{ __( 'lang.allow_login' ) }}
              </label>
            </div>
        </div>
      </div>

      @if($is_superadmin)
      <div class="col-md-4">
        <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('allow_login_app', 1, false, [ 'class' => 'input-icheck', 'id' => 'allow_login_app']); !!} {{ __( 'lang.allow_login_on_application_only' ) }}
              </label>
            </div>
        </div>
      </div>
      @endif

      <div class="col-md-4">
        <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('allow_customer_location', 1, false, [ 'class' => 'input-icheck', 'id' => 'allow_customer_location']); !!} {{ __( 'lang.allow_editing_customer_location' ) }}
              </label>
            </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('allow_orders_outside_location', 1, false, 
                [ 'class' => 'input-icheck', 'id' => 'allow_orders_outside_location']); !!} {{ __( 'lang.allow_orders_outside_assigned_location' ) }}
              </label>
            </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('display_quantities', 1, false, 
                [ 'class' => 'input-icheck', 'id' => 'display_quantities']); !!} {{ __( 'lang.display_quantities' ) }}
              </label>
            </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_pricelist', 1, false, 
                [ 'class' => 'input-icheck', 'id' => 'show_pricelist']); !!} {{ __( 'lang.show_pricelist' ) }}
              </label>
            </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('enable_show_page_purchace_app', 1, true, 
                [ 'class' => 'input-icheck', 'id' => 'enable_show_page_purchace_app']); !!} {{ __( 'lang.enable_show_page_purchace_app' ) }}
              </label>
            </div>
        </div>
      </div>

      <div class="clearfix"></div>
      <div class="user_auth_fields">
        <div class="col-md-4">
          <div class="form-group">
            {!! Form::label('username', __( 'business.username' ) . ':') !!}
            @if(!empty($username_ext))
              <div class="input-group">
                {!! Form::text('username', null, ['class' => 'form-control', 'placeholder' => __( 'business.username' ) ]); !!}
                <span class="input-group-addon">{{$username_ext}}</span>
              </div>
              <p class="help-block" id="show_username"></p>
            @else
                {!! Form::text('username', null, ['class' => 'form-control', 'placeholder' => __( 'business.username' ) ]); !!}
            @endif
            {{-- Validation error message --}}
            @if ($errors->has('username'))
                <p class="help-block text-danger">{{ $errors->first('username') }}</p>
            @endif
            <p class="help-block">@lang('lang.username_help')</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="form-group">
            {!! Form::label('password', __( 'business.password' ) . ':*') !!}
            {!! Form::password('password', ['class' => 'form-control', 'required', 'placeholder' => __( 'business.password' ) ]); !!}
          </div>
        </div>
        <div class="col-md-4">
          <div class="form-group">
            {!! Form::label('confirm_password', __( 'business.confirm_password' ) . ':*') !!}
              {!! Form::password('confirm_password', ['class' => 'form-control', 'required', 'placeholder' => __( 'business.confirm_password' ) ]); !!}
          </div>
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="col-md-4">
        <div class="form-group">
          {!! Form::label('role', __( 'user.role' ) . ':*') !!} @show_tooltip(__('lang.admin_role_location_permission_help'))
            {!! Form::select('role', $roles, null, ['class' => 'form-control select2']); !!}
        </div>
      </div>
      @if(!empty($accounts))
        <div class="col-md-4">
          <div class="form-group">
            {!! Form::label("account_id" , __('lang_v1.payment_account') . ':') !!}
            <div class="input-group">
              <span class="input-group-addon">
                <i class="fas fa-money-bill-alt"></i>
              </span>
              {!! Form::select("account_id", $accounts, null, ['class' => 'form-control select2 account-dropdown', 'style' => 'width:100%;']); !!}
            </div>
          </div>
        </div>
      @endif
      <div class="col-md-4">
        <div class="form-group">
          {!! Form::label("stock_id" , __('lang.stock') . ':') !!}
          <div class="input-group">
            <span class="input-group-addon">
              <i class="fas fa-money-bill-alt"></i>
            </span>
            {!! Form::select("stock_id", ['' => __('lang.selected')] + $stocks->toArray(), null, ['class' => 'form-control select2 account-dropdown', 'style' => 'width:100%;']); !!}
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="form-group">
            {!! Form::label('time_zone', __('business.time_zone') . ':') !!}
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fas fa-clock"></i>
                </span>
                {!! Form::select('time_zone', $timezone_list, $business->time_zone, ['class' => 'form-control select2', 'required']); !!}
            </div>
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="col-md-3">
        <h4>@lang( 'role.access_locations' ) @show_tooltip(__('tooltip.access_locations_permission'))</h4>
      </div>
      <div class="col-md-9">
        {{-- <div class="col-md-12">
          <div class="checkbox">
              <label>
                {!! Form::checkbox('access_all_locations', 'access_all_locations', true, ['class' => 'input-icheck']); !!} {{ __( 'role.all_locations' ) }} 
              </label>
              @show_tooltip(__('tooltip.all_location_permission'))
          </div>
        </div> --}}
        @foreach($locations as $location)
        <div class="col-md-12">
          <div class="checkbox">
            <label>
              {!! Form::checkbox('location_permissions[]', 'location.' . $location->id, false, 
              [ 'class' => 'input-icheck']); !!} {{ $location->name }} @if(!empty($location->location_id))({{ $location->location_id}}) @endif
            </label>
          </div>
        </div>
        @endforeach
      </div>
    @endcomponent
  </div>

  <div class="col-md-12">
    @component('components.widget', ['title' => __('sale.sells')])
      <div class="col-md-4">
        <div class="form-group">
          {!! Form::label('cmmsn_percent', __( 'lang.cmmsn_percent' ) . ':') !!} @show_tooltip(__('lang.commsn_percent_help'))
            {!! Form::text('cmmsn_percent', null, ['class' => 'form-control input_number', 'placeholder' => __( 'lang.cmmsn_percent' ) ]); !!}
        </div>
      </div>
      <div class="col-md-4">
        <div class="form-group">
          {!! Form::label('max_sales_discount_percent', __( 'lang.max_sales_discount_percent' ) . ':') !!} @show_tooltip(__('lang.max_sales_discount_percent_help'))
            {!! Form::text('max_sales_discount_percent', null, ['class' => 'form-control input_number', 'placeholder' => __( 'lang.max_sales_discount_percent' ) ]); !!}
        </div>
      </div>
      <div class="clearfix"></div>
      
      {{-- <div class="col-md-4">
        <div class="form-group">
            <div class="checkbox">
            <br/>
              <label>
                {!! Form::checkbox('selected_contacts', 1, false, 
                [ 'class' => 'input-icheck', 'id' => 'selected_contacts']); !!} {{ __( 'lang.allow_selected_contacts' ) }}
              </label>
              @show_tooltip(__('lang.allow_selected_contacts_tooltip'))
            </div>
        </div>
      </div>
      <div class="col-sm-4 hide selected_contacts_div">
          <div class="form-group">
              {!! Form::label('user_allowed_contacts', __('lang.selected_contacts') . ':') !!}
              <div class="form-group">
                  {!! Form::select('selected_contact_ids[]', [], null, ['class' => 'form-control select2', 'multiple', 'style' => 'width: 100%;', 'id' => 'user_allowed_contacts' ]); !!}
              </div>
          </div>
      </div> --}}

    @endcomponent
  </div>

  </div>
    @include('user.edit_profile_form_part')

    @if(!empty($form_partials))
      @foreach($form_partials as $partial)
        {!! $partial !!}
      @endforeach
    @endif
  <div class="row">
    <div class="col-md-12 text-center">
      <button type="submit" class="tw-dw-btn tw-dw-btn-primary tw-dw-btn-lg tw-text-white" id="submit_user_button">@lang( 'messages.save' )</button>
    </div>
  </div>
{!! Form::close() !!}
  @stop
@section('javascript')
<script type="text/javascript">
  $(document).ready(function () {
    // تفعيل select2
    $('#sales_person_id').select2();

    // تحديد الكل
    $('.select_sales_person').click(function () {
        let allOptions = $('#sales_person_id option').map(function () {
            return $(this).val();
        }).get();

        $('#sales_person_id').val(allOptions).trigger('change');
    });

    // إلغاء التحديد
    $('.deselect_sales_person').click(function () {
        $('#sales_person_id').val(null).trigger('change');
    });

    $('#supervisor_checkbox').on('ifChecked', function(event){
      $('#allocate_sales_person_div').attr('hidden', false);
    });
    $('#supervisor_checkbox').on('ifUnchecked', function(event){
      $('#allocate_sales_person_div').attr('hidden', true);
    });
  });

  __page_leave_confirmation('#user_add_form');
  $(document).ready(function(){
    $('#selected_contacts').on('ifChecked', function(event){
      $('div.selected_contacts_div').removeClass('hide');
    });
    $('#selected_contacts').on('ifUnchecked', function(event){
      $('div.selected_contacts_div').addClass('hide');
    });

    $('#is_enable_service_staff_pin').on('ifChecked', function(event){
      $('div.service_staff_pin_div').removeClass('hide');
    });

    $('#is_enable_service_staff_pin').on('ifUnchecked', function(event){
      $('div.service_staff_pin_div').addClass('hide');
      $('#service_staff_pin').val('');
    });

    $('#allow_login').on('ifChecked', function(event){
      $('div.user_auth_fields').removeClass('hide');
    });
    $('#allow_login').on('ifUnchecked', function(event){
      $('div.user_auth_fields').addClass('hide');
    });

    $('#user_allowed_contacts').select2({
        ajax: {
            url: '/contacts/customers',
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {
                    q: params.term, // search term
                    page: params.page,
                    all_contact: true
                };
            },
            processResults: function(data) {
                return {
                    results: data,
                };
            },
        },
        templateResult: function (data) { 
            var template = '';
            if (data.supplier_business_name) {
                template += data.supplier_business_name + "<br>";
            }
            template += data.text + "<br>" + LANG.mobile + ": " + data.mobile;

            return  template;
        },
        minimumInputLength: 1,
        escapeMarkup: function(markup) {
            return markup;
        },
    });
  });

  $('form#user_add_form').validate({
                rules: {
                    first_name: {
                        required: true,
                    },
                    email: {
                        email: true,
                        remote: {
                            url: "/business/register/check-email",
                            type: "post",
                            data: {
                                email: function() {
                                    return $( "#email" ).val();
                                }
                            }
                        }
                    },
                    password: {
                        required: true,
                        minlength: 5
                    },
                    confirm_password: {
                        equalTo: "#password"
                    },
                    username: {
                        minlength: 5,
                        remote: {
                            url: "/business/register/check-username",
                            type: "post",
                            data: {
                                username: function() {
                                    return $( "#username" ).val();
                                },
                                @if(!empty($username_ext))
                                  username_ext: "{{$username_ext}}"
                                @endif
                            }
                        }
                    }
                },
                messages: {
                    password: {
                        minlength: 'Password should be minimum 5 characters',
                    },
                    confirm_password: {
                        equalTo: 'Should be same as password'
                    },
                    username: {
                        remote: 'Invalid username or User already exist'
                    },
                    email: {
                        remote: '{{ __("validation.unique", ["attribute" => __("business.email")]) }}'
                    }
                }
            });
  $('#username').change( function(){
    if($('#show_username').length > 0){
      if($(this).val().trim() != ''){
        $('#show_username').html("{{__('lang.your_username_will_be')}}: <b>" + $(this).val() + "{{$username_ext}}</b>");
      } else {
        $('#show_username').html('');
      }
    }
  });
</script>
@endsection