@extends('layouts.master')

@section('title', __('tr.Library Books') )
@section('titleicon', "icon-books")

@section('content')

    <!-- BEGIN .main-content -->
    <div class="main-content">
        <div class="row gutters">
            <div class="col-lg-12 col-xs-12 col-md-12 col-sm-12">
                <div class="card">
                    <div class="card-body pb-0">
                        <div class="filter-box">
                            <div class="row">
                                <div class="col-md-2">
                                    <select id="author_filter" name="author_filter">
                                        <option value="">@lang('tr.Select Author')</option>
                                            @foreach($authors as $author)
                                                <option value="{{$author}}">{{$author}}</option>
                                            @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <select id="edition_year_filter" name="edition_year_filter">
                                        <option value="">@lang('tr.Select Edition Year')</option>
                                            @foreach($editionYears as $editionYear)
                                                <option value="{{$editionYear}}">{{$editionYear}}</option>
                                            @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <input type="text" placeholder="@lang('tr.TextSearch')" id="text_search">
                                </div>
                                <div class="col-md-2 float">
                                    <button class="btn btn-primary" type="button"
                                            id="search_button">@lang('tr.Search')</button>
                                </div>
                                {{--Button--}}
                                <div class="col-md-2 float">
                                    <button class="btn btn-danger" type="button"
                                            id="reset_button">@lang('tr.Reset')</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
                        <div class="card-body">
                            <table id="libararies_table" class="display" style="width:100%">
                                <thead>
                                <tr>
                                    <th width="10%">@lang('tr.#')</th>
                                    <th>@lang('tr.Title')</th>
                                    <th>@lang('tr.Author Name')</th>
                                    <th>@lang('tr.Edition Year')</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Row end -->
    </div>
    <!-- END: .main-content -->

    <script type="text/javascript">

        $(document).ready(function () {

            var table = $('#libararies_table').DataTable({
                processing: false,
                serverSide: true,
                scrollX: true,
                stateSave: false,
                rowId: 'id',
                language: dataTableLanguage,
                "ajax": {
                    "url": '{{ route('library_books') }}',
                    "dataSrc": "data.data"
                },
                "columns": [
                    {"data": "id", "name": "id"},
                    {"data": "title", "name": "title"},
                    {"data": "author", "name": "author"},
                    {"data": "edition_year", "name": "edition_year"},
                ]
            });

            $(".dataTables_filter").hide();

            $('#search_button').on('click', function () {
                table.search($("#text_search").val());
                table.columns(0).search($("#author_filter").val());
                table.columns(1).search($("#edition_year_filter").val());
                table.draw();
            });

            $('#text_search').keyup(function (e) {
                if (e.keyCode == 13)
                    $('#search_button').trigger('click');
            });

            $('#reset_button').on('click', function () {
                $("#text_search").val("");
                $("#author_filter").val('');
                $("#edition_year_filter").val('');
                $('#search_button').trigger('click');
            });

            $('#search_button').trigger('click');
        });
    </script>
@stop