@extends('layouts.app')

@section('form-title') {{ __('Search') }} @endsection
@section('form-sub-title') {{ __('Type a search term and filter on results') }} @endsection

@section('breadcrumb') 
<li class="breadcrumb-item">{{ __('Search') }} </li> 
@endsection
    
@section('content')
<style>
  /* Default sorting indicator */
  table.dataTable thead .sorting:before {
      content: ' ⇅'; /* Default icon to indicate sortable */
      margin-right: 5px; /* Spacing between icon and header text */
      opacity: 0.5; /* Slightly transparent to indicate default state */
  }

  /* Sorting ascending */
  table.dataTable thead .sorting_asc:after {
      content: ' ▲'; /* Ascending icon */
  }

  /* Sorting descending */
  table.dataTable thead .sorting_desc:after {
      content: ' ▼'; /* Descending icon */
  }

  /* Remove default background image if you had one */
  table.dataTable thead .sorting {
      background-image: none;
  }
</style>
<div class="pcoded-inner-content">
  <div class="main-body">
    <div class="page-wrapper">
      <div class="page-body">
        {{-- Search start --}}
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-block">
                        <div class="row mb-3">
                            <div class="col-12 col-md-6">  <!-- change to col-md-12 if needed -->
                                
                                <!-- Search input -->
                                <div class="input-group">
                                    <input type="text" name="term" id="_term_" 
                                        class="form-control" 
                                        placeholder="{{ __('Search for') }}" 
                                        value="@if(!empty($term)) {{ $term }} @endif" 
                                        autocomplete="off">

                                    <button class="btn btn-primary" type="button" id="__search_button__">
                                        {{ __('Search') }}
                                    </button>
                                </div>

                                <!-- Info section ALWAYS below -->
                                <div class="mt-2 d-none" id="search-hint">
                                    <div class="alert alert-info icons-alert mb-0 text"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-2">
                                <span>{{ __('Search in') }}:</span>    
                            </div>
                            <div class="col-sm-10">
                                <div class="checkbox-zoom zoom-primary">
                                    <label class="form-label">
                                        <input type="checkbox" class="single-selection select-all" checked>
                                        <span class="cr">
                                            <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                        </span>
                                        <span>{{ __('Select all') }}</span>
                                    </label>
                                </div>
                                <div class="checkbox-zoom zoom-primary">
                                    <label class="form-label">
                                        <input type="checkbox" class="single-selection" name="search_for[]" value="organisation" checked>
                                        <span class="cr">
                                            <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                        </span>
                                        <span>{{ __('Organisation') }}</span>
                                    </label>
                                </div>
                                <div class="checkbox-zoom zoom-primary">
                                    <label class="form-label">
                                        <input type="checkbox" class="single-selection" name="search_for[]" value="project_title" checked>
                                        <span class="cr">
                                            <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                        </span>
                                        <span>{{ __('Project title') }}</span>
                                    </label>
                                </div>
                                <div class="checkbox-zoom zoom-primary">
                                    <label class="form-label">
                                        <input type="checkbox" class="single-selection" name="search_for[]" value="task_title" checked>
                                        <span class="cr">
                                            <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                        </span>
                                        <span>{{ __('Task title') }}</span>
                                    </label>
                                </div>
                                <div class="checkbox-zoom zoom-primary">
                                    <label class="form-label">
                                        <input type="checkbox" class="single-selection" name="search_for[]" value="task_content" checked>
                                        <span class="cr">
                                            <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                        </span>
                                        <span>{{ __('Task content') }}</span>
                                    </label>
                                </div>
                                <div class="checkbox-zoom zoom-primary">
                                    <label class="form-label">
                                        <input type="checkbox" class="single-selection" name="search_for[]" value="attachment_title" checked>
                                        <span class="cr">
                                            <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                        </span>
                                        <span>{{ __('Attachment title') }}</span>
                                    </label>
                                </div>
                                <div class="checkbox-zoom zoom-primary">
                                    <label class="form-label">
                                        <input type="checkbox" class="single-selection" name="search_for[]" value="user" checked>
                                        <span class="cr">
                                            <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                        </span>
                                        <span>{{ __('User') }}</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          {{-- Search end --}}
        </div>
        {{-- Search end --}}

        {{-- Filters start --}}
        {{-- <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <h5>{{ __('Filters') }}</h5>
                    </div>
                    <div class="card-block">
                        <div class="row g-3">
                            <div class="col-12 col-md-4 col-lg-3 filter all organisation project_title task_title task_content attachment_title user">
                                <label class="form-label">{{ __('Organisation') }}</label>
                                <input type="text" name="filter_org" id="filter_org" class="form-control">
                            </div>

                            <div class="col-12 col-md-4 col-lg-3 filter all project_title task_title task_content attachment_title">
                                <label class="form-label">{{ __('Project title') }}</label>
                                <input type="text" name="filter_project_title" id="filter_project_title" class="form-control">
                            </div>

                            <div class="col-12 col-md-4 col-lg-3 filter all task_title task_content attachment_title">
                                <label class="form-label">{{ __('Task title') }}</label>
                                <input type="text" name="filter_task_title" id="filter_task_title" class="form-control">
                            </div>

                            <div class="col-12 col-md-4 col-lg-3 filter all task_content attachment_title">
                                <label class="form-label">{{ __('Task content') }}</label>
                                <input type="text" name="filter_task_content" id="filter_task_content" class="form-control">
                            </div>

                            <div class="col-12 col-md-4 col-lg-3 filter all attachment_title">
                                <label class="form-label">{{ __('Attachment title') }}</label>
                                <input type="text" name="filter_attachment_title" id="filter_attachment_title" class="form-control">
                            </div>

                            <div class="col-12 col-md-4 col-lg-3 filter all user">
                                <label class="form-label">{{ __('User name or email') }}</label>
                                <input type="text" name="filter_user_name" id="filter_user_name" class="form-control">
                            </div>

                            <div class="col-12 col-md-4 col-lg-3 filter all user">
                                <label class="form-label">{{ __('Role') }}</label>
                                <input type="text" name="filter_role" id="filter_role" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}
        {{-- Filters end --}}

        {{-- Organisation listing start --}}
        <div class="row organisation">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <h5>{{ __('Organisations') }}</h5>
                    </div>
                    <div class="card-block">
                        <div class="datatable-wrapper" data-table="organisations-table">
                            <div class="row mb-3">
                                <div class="table-responsive">
                                    <table class="table table-striped data-table" id="organisations-table">
                                        <thead>
                                            <tr>
                                                <th>{{ __('Organisation') }}</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                            <div class="row text-center dtpagination"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- Organisation listing end --}}

        {{-- Projects listing start --}}
        <div class="row project_title">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <h5>{{ __('Projects') }}</h5>
                    </div>
                    <div class="card-block">
                        <div class="datatable-wrapper" data-table="projects-table">
                            <div class="row mb-3">
                                <div class="table-responsive">
                                    <table class="table table-striped data-table" id="projects-table">
                                        <thead>
                                            <tr>
                                                <th data-orderable="true">{{ __('Project') }}</th>
                                                <th data-orderable="true">{{ __('Organisation') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row text-center dtpagination"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- Projects listing end --}}

        {{-- Tasks listing start --}}
        <div class="row task_title task_content">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <h5>{{ __('Tasks') }}</h5>
                    </div>
                    <div class="card-block">
                        <div class="datatable-wrapper" data-table="tasks-table">
                            <div class="row mb-3">
                                <div class="table-responsive">
                                    <table class="table table-striped data-table" id="tasks-table">
                                        <thead>
                                            <tr>
                                                <th data-orderable="true">{{ __('Task') }}</th>
                                                <th data-orderable="true">{{ __('Organisation') }}</th>
                                                <th data-orderable="true">{{ __('Project') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row text-center dtpagination"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- Tasks listing end --}}

        {{-- Attachments listing start --}}
        <div class="row attachment_title">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <h5>{{ __('Attachments ') }}</h5>
                    </div>
                    <div class="card-block">
                        <div class="datatable-wrapper" data-table="attachments-table">
                            <div class="row mb-3">
                                <div class="table-responsive">
                                    <table class="table table-striped data-table" id="attachments-table">
                                        <thead>
                                            <tr>
                                                <th data-orderable="true">{{ __('Attachment') }}</th>
                                                <th data-orderable="true">{{ __('Task') }}</th>
                                                <th data-orderable="true">{{ __('Organisation') }}</th>
                                                <th data-orderable="true">{{ __('Project') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row text-center dtpagination"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- Attachments listing end --}}

        {{-- Users listing start --}}
        <div class="row user">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <h5>{{ __('Users') }}</h5>
                    </div>
                    <div class="card-block">
                        <div class="datatable-wrapper" data-table="users-table">
                            <div class="row mb-3">
                                <div class="table-responsive">
                                    <table class="table table-striped data-table" id="users-table">
                                        <thead>
                                            <tr>
                                                <th data-orderable="true">{{ __('Name') }}</th>
                                                <th data-orderable="true">{{ __('Organisation') }}</th>
                                                <th data-orderable="true">{{ __('Role') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row text-center dtpagination"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- Users listing end --}}
      </div>
    </div>
  </div>
</div>
@endsection

@push('child-scripts')
<script>
const tables = {};
const csrfToken = "{{ csrf_token() }}";

const tableFilters = {
    'organisations-table': ['organisation'],
    'projects-table': ['project_title'],
    'tasks-table': ['task_title', 'task_content'],
    'attachments-table': ['attachment_title'],
    'users-table': ['user']
};

const tableInitMap = {
    'organisations-table': getOrganisations,
    'projects-table': getProjects,
    'tasks-table': getTasks,
    'attachments-table': getAttachments,
    'users-table': getUsers
};

const searchHints = {
    user: 'Search users by: Name, Email, Street, Zip Code',
    organisation: 'Search organisations by: Name, Street, Zip Code'
};

$(document).ready(function () {
    updateSearchHint();
    reloadFilteredResults();

    $('#__search_button__').on('click', function () {
        reloadFilteredResults();
    });
   
    $(document).on('click', '.dtpagination .page-link', function (e) {
        e.preventDefault();

        const page = $(this).data('page');
        if (page === undefined) return;

        const $wrapper = $(this).closest('.datatable-wrapper');
        const tableId = $wrapper.data('table');

        if (tables[tableId]) {
            tables[tableId].page(page).draw(false);
        }
    });

    // select all toggle
    $('.select-all').on('change', function () {
        const isChecked = $(this).is(':checked');
        $('input[name="search_for[]"]').prop('checked', isChecked);
        updateSearchHint();
    });

    // search hint update
    $('input[name="search_for[]"]').on('change', updateSearchHint);
});

function updateSearchHint() {
    let selected = [];

    $('input[name="search_for[]"]:checked').each(function () {
        selected.push($(this).val());
    });

    let hints = [];

    if (selected.includes('user')) {
        hints.push(searchHints.user);
    }

    if (selected.includes('organisation')) {
        hints.push(searchHints.organisation);
    }

    if (hints.length > 0) {
        $('#search-hint .text').html(hints.join('<br>'));
        $('#search-hint').removeClass('d-none');
    } else {
        $('#search-hint').addClass('d-none');
    }
}

function reloadFilteredResults() {

    const selectedFilters = $('input[name="search_for[]"]:checked')
        .map(function () {
            return this.value;
        })
        .get();

    Object.keys(tableFilters).forEach(tableId => {

        const filtersForTable = tableFilters[tableId];

        // Show table if ANY related filter is selected
        const shouldShow = filtersForTable.some(filter =>
            selectedFilters.includes(filter)
        );

        const $row = $('.datatable-wrapper[data-table="' + tableId + '"]').closest('.row');

        if (shouldShow) {
            $row.show();

            if (tables[tableId]) {
                // Reload existing table
                tables[tableId].ajax.reload();
            } else {
                // Init once
                tableInitMap[tableId]();
            }
        } else {
            $row.hide();
        }
    });
}

/**
 * GENERIC DATATABLE INITIALIZER
 */
function initTable(tableId, ajaxUrl, columns) {

    const $wrapper = $(`[data-table="${tableId}"]`);
    const $pagination = $wrapper.find('.dtpagination');

    tables[tableId] = $('#' + tableId).DataTable({
        processing: true,
        serverSide: true,
        searching: false,
        ordering: true,
        paging: true,
        lengthChange: false,
        pageLength: "{{ config('furnit.number_of_table_lines', 10) }}",
        dom: 'rt',

        ajax: {
            url: ajaxUrl,
            type: 'POST',
            data: function (d) {
                d._token = csrfToken;
                d.term = $('#_term_').val();
                d.filters = $('input[name="search_for[]"]:checked')
                    .map(function () {
                        return this.value;
                    })
                    .get();
            }
        },

        columns: columns,

        drawCallback: function () {
            renderPagination(this.api(), $pagination);
        }
    });
}

/**
 * GENERIC PAGINATION RENDERER
 */
function renderPagination(api, $container) {

    const info = api.page.info();
    const current = info.page;
    const pages = info.pages;

    if (pages <= 1) {
        $container.empty();
        return;
    }

    const range = window.innerWidth < 576 ? 1 : 2;
    let html = '<nav><ul class="pagination justify-content-center">';

    // Prev
    html += current > 0
        ? `<li class="page-item"><a href="#" class="page-link" data-page="${current - 1}">«</a></li>`
        : `<li class="page-item disabled"><span class="page-link">«</span></li>`;

    // Pages
    const start = Math.max(0, current - range);
    const end = Math.min(pages - 1, current + range);

    for (let i = start; i <= end; i++) {
        html += `
            <li class="page-item ${i === current ? 'active' : ''}">
                <a href="#" class="page-link" data-page="${i}">${i + 1}</a>
            </li>`;
    }

    // Next
    html += current < pages - 1
        ? `<li class="page-item"><a href="#" class="page-link" data-page="${current + 1}">»</a></li>`
        : `<li class="page-item disabled"><span class="page-link">»</span></li>`;

    html += '</ul></nav>';
    $container.html(html);
}

/**
 * TABLE INIT FUNCTIONS
 */
function getOrganisations() {
    initTable(
        'organisations-table',
        "{{ route('search.organisations') }}",
        [{ data: 'organisation_name' }]
    );
}

function getProjects() {
    initTable(
        'projects-table',
        "{{ route('search.projects') }}",
        [
            { data: 'project_title' },
            { data: 'organisation_name' }
        ]
    );
}

function getTasks() {
    initTable(
        'tasks-table',
        "{{ route('search.tasks') }}",
        [
            { data: 'task_title' },
            { data: 'organisation_name' },
            { data: 'project_title' }
        ]
    );
}

function getAttachments() {
    initTable(
        'attachments-table',
        "{{ route('search.attachments') }}",
        [
            { data: 'attachment_name' },
            { data: 'task_title' },
            { data: 'organisation_name' },
            { data: 'project_title' }
        ]
    );
}

function getUsers() {
    initTable(
        'users-table',
        "{{ route('search.users') }}",
        [
            { data: 'user_name' },
            { data: 'organisation_name' },
            { data: 'role' }
        ]
    );
}
</script>
@endpush