@extends('layouts.admin')

@section('title') Create User @endsection

@section('page_title') Create New User @endsection

@section('content')

@push('page_style')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
@endpush

<!-- Basic multiple Column Form section start -->
<section id="multiple-column-form">
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <div class="user_nav">
                @if($id == getIdFromSlug('manager'))


                <div class="breadcrumb-wrapper">
                    <h5>Create New Account Manager</h5>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ url('account',encrypt(getIdFromSlug('manager'))) }}">Account Managers</a></li>
                        <li class="breadcrumb-item"><a class="active" href="#">Create New Account Manager</a></li>
                    </ol>
                </div>

                @elseif ($id == getIdFromSlug('accountant'))

                <div class="breadcrumb-wrapper">
                    <h5>Create New Accountant</h5>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('account',encrypt(getIdFromSlug('accountant'))) }}">Accountants</a></li>
                        <li class="breadcrumb-item"><a class="active" href="#">Create New Accountant</a></li>
                    </ol>
                </div>
                @else

                <div class="breadcrumb-wrapper">
                    <h5>Create New Moderator</h5>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ url('account',encrypt(getIdFromSlug('moderator'))) }}">Moderators</a></li>
                        <li class="breadcrumb-item"><a class="active" href="#">Create New Moderator</a></li>
                    </ol>
                </div>
                @endif

            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <form method="POST" action="{{ route('users.store') }}" autocomplete="off">
                    @csrf
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label class="form-label" for="first_name">First Name <span class="text-danger asteric-sign">&#42;</span></label>
                                    <input id="first_name" type="text" class="form-control {{ $errors->has('first_name') ? ' is-invalid' : '' }}" name="first_name" value="{{ old('first_name') }}" placeholder="First Name">
                                    @if ($errors->has('first_name'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('first_name') }}</strong>
                                    </span>
                                    @endif

                                </div>
                            </div>

                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label class="form-label" for="last_name">Last Name <span class="text-danger asteric-sign">&#42;</span></label>
                                    <input id="last_name" type="text" class="form-control {{ $errors->has('last_name') ? ' is-invalid' : '' }}" name="last_name" value="{{ old('last_name') }}" placeholder="Last Name">
                                    @if ($errors->has('last_name'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('last_name') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>



                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label class="form-label" for="email">Email <span class="text-danger asteric-sign">&#42;</span></label>
                                    <span style="font-size: 13px;"></span>
                                    <input id="email" type="text" class="form-control {{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" placeholder=" Email Address">
                                    @if ($errors->has('email'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
                            <input type="hidden" name="role" value="{{$id}}">
                            <input type="hidden" name="redirect_url" value="{{url('account',encrypt($id)) }}">
                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label class="form-label" for="phone_number">Phone Number <span class="text-danger asteric-sign">&#42;</span></label><br>
                                    <input type="hidden" name="phone_code" id="phone_code" value="{{ old('phone_code') }}" />
                                    <input type="hidden" name="iso_code" id="iso_code" value="{{ old('iso_code') }}" />

                                    <input id="phone_number" type="text" class="form-control {{ $errors->has('phone_number') ? ' is-invalid' : '' }}" name="phone_number" value="{{ old('phone_number') }}" placeholder="Phone Number">
                                    @if ($errors->has('phone_number'))
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $errors->first('phone_number') }}</strong>
                                    </span>
                                    @elseif($errors->has('phone_code'))
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $errors->first('phone_code') }}</strong>
                                    </span>
                                    @elseif($errors->has('iso_code'))
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $errors->first('iso_code') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label class="form-label" for="password">Password <span class="text-danger asteric-sign">&#42;</span></label>
                                    <input id="idPasswordchange" type="password" class="form-control {{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" placeholder="Password" autocomplete="new-password">
                                    <span class="toggle_password_">
                                        <span class="show-icon togglePasswordchange"></span>
                                    </span>


                                    @if ($errors->has('password'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>

                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label class="form-label" for="confirm_password">Confirm Password <span class="text-danger asteric-sign">&#42;</span></label>
                                    <input id="idPasswordchange1" type="password" class="form-control {{ $errors->has('confirm_password') ? ' is-invalid' : '' }}" name="confirm_password" placeholder="Confirm Password">
                                    <span class="toggle_password_">
                                        <span class="show-icon togglePasswordchange1"></span>
                                    </span>
                                    @if ($errors->has('confirm_password'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('confirm_password') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="card-footerr">
                            <button type="Submit" class="btn btn-commom me-1">Create & Submit</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</section>
<!-- Basic Floating Label Form section end -->



@push('page_script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>


<script>
    var isoCode = ($("#iso_code").val()) ? ($("#iso_code").val()) : ('US');
    //  phone 1 input
    var phoneInput = document.querySelector("#phone_number");
    var phoneInstance = window.intlTelInput(phoneInput, {
        autoPlaceholder: "off",
        separateDialCode: true,
        initialCountry: isoCode
        // utilsScript: '{{URL::asset("frontend/build/js/utils.js")}}',
    });


    $("#phone_code").val(phoneInstance.getSelectedCountryData().dialCode);
    $("#iso_code").val(phoneInstance.getSelectedCountryData().iso2);
    phoneInput.addEventListener("countrychange", function() {
        $("#phone_code").val(phoneInstance.getSelectedCountryData().dialCode);
        $("#iso_code").val(phoneInstance.getSelectedCountryData().iso2);
    });
</script>
@endpush

@endsection