@extends('layouts.dashboard')

@section('content')
<style>
    #create-user-form {
        display: none;
    }

    .show-form {
        display: block !important;
    }
</style>
<div class="content-wrapper" style="min-height: 241px;">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Add Client</h1>
                </div>
                <div class="col-sm-6">
                    <a href="{{ url('/user/clientlist') }}" class="btn btn-success float-right">All Clients</a>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="row">
            <div style="margin-left:auto; margin-right:auto;" class="col-md-12">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h3>Verify User</h3>
                                <form id="checkUserForm" action="{{ route('check-user') }}" method="post">
                                    @csrf
                                    <div class="form-group">
                                        <label for="phone">Contact <span style="color:red;">*</span></label>
                                        <input type="text" name="phone" class="form-control" required pattern="\d{10}" title="Please enter a 10-digit phone number">
                                    </div>
                                    <div class="form-group">
                                        <label for="user_type">User Type <span style="color:red;">*</span></label>
                                        <input type="text" name="user_type" class="form-control" value="client" disabled>
                                    </div>
                                    <button type="button" class="btn btn-primary" onclick="checkUser()">Submit</button>
                                </form>
                            </div>
                        </div>

                        <div class="card" id="create-user-form">
                            <div class="card-body">
                                <h3>Register New User</h3>
                                <form id="addUserForm" action="{{ route('create-account') }}" method="post">
                                    @csrf
                                    <div class="form-group">
                                        <label for="phone">Contact <span style="color:red;">*</span></label>
                                        <input type="text" name="phone" class="form-control" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="user_type">User Type <span style="color:red;">*</span></label>
                                        <input type="text" name="user_type" class="form-control" value="client" readonly>
                                    </div>
                                    <div class="form-group">
                                        <label for="name">Display Name <span style="color:red;">*</span></label>
                                        <input type="text" name="name" class="form-control" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="email_id">Email ID <small>(optional) <span style="color:red;">Add Email id for receive otp on email</span></small></label>
                                        <input type="email" name="email_id" class="form-control">
                                    </div>
                                    <button type="button" class="btn btn-success" onclick="createUser()">Register Client</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        function checkUser() {
            var phoneNumber = $('#checkUserForm input[name="phone"]').val();

            if (!phoneNumber || phoneNumber.length < 10) {
                Swal.fire({
                    title: 'Validation Error!',
                    text: 'Please enter a valid 10-digit phone number.',
                    icon: 'error',
                    confirmButtonText: 'OK',
                });
                return; 
            }
            $.ajax({
                type: 'POST',
                url: '{{ route('check-user') }}',
                data: $('#checkUserForm').serialize(),
                success: function (response) {
                    if (response.userExists) {
                        Swal.fire({
                            title: 'User Exists!',
                            text: 'The client is already exists in the system.',
                            icon: 'info',
                            confirmButtonText: 'OK',
                        }).then((result) => {
                            if (!result.isConfirmed) {
                            } else {
                            }
                        });
                    } else {
                        Swal.fire({
                            title: 'Register New Client!',
                            text: 'Click on "OK" button to Register New Client.',
                            icon: 'info',
                            showCancelButton: true,
                            confirmButtonText: 'OK',
                            cancelButtonText: 'Cancel',
                        }).then((result) => {
                            if (!result.isConfirmed) {
                            } else {
                                var verifiedContact = $('#checkUserForm input[name="phone"]').val();
                                $('#create-user-form input[name="phone"]').val(verifiedContact);
                                $('#create-user-form').addClass('show-form');
                            }
                        });
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }

        function createUser() {
            var formData = $('#addUserForm').serialize();
            console.log(formData);

            var displayName = $('#addUserForm input[name="name"]').val();

            if (!displayName || displayName.length < 3) {
                Swal.fire({
                    title: 'Validation Error!',
                    text: 'Please enter a valid Client Name.',
                    icon: 'error',
                    confirmButtonText: 'OK',
                });
                return; 
            }
            $.ajax({
                type: 'POST',
                url: '{{ route('create-account') }}',
                data: formData,
                success: function (response) {
                    Swal.fire({
                        title: 'Success!',
                        text: response.msg,
                        icon: 'success',
                        confirmButtonText: 'OK',
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = '{{ url('/user/clientlist') }}';
                        }
                    });
                },
                error: function (error) {
                    console.log(error);
                    Swal.fire({
                        title: 'Error!',
                        text: 'Something went wrong while creating the user.',
                        icon: 'error',
                        confirmButtonText: 'OK',
                    });
                }
            });
        }
    </script>

@endsection