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

@endsection
@section('content')

<div class="page inner-page-layout publishers">

    <div class="page-header" style="background-image: url({{url('assets/images/thums/page-header.jpg')}});">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="page-thumbnail-wrapper">
                        <img src="/assets/images/thums/thum-03.jpeg" class="page-thumbnail">
                        <div class="text-wrapper">
                            <p class="text m-0">+{{getCount('publishers')}} دار نشر </p>
                        </div><!-- text-wrapper -->
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="page-title-wrapper">
                        <h1 class="page-title"> دور النشر </h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="shape"></div>
    </div> <!-- page-header -->

    <div class="page-content">

        <div class="container">

        <div class="d-block mb-4">
            <h2> {{getCount('publishers')}} دار نشر </h2>
        </div>

            <div class="filter-wrapper mb-5">
                <form action="" method="get">
                    <div class="filter-by-inputs mb-4">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group input-with-start-icon">
                                    <div class="relative">
                                        <input type="text" class="form-control" id="s_field" value="{{request()->get('s')}}" name="s" placeholder="أبحث عن دور نشر">
                                        <i class="fa fa-search start-icon"></i>
                                    </div>
                                </div>
                            </div>
    
                            <div class="col-md-3">
                                <div class="form-group">
                                    <select class="form-control mb-3" name="b" id="b">
                                        @foreach (blocks() as $k => $item)
                                        <option value="{{$k}}" {!! ($k == request()->get('b'))? 'selected' : '' !!}>{{$item}}</option>
                                            
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <button type="submit" class="btn btn-success" style="background-color: #0066cc;">بحث</button>
                                </div>
                            </div>
                        </div>
                    </div><!-- filter-by-inputs -->

                </form>


                <div class="filter-by-chars d-flex w-100">
                    <div class="chars-wrapper w-100">
                        <a href="#" class="one-chart all active w-auto" data-char="all"> الكل </a>
                        @foreach (['أ', 'ب', 'ت', 'ث', 'ج', 'ح', 'خ', 'د', 'ذ', 'ر', 'ز', 'س', 'ش', 'ص', 'ض', 'ط', 'ظ', 'ع', 'غ', 'ف', 'ق', 'ك', 'ل', 'م', 'ن', 'هـ', 'و', 'ي'] as $char)
                            <a href="#" class="one-chart" data-char="{{ $char }}"> {{ $char }} </a>
                        @endforeach
                        {{-- <a href="#" class="one-chart"> أ </a>
                        <a href="#" class="one-chart"> ب </a>
                        <a href="#" class="one-chart"> ت </a>
                        <a href="#" class="one-chart"> ث </a>
                        <a href="#" class="one-chart"> ج </a>
                        <a href="#" class="one-chart"> ح </a>
                        <a href="#" class="one-chart"> خ </a>
                        <a href="#" class="one-chart"> د </a>
                        <a href="#" class="one-chart"> ذ </a>
                        <a href="#" class="one-chart"> ر </a>
                        <a href="#" class="one-chart"> ز </a>
                        <a href="#" class="one-chart"> س </a>
                        <a href="#" class="one-chart"> ش </a>
                        <a href="#" class="one-chart"> ص </a>
                        <a href="#" class="one-chart"> ض </a>
                        <a href="#" class="one-chart"> ط </a>
                        <a href="#" class="one-chart"> ظ </a>
                        <a href="#" class="one-chart"> ع </a>
                        <a href="#" class="one-chart"> غ </a>
                        <a href="#" class="one-chart"> ف </a>
                        <a href="#" class="one-chart"> ق </a>
                        <a href="#" class="one-chart"> ك </a>
                        <a href="#" class="one-chart"> ل </a>
                        <a href="#" class="one-chart"> م </a>
                        <a href="#" class="one-chart"> ن </a>
                        <a href="#" class="one-chart"> هـ </a>
                        <a href="#" class="one-chart"> و </a>
                        <a href="#" class="one-chart"> ي </a> --}}
                    </div>
                </div> <!-- filter-by-chars -->

            </div>

            <div class="row mb-0" id="t-body">
                            </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>

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

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

@endsection
@section('js')
<script>
    document.addEventListener('DOMContentLoaded', () => {
    const charLinks = document.querySelectorAll('.one-chart');
    const cards = document.querySelectorAll('.card-item');

    charLinks.forEach((link) => {
        link.addEventListener('click', (e) => {
            e.preventDefault();

            // Remove active class from all links
            charLinks.forEach((l) => l.classList.remove('active'));
            link.classList.add('active');

            const selectedChar = link.getAttribute('data-char');

            // Show/Hide cards based on the selected character
            cards.forEach((card) => {
                const cardChar = card.getAttribute('data-char');

                if (selectedChar === 'all' || cardChar === selectedChar) {
                    card.style.display = 'block';
                } else if(selectedChar == 'أ' &&(cardChar === 'أ' || cardChar === 'ا')) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    });
});

</script>

<script>

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

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