@extends('admin.layouts.app')

@section('panel')
    <div class="card mt-30">
        <div class="card-header">
            <h5 class="card-title mb-0">@lang('Create New User') </h5>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.users.create.user') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group ">
                            <label>@lang('First Name')</label>
                            <input class="form-control" type="text" name="firstname">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label>@lang('Last Name')</label>
                            <input class="form-control" type="text" name="lastname">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>@lang('Email') </label>
                            <input class="form-control" type="email" name="email">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>@lang('Username') </label>
                            <input class="form-control" type="text" name="username">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label>@lang('Mobile Number') </label>
                            <div class="input-group ">
                                <span class="input-group-text mobile-code"></span>
                                <input type="number" name="mobile" id="mobile" class="form-control checkUser">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>@lang('Password') </label>
                            <input class="form-control" type="password" name="password">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label>@lang('Person Dummy Or Not') </label>
                            <select class="form-control" name="dummy_person" id="floatingSelect"
                                aria-label="Floating label select example">
                                <option value="0">No</option>
                                <option value="1">Yes</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>@lang('Name Of Referel Person') </label>
                            <select class="form-control select2" style="width: 100%" name="ref_by" id="referedPerson">
                            </select>
                        </div>
                    </div>
                </div>


                <div class="row mt-4">
                    <div class="col-md-12">
                        <div class="form-group ">
                            <label>@lang('Address')</label>
                            <input class="form-control" type="text" name="address">
                        </div>
                    </div>

                    <div class="col-xl-3 col-md-6">
                        <div class="form-group">
                            <label>@lang('City')</label>
                            <input class="form-control" type="text" name="city">
                        </div>
                    </div>

                    <div class="col-xl-3 col-md-6">
                        <div class="form-group ">
                            <label>@lang('State')</label>
                            <input class="form-control" type="text" name="state">
                        </div>
                    </div>

                    <div class="col-xl-3 col-md-6">
                        <div class="form-group ">
                            <label>@lang('Zip/Postal')</label>
                            <input class="form-control" type="text" name="zip">
                        </div>
                    </div>

                    <input type="hidden" name="country_code">
                    <input type="hidden" name="mobile_code">

                    <div class="col-xl-3 col-md-6">
                        <div class="form-group ">
                            <label>@lang('Country')</label>
                            <select name="country" class="form-control">
                                @foreach ($countries as $key => $country)
                                    <option data-mobile_code="{{ $country->dial_code }}" data-code="{{ $key }}" value="{{ $country->country }}" @selected($country->dial_code === '91')>
                                        {{ __($country->country) }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="form-group  col-xl-3 col-md-6 col-12">
                        <label>@lang('Email Verification')</label>
                        <input type="checkbox" data-width="100%" data-onstyle="-success" data-offstyle="-danger"
                            data-bs-toggle="toggle" data-on="@lang('Verified')" data-off="@lang('Unverified')" @checked(true)
                            name="ev">

                    </div>

                    <div class="form-group  col-xl-3 col-md-6 col-12">
                        <label>@lang('Mobile Verification')</label>
                        <input type="checkbox" data-width="100%" data-onstyle="-success" data-offstyle="-danger"
                            data-bs-toggle="toggle" data-on="@lang('Verified')" data-off="@lang('Unverified')"
                            data-bs-toggle="toggle" data-on="@lang('Verified')" data-off="@lang('Unverified')" @checked(true)
                            name="sv">

                    </div>
                    <div class="form-group col-xl-3 col-md- col-12">
                        <label>@lang('2FA Verification') </label>
                        <input type="checkbox" data-width="100%" data-height="50" data-onstyle="-success"
                            data-offstyle="-danger" data-bs-toggle="toggle" data-on="@lang('Enable')"
                            data-off="@lang('Disable')" name="ts">
                    </div>
                    {{-- <div class="form-group col-xl-3 col-md- col-12">
                        <label>@lang('KYC') </label>
                        <input type="checkbox" data-width="100%" data-height="50" data-onstyle="-success"
                            data-offstyle="-danger" data-bs-toggle="toggle" data-on="@lang('Verified')"
                            data-off="@lang('Unverified')" name="kv">
                    </div> --}}
                </div>


                <div class="row mt-4">
                    <div class="col-md-12">
                        <div class="form-group">
                            <button type="submit" class="btn btn--primary w-100 h-45">@lang('Submit')
                            </button>
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>
@endsection

@push('script')
<script>
    (function($){
    "use strict"
        $('.bal-btn').click(function(){
            var act = $(this).data('act');
            $('#addSubModal').find('input[name=act]').val(act);
            if (act == 'add') {
                $('.type').text('Add');
            }else{
                $('.type').text('Subtract');
            }
        });
        let mobileElement = $('.mobile-code');
        function changeFields(){
            mobileElement.text(`+${$('select[name=country] :selected').data('mobile_code')}`);
            $('input[name=mobile_code]').val($('select[name=country] :selected').data('mobile_code'));
            $('input[name=country_code]').val($('select[name=country] :selected').data('code'));
        }

        $('select[name=country]').change(function(){
            changeFields();
        });
        changeFields();
        let dialCode   = $('select[name=country] :selected').data('mobile_code');
        mobileElement.text(`+${dialCode}`);

    })(jQuery);


    $(function() {
        $('#referedPerson').select2({

            ajax: {
                url: '{{ route('admin.users.referedPerson.suggestions') }}',
                type: 'get',
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    // console.log(params);
                    return {
                        search: params.term
                    };
                },
                processResults: function(data) {
                    console.log(data);
                    return {
                        results: data
                    };
                },
                cache: true
            },
            placeholder: 'Search for a user',
            minimumInputLength: 2,
            templateResult: formatResult,
            templateSelection: formatSelection
        });

        function formatResult(data) {
            if (data.loading) return data.text;
            // var markup = "<div class='select-user'>" + data.text + "</div>";
            var markup = data.text;

            return markup;
        }

        function formatSelection(data) {
            return data.text;
        }
    });
</script>
@endpush

{{--
 // $('select[name=country]').val('{{@$user->country_code}}');
 // let mobileNumber    = `{{ $user->mobile }}`;
 //mobileNumber        = mobileNumber.replace(dialCode,'');
--}}
