@extends('layouts.master')

@section('browserTitle', 'Assessments')


@section('breadcrumb')
@if(isset($_SESSION['logged'])&&($_SESSION['logged']==true))
    @if($_SESSION['role']=='clinician')
    <li class="breadcrumb-item"><a href="{{ route('clinicianIndex') }}">{{ trans('menu.home') }}</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{ trans('menu.showAssessments') }}</li>
    @endif
@endif
@endsection


@section('title')
{{ trans('menu.showAssessments') }}
@endsection


@section('body')
<div class="row">
    <div class="col-xs-6 d-flex justify-content-end">
        <p>
            <a class="my-btn my-green-btn" href="{{ route('assessments.create') }}">{{ trans('menu.addAssessment') }}</a> 
        </p>
    </div>
</div>

<script>
    $(document).ready(function(){
        // Searching feature
        $(".searchOptions").on("click", function(e) {
            e.preventDefault();
            var column = $(this).attr("data-column");
            $("#searchInput").attr("data-column", column);
            $("#searchInput").attr("placeholder", "Search " + $(this).text().toLowerCase() + "...");
            $("#searchInput").trigger("keyup"); // Riesegui la ricerca quando viene selezionata una colonna
        });

        $("#searchInput").on("keyup", function() {
            var value = $(this).val().toLowerCase();

            // Reimposta completamente la paginazione se il campo di ricerca viene svuotato
            if (value !== "") {
                $("#paginationNav").hide();
            } else {
                $("#paginationNav").show();
                currentPage = 1; // Riporta alla prima pagina
                showPage(currentPage);
                return;
            }
            
            var column = $("#searchInput").attr("data-column");

            $("#assessmentsTable tbody tr").each(function() {
                var found = false;
                if (column === undefined) { // Selezionato nessuna opzione
                    $(this).find("td").each(function() { // Escludi le ultime tre colonne
                        var text = $(this).text().toLowerCase();
                        if (text.indexOf(value) > -1) {
                            found = true;
                        }
                    });
                } else {
                    var $td = $(this).find("td:eq(" + column + ")");
                    if ($td.length > 0) {
                        var text = $td.text().toLowerCase();
                        if (text.indexOf(value) > -1) {
                            found = true;
                        }
                    }
                }
                $(this).toggle(found);
            });
        });
    });
</script>

<div class="row">
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">{{ trans('other.searchBy') }}</button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item searchOptions" href="#" data-column="0">{{ trans('other.date') }}</a></li>
                <li><a class="dropdown-item searchOptions" href="#" data-column="1">{{ trans('other.firstname') }}</a></li>
                <li><a class="dropdown-item searchOptions" href="#" data-column="2">{{ trans('other.lastname') }}</a></li>
            </ul>
        </div>
        <input type="text" id="searchInput" class="form-control" aria-label="Text input with dropdown button" placeholder="{{ trans('other.search') }} ...">
    </div>
</div>


<nav aria-label="Page navigation example" id="paginationNav">
    <ul class="pagination justify-content-center">
        <li class="page-item" id="previousPage"><a class="page-link" href="#">{{ trans('other.previous') }}</a></li>
        <!-- Numeri di pagina -->
        <li class="page-item" id="nextPage"><a class="page-link" href="#">{{ trans('other.next') }}</a></li>
        <li>
            <select id="rowsPerPage" class="form-control justify-content-end">
                <option value="5">5 {{ trans('menu.assessments') }} {{ trans('other.perPage') }}</option>
                <option value="10">10 {{ trans('menu.assessments') }} {{ trans('other.perPage') }}</option>
                <option value="15">15 {{ trans('menu.assessments') }} {{ trans('other.perPage') }}</option>
                <option value="20">20 {{ trans('menu.assessments') }} {{ trans('other.perPage') }}</option>
            </select>
        </li>
    </ul>
</nav>


<div class="row">
    <div class="col-md-12">
        <table id="assessmentsTable" class="table table-list table-hover">
            <col width='25%'>
            <col width='25%'>
            <col width='25%'>
            <col width='25%'>
            <thead>
                <tr>
                    <th>{{ trans('other.assessmentDate') }}</th>
                    <th>{{ trans('other.firstname') }}</th>
                    <th>{{ trans('other.lastname') }}</th>
                    <th></th>
                </tr>
            </thead>

            <tbody>
                @foreach($assessments_list as $assessment)
                    <tr>
                        <td>{{ $assessment->date }}</td>
                        <td>{{ $assessment->patient->user->firstname }}</td>
                        <td>{{ $assessment->patient->user->lastname }}</td>
                        <td class="text-end">
                            <div class="d-grid gap-2 d-sm-flex justify-content-sm-end">
                                <a class="my-btn my-blue-btn" href="{{ route('assessments.show', ['assessment' => $assessment->id]) }}">{{ trans('btn.details') }}</a>
                                <a class="my-btn my-blue-btn" href="{{ route('assessments.edit', ['assessment' => $assessment->id]) }}">{{ trans('btn.edit') }}</a>
                                <a class="my-btn my-red-btn" href="{{ route('assessments.destroy.confirm', ['assessment' => $assessment->id]) }}">{{ trans('btn.delete') }}</a>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection