@extends('layout.default')

@section('styles')
    <link href="{{ asset('css/pages/wizard/wizard-4.css') }}" rel="stylesheet" type="text/css"/>
@endsection

@section('css')
    .invalid-feedback{ display: block!important;}
@endsection
@section('content')
    @if(count($errors) > 0 )
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <ul class="p-0 m-0" style="list-style: none;">
                @foreach($errors->all() as $error)
                    <li>{{$error}}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="card-body p-0">
        <div class="card card-custom card-shadowless rounded-top-0">
            <div class="card-body p-0">
                <div class="row justify-content-center py-8 px-8 py-lg-15 px-lg-10">
                    <div class="col-xl-12 col-xxl-10">
                        <form class="form" id="kt_form" action="{{ route('user.store') }}" method="post"
                              enctype="multipart/form-data">
                            @csrf
                            <div class="row justify-content-center">
                                <div class="col-xl-9">
                                    <div class="my-5">
                                        <div class="form-group row">
                                            <label class="col-xl-3 col-lg-3 col-form-label text-left">Avatar</label>
                                            <div class="col-lg-9 col-xl-9">
                                                <div class="image-input image-input-outline"
                                                     id="kt_user_add_avatar">
                                                    <div class="image-input-wrapper"
                                                         style="background-image: url({{ '/media/users/blank.png'  }})"></div>
                                                    <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow"
                                                           data-action="change" data-toggle="tooltip" title=""
                                                           data-original-title="Change avatar">
                                                        <i class="fa fa-pen icon-sm text-muted"></i>
                                                        <input type="file" name="avatar"
                                                               accept=".png, .jpg, .jpeg"/>
                                                        <input type="hidden" name="avatar_remove"/>
                                                    </label>
                                                    <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow"
                                                          data-action="cancel" data-toggle="tooltip"
                                                          title="Cancel avatar">
																							<i class="ki ki-bold-close icon-xs text-muted"></i>
																						</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-xl-3 col-lg-3 col-form-label">First Name <b
                                                        class="text-danger">*</b></label>
                                            <div class="col-lg-9 col-xl-9">
                                                <input class="form-control form-control-solid form-control-lg"
                                                       name="first_name" type="text" value=""/>
                                                @error('first_name')
                                                <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-xl-3 col-lg-3 col-form-label">Last Name <b
                                                        class="text-danger">*</b></label>
                                            <div class="col-lg-9 col-xl-9">
                                                <input class="form-control form-control-solid form-control-lg"
                                                       name="last_name" type="text" value=""/>
                                                @error('last_name')
                                                <span class="invalid-feedback" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-xl-3 col-lg-3 col-form-label">Code <b class="text-danger">*</b></label>
                                            <div class="col-lg-9 col-xl-9">
                                                <input class="form-control form-control-solid form-control-lg"
                                                       name="code" id="code" maxlength="5" type="text" value=""/>
                                                @error('code')
                                                <span class="invalid-feedback" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-xl-3 col-lg-3 col-form-label">Mobile no <b
                                                        class="text-danger">*</b></label>
                                            <div class="col-lg-9 col-xl-9">
                                                <div class="input-group input-group-solid input-group-lg">
                                                    <div class="input-group-prepend">
                                                            <span class="input-group-text">
                                                                <i class="la la-mobile"></i>
                                                            </span>
                                                    </div>
                                                    <input type="text" class="form-control form-control-solid"
                                                           name="mobile_no" placeholder="Mobile number"
                                                           data-inputmask='"mask": "99999 99999"' data-mask
                                                           pattern="^\[0-9]{5}\s[0-9]{5}$">
                                                    @error('mobile_no')
                                                    <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-xl-3 col-lg-3 col-form-label">Email / Username <b
                                                        class="text-danger">*</b></label>
                                            <div class="col-lg-9 col-xl-9">
                                                <div class="input-group input-group-solid input-group-lg">
                                                    <div class="input-group-prepend">
                                                            <span class="input-group-text">
                                                                <i class="la la-at"></i>
                                                            </span>
                                                    </div>
                                                    <input type="text"
                                                           class="form-control form-control-solid form-control-lg"
                                                           name="email" value="" autocomplete="off"/>
                                                    @error('email')
                                                    <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                    @enderror
                                                </div>
                                                <span class="form-text text-muted">Your Email ID is your Username.</span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label col-xl-3 col-lg-3">Role <b class="text-danger">*</b></label>
                                            <div class="col-xl-9 col-lg-9">
                                                <select class="form-control form-control-lg form-control-solid roles_select2-js"
                                                        name="role" data-action="{{ route('role.dealer_distributor_autocomplete') }}"
                                                        data-placeholder="Select Role">
                                                </select>
                                                @error('role')
                                                <span class="invalid-feedback"
                                                      role="alert"><strong>{{ $message }}</strong></span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label col-xl-3 col-lg-3">Branch <b
                                                        class="text-danger">*</b></label>
                                            <div class="col-xl-9 col-lg-9">
                                                <select class="form-control form-control-lg form-control-solid branch_select2-js" id="branch_id"
                                                        name="branch_id[]" data-action="{{ route('branch.autocomplete') }}"
                                                        data-placeholder="Select Branch" multiple>
                                                </select>
                                                @error('branch')
                                                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label col-xl-3 col-lg-3">Password <b
                                                        class="text-danger">*</b></label>
                                            <div class="col-xl-9 col-lg-9">
                                                <input class="form-control form-control-solid form-control-lg"
                                                       name="password" type="password" value="">
                                                @error('password')
                                                <span class="invalid-feedback" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="text-center">

                                        <div>
                                            @PermissionsCan(groupPermissionName('user.store'))
                                            <div class="btn-group">
                                                <button type="submit" class="btn btn-primary font-weight-bolder" data-wizard-type="action-submit">
                                                    <i class="ki ki-check icon-sm"></i><u>S</u>ave
                                                </button>
                                            </div>
                                            @endPermissionsCan
                                            @PermissionsCan(groupPermissionName('user.index'))
                                            <a href="{{ route('user.index') }}" class="btn btn-light-primary font-weight-bolder mr-2">
                                                <i class="ki ki-long-arrow-back icon-sm"></i>Back(ESC)</a>
                                            @endPermissionsCan
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}" type="text/javascript"></script>
    <script type="text/javascript" src="{{ url('js/modules/user/create.js?v='.time()) }}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('input').attr('autocomplete', 'off');
        });
    </script>
@endsection