@extends('layout.layout')

@section('content')
<h1 class="text-warning text-center mt-3" >Catalog note</h1>
<div class="container container-catalog">
    <form action="/search-catalog" method="GET" class="form-catalog-search" id="form-catalog-search">
        <label for="">Cauta dupa nume</label>
        <input type="text" class="form-control" placeholder="Cauta dupa nume" name="catalog_search">
        <div class="button-on-form-catalog">
            <button type="submit" class="catalog-search-button">Cauta</button>
            <a href="/catalog">
                <button type="button" class="btn-for-user-data-reset" onclick="reset()">Reseteaza cautare</button>
            </a>
        </div>
    </form>
    <table class="table table-dark table-catalog">
        <thead class="thead-catalog">
            <tr class="text-center tr-catalog">
                <th class="th-catalog" scope="col">Nume</th>
                <th class="th-catalog" scope="col">Punctaj</th>
                <th class="th-catalog" scope="col">Curs</th>
                <th class="th-catalog" scope="col">Capitol</th>
                <th class="th-catalog" scope="col">Test</th>
                <th class="th-catalog" scope="col">Intrebari si raspunsuri gresite</th>
            </tr>
        </thead>
        <tbody class="tbody-catalog">
            @foreach ($catalogData as $data)
                <tr class="text-center tr-catalog">
                    <td class="td-catalog"> {{ $data->user_name }} </td>
                    <td class="td-catalog">{{ $data->user_score }}</td>
                    <td class="td-catalog">{{ $data->course_name }}</td>
                    <td class="td-catalog">{{ $data->chapter_name }}</td>
                    <td class="td-catalog">{{ $data->test_name }}</td>
                    <td class="td-catalog">
                        <a href="{{ route('catalog.data.show',['user_id'=>$data->user_id,'tracker'=>$data->test_tracker]) }}">
                            <button class="btn btn-warning">
                                <i class="fas fa-eye"></i>
                        </button>
                        </a>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
@push('js')
<script>
    function reset(){
       document.getElementById('form-catalog-search').reset();
    }
</script>
@endpush
@endsection