@extends('front.layouts.app')
@section('css')

@endsection
@section('content')

<div class="page default-layout exhibition-guide">

    <div class="page-content">

        <div id="exhibition-guide" class="reset-height">

            <div class="exhibition-guide-wrapper text-center">

                <div class="text mb-5">
                    <h1 class="display-3 font-weight-400">  ابحث في دليل المعرض </h1>
                </div> <!-- text -->

                <div class="search-wrapper me-3">
                    <form action="" method="get">
                        <div class="form-group input-with-start-icon m-0">
                            <div class="relative">
                                <input type="text" class="form-control" value="{{request()->get('s')}}" name="s" id="s_field" placeholder="البحث...">
                                <i class="fa fa-search start-icon"></i>
                            </div>
                        </div>

                    </form>
                </div> <!-- search-wrapper  -->

            </div><!-- exhibition-guide-wrapper -->

            <div class="shape-warpper">
                <img src="/assets/images/exhibition-guide-shape.svg" class="w-100">
            </div>

        </div><!-- exhibition-guide -->

        <div class="exhibition-guide-table-wrapper py-5">

            <h2 class="text-center mb-4"> دليل المعرض </h2>

            <div class="table-wrapper custom-bg mb-4">

                <div class="container">

                    <table class="table ">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col">اسم الكتاب </th>
                                <th scope="col">المؤلف</th>
                                <th scope="col">دور النشر </th>
                                <th scope="col">الموقع في المعرض</th>
                                <th scope="col">التصنيف </th>
                            </tr>
                        </thead>
                        <tbody>

                            
                        </tbody>
                    </table>
                </div>
            </div>


            <div class="pagination-btn-wrapper">
                <div class="text-center">
                    <input type="hidden" name="page" id="page_no" value="2">
                    <a href="#" id="load_more" class="btn btn-primary w-300px"> عرض المزيد </a>
                </div>
            </div> <!-- pagination-btn-wrapper -->

        </div> <!-- exhibition-guide-table-wrapper -->

    </div><!-- page-content -->

</div> <!-- page default-layout -->

@endsection
@section('js')
<script>

    $(document).ready(function(){
        $('#load_more').on('click', function(e){
            e.preventDefault();
            var page = $('#page_no').val();
            $.get("{{route('page.guide-ajx')}}?page="+page + "&s=" + $('#s_field').val() )
            .done(function(res){
                if (res.next) {
                    $('#page_no').val(res.page);
                    $('tbody').append(res.view);
                }else{
                    $('tbody').append(res.view);
                    $('#load_more').remove();

                }
                
            })
        })
    });
</script>
@endsection