@extends('admin.admin_master')
@section('content')
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-left">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">Post</li>
                        </ol>
                    </div>
                    <div class="col-sm-6">
                        <span class="float-right"><a href="{{ route($link . '.create') }}"
                                class="btn btn-sm btn-fill btn-primary">{!! ADD_ICON !!}</a></span>
                    </div>
                </div>
            </div>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="card card-primary">
                <div class="card-body">

                    <form action="{{ route('posts.index') }}" method="GET" id="filterForm">
                        <div class="row">
                            <div class="col-lg-4">
                                <select name="category" id="category" class="form-control">
                                    <option value="">All Categories</option>
                                    @foreach ($categorylist as $category)
                                        <option value="{{ $category->id }}">{{ $category->title_en }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-4">
                                <input type="text" name="keyword" id="keyword" class="form-control"
                                    placeholder="Search keyword...">
                            </div>
                            <div class="col-lg-2">
                                <button type="submit" class="btn btn-primary btn-block">Filter</button>
                            </div>
                        </div>



                    </form>

                </div>
            </div>



            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary">
                        <div class="card-body" id="listContainer">
                            @include('Posts::partials.tdata')

                        </div>

                    </div>

                </div>
            </div>
    </div>
    </section>
    </div>
    @push('script')
        <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css">
        <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#mytable').DataTable({
                    lengthMenu: [-1],
                    paging: false
                });
            });
            $(document).ready(function() {
                $('#category, #keyword').on('change keyup', function() {
                    fetchList();
                });

                function fetchList() {
                    var category = $('#category').val();
                    var keyword = $('#keyword').val();

                    $.ajax({
                        url: "{{ route('posts.index') }}",
                        type: "GET",
                        data: {
                            category: category,
                            keyword: keyword
                        },
                        success: function(response) {
                            $('#listContainer').html(response);
                            $('#category').val(category); // Set selected category
                            $('#keyword').val(keyword); // Set selected keyword
                        }
                    });
                }
            });
        </script>
    @endpush
@endsection