@extends('layouts.app')
@section('title', 'Glossary')
@section('content')
    <div class="container page-content">
        <div class="row justify-content-xl-center page-col">
            <div class="col-xl-10 col-12">
                <div class="row">
                    <h1 class="col font-weight-bold typography-4 mb-0">Glossary</h1>
                    @if(auth()->user()->can('manage glossary'))
                        <div class="col text-end">
                            <a class="btn btn-purple btn-custom" href="{{ route('glossary-create') }}" role="button">
                                <span class="d-none d-md-block">Add New</span>
                                <span class="font-weight-bold d-md-none d-block">+</span>
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        <!-- Header -->
        <div class="row justify-content-xl-center page-col">
            <div class="col-xl-10 col-12">
                <div class="form-group row">
                    <div class="col-md-8 col-12 text-start">
                        <input class="form-control" id="keywords" name="keywords" type="text" placeholder="Search..">
                    </div>
                    <div class="col-md-4 col-12 text-end mt-md-0 mt-2">
                        <select id="departmentDropdown">
                            <option value="">-- All --</option>
                            @foreach( $departments as $department )
                                <option value="{{ $department->id }}">{{ $department->name }}</option name="department">
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="card-wrap">
                    @foreach( $glossaries as $glossary)
                    <div class="card my-4" data-department="{{$glossary->department_id }}"  data-keywords="{{ implode('; ', $glossary->keywords ) }}" id="cardContainer">
                        <div class="card-header">
                            <div class="row">
                                <div class="col-6 text-start">
                                    <h4>{{ $glossary->term }}</h4>
                                </div>
                                <div class="col-6 text-end">
                                    <h4 id="department_id">{!! $glossary->department->icon !!}</h4>
                                </div> 
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md">
                                    <div class="row mb-3">
                                        <div class="col">
                                            <p class="text-start my-3">
                                                @if( strpos($glossary->definition, ".") !== false)
                                                    {{ $glossary->definition }}
                                                @else
                                                    {{ $glossary->definition }}.
                                                @endif
                                            @if( $glossary->references == '' )
                                            @else 
                                                <a href="{{ $glossary->references }}" class="text-primary" target="__blank">More details</a>
                                            @endif
                                            </p>
                                        </div>
                                    </div>
                                    <div class="row justify-content-between align-items-end">
                                        <div class="col-2 text-start">
                                            <p class="d-none">
                                                Keywords: <i>{{ implode('; ', $glossary->keywords ) }}</i>
                                            </p>
                                            @if(auth()->user()->can('manage glossary'))
                                            <a class="text text-primary" href="{{ route('glossary-edit', ['id' => $glossary->id ]) }}"><i class="fas fa-edit"></i></a>
                                            @endif
                                        </div>
                                        <div class="col-10 text-end">
                                            <p class="mb-1">
                                                Last updated: {{ date("d/m/Y", strtotime($glossary->updated_at )) }}
                                            </p>
                                            <p class="mb-0">
                                                Updated by: {{ $glossary->user->getName() }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
<script type="module">
$(document).ready(function() {
  $("#departmentDropdown").on("change", function() {
    var selectedDepartment = $(this).val();
    var keyword = $('#keywords').val().toLowerCase(); // Get the search input value
    if (selectedDepartment === "") {
      $(".card").show();
      $('.card').filter(function() {
            $(this).toggle($(this).find("i").text().toLowerCase().indexOf(keyword) > -1);
        });
    } else {
      $(".card").hide();
      $('.card').filter(function() {
        // Show only the cards that match the selected department and search keyword
        var departmentMatch = ($(this).attr('data-department') === selectedDepartment);
        var keywordMatch = ($(this).text().toLowerCase().indexOf(keyword) !== -1);
        return departmentMatch && keywordMatch;
      }).slice(0, 10).show(); // Show only the 10 latest cards for the selected department
    }
  });
  
  $("#keywords").on("input", function() {
    var keyword = $(this).val().toLowerCase();
    var selectedDepartment = $("#departmentDropdown").val();
    if (selectedDepartment === "") {
      $(".card").show();
      $('.card').filter(function() {
            $(this).toggle($(this).find("i").text().toLowerCase().indexOf(keyword) > -1);
        });
    } else {
      $(".card").hide();
      $('.card').filter(function() {
        // Show only the cards that match the selected department and search keyword
        var departmentMatch = ($(this).attr('data-department') === selectedDepartment);
        var keywordMatch = ($(this).text().toLowerCase().indexOf(keyword) !== -1);
        return departmentMatch && keywordMatch;
      }).slice(0, 10).show(); // Show only the 10 latest cards for the selected department
    }
  });
});

</script>
@endpush