@extends('layout.app')

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title mb-0">Check Username</h3>
        </div>
        <div class="card-body">

            <div class="row">
                <div class="col-md-4">
                    <label>Username</label>
                    <div class="input-group input-group-sm">
                        <input type="text" id="check_username" class="form-control" placeholder="Enter username"
                            autocomplete="off" autofocus>
                        <div class="input-group-append">
                            <button type="button" id="check_username_btn" class="btn btn-info">Check</button>
                        </div>
                    </div>
                    <small class="text-muted">The same check the new customer form uses.</small>
                </div>
            </div>

            <div id="check_username_result" class="mt-3"></div>

        </div>
    </div>
@endsection

@push('js')
    <script>
        $(function() {
            var $input = $('#check_username');
            var $result = $('#check_username_result');
            var clientUrl = '{{ route('clients.show', '__ID__') }}';

            function render(data) {
                var name = $('<div>').text(data.username).html();

                if (data.available) {
                    $result.html(
                        '<div class="alert alert-success mb-0">' +
                        '<i class="fa fa-check-circle mr-1"></i> <strong>' + name + '</strong> is available. ' +
                        $('<div>').text(data.message).html() +
                        '</div>'
                    );
                    return;
                }

                var html = '<div class="alert alert-danger">' +
                    '<i class="fa fa-times-circle mr-1"></i> <strong>' + name + '</strong> can not be used.<br>' +
                    $('<div>').text(data.message).html() +
                    '</div>';

                if (data.client) {
                    var c = data.client;
                    html += '<div class="table-responsive">' +
                        '<table class="table table-bordered table-sm mb-0">' +
                        '<thead><tr><th colspan="7" class="bg-light">Username is held by this client</th></tr>' +
                        '<tr><th>Client ID</th><th>Name</th><th>POP</th><th>Status</th><th>Approval</th><th>Expire Date</th><th>Deleted</th></tr></thead>' +
                        '<tbody><tr>' +
                        '<td><a href="' + clientUrl.replace('__ID__', c.id) + '" target="_blank">' + c.id + '</a></td>' +
                        '<td>' + $('<div>').text(c.name || '').html() + '</td>' +
                        '<td>' + $('<div>').text(c.pop || '').html() + '</td>' +
                        '<td>' + $('<div>').text(c.status || '').html() + '</td>' +
                        '<td>' + $('<div>').text(c.approval || '').html() + '</td>' +
                        '<td>' + $('<div>').text(c.expire_date || '').html() + '</td>' +
                        '<td>' + (c.deleted ?
                            '<span class="badge badge-danger">Deleted ' + $('<div>').text(c.deleted_at || '').html() + '</span>' :
                            '<span class="badge badge-secondary">No</span>') + '</td>' +
                        '</tr></tbody></table></div>';
                }

                $result.html(html);
            }

            function check() {
                var username = $.trim($input.val());

                if (username === '') {
                    $result.html('<div class="alert alert-warning mb-0">Please enter a username first.</div>');
                    return;
                }

                $result.html('<div class="text-muted"><i class="fa fa-spinner fa-spin mr-1"></i> Checking...</div>');

                $.ajax({
                    type: 'get',
                    url: '{{ route('checkUsername') }}',
                    data: {
                        username: username,
                        reason: 1
                    },
                    success: function(data) {
                        render(data);
                    },
                    error: function() {
                        $result.html(
                            '<div class="alert alert-danger mb-0">Could not check this username. Please try again.</div>'
                        );
                    }
                });
            }

            $('#check_username_btn').on('click', check);
            $input.on('keypress', function(e) {
                if (e.which === 13) {
                    e.preventDefault();
                    check();
                }
            });
        });
    </script>
@endpush