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

@section('content')
    @if (Auth::user()->canAccessPage('search'))
        <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 smarthr-search-filter-grid">
                    <div class="smarthr-search-filter smarthr-search-filter-name">
                        <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">Search by name or birth date, or use one or more filters.</small>
                </div>
                    <div class="smarthr-search-filter"><label for="search-farm">Farm</label><select id="search-farm" class="form-control"><option value="">All farms</option>@foreach($searchFarms as $farm)<option value="{{$farm->id}}">{{$farm->farm_name}}</option>@endforeach</select></div>
                    <div class="smarthr-search-filter smarthr-search-filter-years"><label>Year of employment</label><div><select id="employment-year-from" class="form-control"><option value="">From</option>@foreach($employmentYears as $year)<option value="{{$year}}">{{$year}}</option>@endforeach</select><select id="employment-year-to" class="form-control"><option value="">To</option>@foreach($employmentYears as $year)<option value="{{$year}}">{{$year}}</option>@endforeach</select></div></div>
                    <div class="smarthr-search-filter"><label for="active-now">Active now</label><select id="active-now" class="form-control"><option value="">All</option><option value="yes">Yes</option><option value="no">No</option></select></div>
                    <div class="smarthr-search-filter"><label for="contract-year">Contract year</label><select id="contract-year" class="form-control"><option value="">All years</option>@foreach($contractYears as $year)<option value="{{$year}}">{{$year}}</option>@endforeach</select></div>
                    <div class="smarthr-search-filter smarthr-search-filter-export"><label>Selected to XLSX</label><button id="export-selected" type="button" class="btn btn-outline-primary" disabled><i class="fas fa-file-excel"></i> Export selected <span id="selected-count">0</span></button></div>
                    </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-select-column"><input type="checkbox" id="select-all-search-results" aria-label="Select all results"></th><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>
            <form id="selected-export-form" method="post" action="{{route('staff.export.selected')}}" hidden>@csrf</form>
        </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');
                var $filters = $('#search-farm, #employment-year-from, #employment-year-to, #active-now, #contract-year');
                var $exportButton = $('#export-selected');
                var $exportForm = $('#selected-export-form');
                var $selectedCount = $('#selected-count');
                var searchTimer = null;
                function closeSearchPreview($modal) {
                    if (!$modal || !$modal.length) return;
                    $modal.hide();
                    $('body').removeClass('smarthr-search-preview-open');
                }

                function clearSearchPreviews() {
                    $('.smarthr-search-image-modal').remove();
                    $('body').removeClass('smarthr-search-preview-open');
                }


                function showMessage(icon, title, message, status) {
                    clearSearchPreviews();
                    $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());
                    var hasFilters = $filters.filter(function(){ return $(this).val() !== ''; }).length > 0;
                    $clear.prop('hidden', value.length === 0);
                    if (request) request.abort();

                    if (value.length < 5 && !hasFilters) {
                        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,
                            farm_id: $('#search-farm').val(),
                            employment_year_from: $('#employment-year-from').val(),
                            employment_year_to: $('#employment-year-to').val(),
                            active_now: $('#active-now').val(),
                            contract_year: $('#contract-year').val()
                        },
                        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;
                            }
                            clearSearchPreviews();
                            $empty.prop('hidden', true);
                            $results.html(html);
                            $results.find('img[id$="myImg"], [id$="myModal"] > .close').prop('onclick', null);
                            $table.prop('hidden', false);
                            var count = $results.children('tr').length;
                            $status.text(count + ' result' + (count === 1 ? '' : 's'));
                            updateSelection();
                        },
                        error: function (xhr, status) {
                            if (status !== 'abort') showMessage('fa-exclamation-circle', 'Search unavailable', 'Please try again in a moment.', 'Error');
                        }
                    });
                }
                function updateSelection() {
                    var count = $results.find('.smarthr-search-select:checked').length;
                    $selectedCount.text(count);
                    $exportButton.prop('disabled', count === 0);
                    var total = $results.find('.smarthr-search-select').length;
                    $('#select-all-search-results').prop('checked', total > 0 && count === total).prop('indeterminate', count > 0 && count < total);
                }

                $(document).on('click', '.smarthr-search-table-wrap img[id$="myImg"]', function (event) {
                    event.preventDefault();
                    event.stopImmediatePropagation();
                    var modal = document.getElementById(this.id.replace(/myImg$/, 'myModal'));
                    if (!modal) return;
                    var $modal = $(modal);
                    $modal.addClass('smarthr-search-image-modal').appendTo(document.body);
                    $modal.find('img.modal-content').attr('src', this.src);
                    $modal.show();
                    $('body').addClass('smarthr-search-preview-open');
                });

                $(document).on('click', '.smarthr-search-image-modal > .close', function (event) {
                    event.preventDefault();
                    event.stopImmediatePropagation();
                    closeSearchPreview($(this).parent());
                });

                $(document).on('click', '.smarthr-search-image-modal', function (event) {
                    if (event.target === this) closeSearchPreview($(this));
                });

                $(document).on('keydown', function (event) {
                    if (event.key === 'Escape') closeSearchPreview($('.smarthr-search-image-modal:visible'));
                });
                $search.on('input', runSearch);
                $filters.on('change', function(){
                    clearTimeout(searchTimer);
                    searchTimer = setTimeout(runSearch, 120);
                });
                $(document).on('change', '.smarthr-search-select', updateSelection);
                $('#select-all-search-results').on('change', function(){
                    $results.find('.smarthr-search-select').prop('checked', this.checked);
                    updateSelection();
                });
                $exportButton.on('click', function(){
                    $exportForm.find('input[name="staff_ids[]"]').remove();
                    $results.find('.smarthr-search-select:checked').each(function(){
                        $('<input>', {type:'hidden', name:'staff_ids[]', value:this.value}).appendTo($exportForm);
                    });
                    if($exportForm.find('input[name="staff_ids[]"]').length) $exportForm.trigger('submit');
                });
                $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