@extends('layouts.mainlayout')
@section('fullwidth', true)

@section('content')
    @if (Auth::user()->hasRoleOrSuperAdmin('contactperson'))
        <main class="smarthr-search-module" aria-labelledby="smarthr-search-title">
            <header class="smarthr-demo-page-breadcrumb smarthr-module-page-header">
                <div>
                    <h2 id="smarthr-search-title">Search staff</h2>
                    <ol><li><a href="/home"><i class="fas fa-home"></i></a></li><li>Staff</li><li class="active">Search</li></ol>
                </div>
            </header>

            <section class="smarthr-search-card smarthr-search-form-card" aria-labelledby="smarthr-search-form-title">
                <div class="smarthr-search-card-heading">
                    <i class="fas fa-user" aria-hidden="true"></i>
                    <span id="smarthr-search-form-title">Find a staff member</span>
                </div>
                <div class="smarthr-search-card-body">
                    <label for="search">Name or birth date</label>
                    <div class="smarthr-search-input-wrap">
                        <i class="fas fa-search" aria-hidden="true"></i>
                        <input type="search" name="search" id="search" class="form-control"
                               placeholder="Type at least 5 characters" autocomplete="off"
                               aria-describedby="smarthr-search-help">
                        <button type="button" id="smarthr-search-clear" aria-label="Clear search" hidden>
                            <i class="fas fa-times" aria-hidden="true"></i>
                        </button>
                    </div>
                    <small id="smarthr-search-help">You can search using a full or partial name, or a birth date.</small>
                </div>
            </section>

            <section class="smarthr-search-card smarthr-search-results-card" aria-labelledby="smarthr-search-results-title">
                <div class="smarthr-search-card-heading">
                    <i class="fas fa-users" aria-hidden="true"></i>
                    <span id="smarthr-search-results-title">Search results</span>
                    <span class="smarthr-search-status" id="smarthr-search-status">Ready</span>
                </div>
                <div class="smarthr-search-card-body">
                    <div class="smarthr-search-empty" id="smarthr-search-empty">
                        <i class="fas fa-keyboard" aria-hidden="true"></i>
                        <strong>Start typing to search</strong>
                        <span>Results will appear here after you enter at least 5 characters.</span>
                    </div>
                    <div class="table-responsive smarthr-search-table-wrap" id="smarthr-search-table-wrap" hidden>
                        <table class="table smarthr-search-results-table">
                            <thead><tr><th class="smarthr-search-status-column">Status</th><th>Personal data</th><th>Working information</th><th>Action</th></tr></thead>
                            <tbody id="kereso"></tbody>
                        </table>
                    </div>
                </div>
            </section>
        </main>

        <script src="/vendor/jquery/jquery.min.js"></script>
        <script>
            $(function () {
                var request = null;
                var $search = $('#search');
                var $clear = $('#smarthr-search-clear');
                var $empty = $('#smarthr-search-empty');
                var $table = $('#smarthr-search-table-wrap');
                var $results = $('#kereso');
                var $status = $('#smarthr-search-status');

                function showMessage(icon, title, message, status) {
                    $results.empty();
                    $table.prop('hidden', true);
                    $empty.html('<i class="fas ' + icon + '" aria-hidden="true"></i><strong>' + title + '</strong><span>' + message + '</span>').prop('hidden', false);
                    $status.text(status);
                }

                function runSearch() {
                    var value = $.trim($search.val());
                    $clear.prop('hidden', value.length === 0);
                    if (request) request.abort();

                    if (value.length < 5) {
                        showMessage('fa-keyboard', value.length ? 'Keep typing' : 'Start typing to search',
                            value.length ? 'Enter at least 5 characters to display matching staff.' : 'Results will appear here after you enter at least 5 characters.',
                            value.length ? value.length + ' / 5 characters' : 'Ready');
                        return;
                    }

                    $status.text('Searching...');
                    request = $.ajax({
                        type: 'get', url: '{{ URL::to('search') }}', data: { search: value },
                        success: function (data) {
                            var html = $.trim(data);
                            if (!html) {
                                showMessage('fa-user-times', 'No matching staff', 'Try another name or birth date.', '0 results');
                                return;
                            }
                            $empty.prop('hidden', true);
                            $results.html(html);
                            $table.prop('hidden', false);
                            var count = $results.children('tr').length;
                            $status.text(count + ' result' + (count === 1 ? '' : 's'));
                        },
                        error: function (xhr, status) {
                            if (status !== 'abort') showMessage('fa-exclamation-circle', 'Search unavailable', 'Please try again in a moment.', 'Error');
                        }
                    });
                }

                $search.on('input', runSearch);
                $clear.on('click', function () { $search.val('').focus(); runSearch(); });
            });
        </script>
    @else
        <div class="smarthr-search-module"><div class="alert alert-danger">Permission denied</div></div>
    @endif
@endsection