@extends('layouts.admin_default')
@section('title', 'Manage Users')
@if (isset($user))
    @section('page', 'Users / Update')
@endif
@if (!isset($user))
    @section('page', 'Users / Add')
@endif
@section('content')

    <style>
        .mobileError,
        .otpError,
        .emailError {
            color: #e7515a;
            font-size: 13px;
            letter-spacing: 1px;
        }

        .fa {
            font-size: 1.2rem;
        }
    </style>

    {{-- ================================== my code start ===================================== --}}
    <!-- {{-- <div class="content-wrapper">

        <!-- Inner content -->
        <!-- <div class="content-inner"> --}} --> 
            <div class="content pt-0">

                <!-- Page header -->
				<div class="page-header">
					 <div class="page-header-content header-elements-lg-inline">
						<div class="page-title d-flex">
							<h4><span class="font-weight-semibold">@if(isset($user))Edit Users @else Add Users @endif</span></h4>
							<a href="#" class="header-elements-toggle text-body d-lg-none"><i class="icon-more"></i></a>
						</div>
					</div>
				</div> 
				<!-- /page header -->


                <!-- 2 columns form -->
                <div class="card">
                    <!-- {{-- <div class="card-header">
                        <h5 class="card-title">Multiple columns</h5>
                    </div> --}} -->

                    <div class="card-body">
                        @if (session()->has('message'))
                        <div class="alert alert-success alert-block">
                            <button type="button" class="close" data-dismiss="alert">×</button>
                            <strong>{{ session()->get('message') }}</strong>
                        </div>
                    @endif
                        <form id="user-form" method="post" action="{{ route('saveUser') }}" enctype="multipart/form-data"
                        novalidate class="simple-example">
                        @csrf

                        <input type="hidden" name="id"
                            value="@if (isset($user)) {{ $user->id }} @endif">


                            <div class="row">
                                <div class="col-lg-6">
                                    <fieldset>
                                        <div class="form-group">
                                            <label>Enter your name:</label>
                                            <input type="text" class="form-control" 
                                                    id="name" name="name"
                                            placeholder="Name"
                                            value="{{ old('name') }}@if (isset($user)) {{ $user->name }} @endif"
                                            required>

                                            <div class="invalid-feedback">
                                                @error('name')
                                                    {{ $message }}
                                                @enderror
                                            </div>

                                        </div>

                                        <div class="form-group">
                                            <label>Enter your Email:</label>
                                            <input type="email" class="form-control" id="email" name="email"
                                    placeholder="Email"
                                    value="{{ old('email') }}@if (isset($user)) {{ $user->email }} @endif"
                                    required>
                                    <div class="invalid-feedback">
                                        @error('email')
                                            {{ $message }}
                                        @enderror
                                    </div>
                                        </div>

                                        <div class="form-group">
                                            <label>Enter your password:</label>
                                            <input type="password" class="form-control"
                                            id="password" name="password"
                                            placeholder="Password"
                                            value="{{ old('password') }}@if (isset($user)) {{ $user->real_password }} @endif"
                                            required>

                                            <div class="invalid-feedback">
                                                @error('password')
                                                    {{ $message }}
                                                @enderror
                                            </div>
                                        </div>
                                        
                                    </fieldset>
                                </div>

                                <div class="col-lg-6">
                                    <fieldset>
                                        
                                        <!-- {{-- <div class="row"/> --}} -->
                                        <div class="form-group">
                                            <label>Select your Role:</label>
                                            <select data-placeholder="Select your Role"
                                                class="form-control form-control-select2" name="role" data-focus>

                                                <option value="">--Select Role--</option>
                                                                            </select>
                                            
                                            <div class="invalid-feedback">
                                                @error('status')
                                                    {{ $message }}
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label>Enter Your Mobile Number:</label>
                                                <input type="text" class="form-control"  id="mobile" name="mobile"
                                                placeholder="Mobile"
                                                value="{{ old('mobile') }}@if (isset($user)) {{ $user->mobile }} @endif">                             
                                        </div>

                                        <div class="invalid-feedback">
                                            @error('mobile')
                                                {{ $message }}
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label>Status :</label>
                                            <select name="status" data-placeholder="Select your Role"
                                            class="form-control form-control-select2" data-focus>
                                            <option value="1" @if (isset($user) && $user->status == 1) {{ 'selected' }} @endif>
                                                Active</option>
                                            <option value="0" @if (isset($user) && $user->status == 0) {{ 'selected' }} @endif>
                                                De-Active</option>
                                            </select>
                                            <div class="invalid-feedback">
                                                @error('status')
                                                    {{ $message }}
                                                @enderror
                                            </div>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>

                            <div class="text-right">

                                @if (isset($user))
                                <button class="btn btn-primary submit-fn mt-2" id="addBtn" type="submit">Update</button>
                            @else
                                <button class="btn btn-primary submit-fn mt-2" id="addBtn" type="submit">Add</button>
                            @endif

                            </div>
                        </form>
                    </div>
                </div>
                <!-- /2 columns form -->

            </div>
        <!-- {{-- </div>
    </div> --}} -->

    {{-- ================================== /my code start ===================================== --}}

  

    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->



@endsection

@section('footer')

    <script>
        $("#user-form").validate({});


        function sendOTP() {
            var mobile = $('#mobile').val();
            if (mobile == '' || mobile.lenght < 10 || mobile == undefined || mobile == null) {
                $('.mobileError').html('Mobile Number is invalid');
                return;
            }
            var otp = Math.floor(100000 + Math.random() * 900000);
            localStorage.setItem('otp', otp);
            $('.sendOTP').html('Resend OTP');
            $('.verifyOTPDiv').show();
        }

        function verifyOTP() {
            var otp = $('#otp').val();
            if (otp == '' || (otp.lenght < 6 && otp.lenght > 6) || otp == undefined || otp == null) {
                $('.otpError').html('OTP is invalid');
                return;
            }

            if (localStorage.getItem('otp') == otp) {
                let verify = '<i class="fa fa-check text-success"></i>';
                $('.sendOTP').html(verify);
                $('.sendOTP').attr('disabled', true);
                $('.verifyOTPDiv').hide();
            }
        }

        $(document).ready(function() {
            $('#email').keyup(function() {
                var email = $(this).val();
                $.ajax({
                    url: "{{ url('check-email') }}",
                    method: 'post',
                    data: {
                        'email': email,
                        "_token": "{{ csrf_token() }}"
                    },
                    success: function(result) {
                        if (result) {
                            $('.emailError').text('');
                            $('#addBtn').removeAttr('disabled', true);
                        } else {
                            $('.emailError').text('This email already exists');
                            $('#addBtn').attr('disabled', true);
                        }
                    }
                });
            })
        })
    </script>


@endsection