@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Blog Categories')

@push('styles')
    <!-- Load DataTables CSS -->
    <link href="{{ asset('backend/assets/css/jquery.dataTables.min.css') }}" rel="stylesheet">
@endpush

@section('content')

    <div class="card">
        <div class="filter-area flex gap-3 flex-wrap mb-3 justify-between">
            <h2 class="text-nowrap">Blog Categories</h2>
            <div class="flex gap-3 flex-wrap mb-3">
                <div>
                    <select class="form-select" id="language-filter">
                        <option value="">All Languages</option>
                        @foreach ($languages as $language)
                            <option value="{{ $language->code }}">{{ $language->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <button class="btn btn-secondary" id="reset-filters">Reset Filters</button>
                </div>
                <div>
                    <a href="{{ route('admin.blog-categories.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Add New Category
                    </a>
                </div>
            </div>
        </div>

        <div class="overflow-x-auto">
            <div class="inline-block min-w-full align-middle">
                <div class="overflow-hidden">
                    <table class="min-w-full" id="blog-category-table">
                        <thead>
                            <tr>
                                <th>Image</th>
                                <th>Name</th>
                                <th>Language</th>
                                <th>Blogs</th>
                                <th>Is Featured</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('scripts')
    <!-- Load jQuery -->
    <script src="{{ asset('backend/assets/js/jquery-3.7.1.min.js') }}"></script>

    <!-- Load DataTables JS -->
    <script src="{{ asset('backend/assets/js/jquery.dataTables.min.js') }}"></script>

    <script>
        (function($) {
            "use strict"

            $(document).ready(function() {
                var table = $('#blog-category-table').DataTable({
                    processing: true,
                    serverSide: true,
                    responsive: true,
                    ajax: {
                        url: `{{ route('admin.blog-categories.index') }}`,
                        data: function(d) {
                            d.language = $('#language-filter').val();
                        }
                    },
                    columns: [
                        {
                            data: 'featured_image_url',
                            name: 'featured_image',
                            orderable: false,
                            searchable: false,
                            render: function(data) {
                                return data ? '<img src="' + data +
                                    '" class="w-12 h-12 object-cover">' : '';
                            }
                        },
                        {
                            data: 'name',
                            name: 'name'
                        },
                        {
                            data: 'language.name',
                            name: 'language_code'
                        },
                        {
                            data: 'blog_count',
                            name: 'blog_count',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'is_featured',
                            name: 'is_featured',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'status',
                            name: 'status',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        }
                    ],
                    order: [
                        [0, 'asc']
                    ]
                });

                // Filter functionality
                $('#language-filter').change(function() {
                    table.draw();
                });

                $('#reset-filters').click(function() {
                    $('#language-filter').val('');
                    table.search('').columns().search('').draw();
                    table.draw();
                });

                // Delete functionality
                $(document).on('click', '.delete-btn', function() {

                    Swal.fire({
                        title: "Are you sure to delete?",
                        text: "You won't be able to revert this!",
                        icon: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#3085d6",
                        cancelButtonColor: "#d33",
                        confirmButtonText: "Yes, delete it!"
                    }).then((result) => {
                        if (result.isConfirmed) {
                            var id = $(this).data('id');
                            $.ajax({
                                url: `{{ route('admin.blog-categories.destroy', ':id') }}`
                                    .replace(':id', id),
                                type: 'DELETE',
                                data: {
                                    _token: '{{ csrf_token() }}'
                                },
                                success: function(response) {
                                    if (response.success) {
                                        toastr.success(response.message);
                                    } else {
                                        toastr.error(response.message);
                                    }
                                    table.draw();
                                },
                                error: function() {
                                    toastr.error("Server error.");
                                }
                            });
                        }
                    });
                });

                // Status toggle
                $(document).on('change', '.status-toggle', function() {
                    var id = $(this).data('id');
                    var status = $(this).is(':checked') ? 1 : 0;

                    $.ajax({
                        url: `{{ route('admin.blog-categories.toggle-status', ':id') }}`
                            .replace(
                                ':id', id),
                        type: 'GET',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id: id,
                            status: status
                        },
                        success: function(response) {
                            if (response.success) {
                                toastr.success(response.message);
                            } else {
                                toastr.error("Failed to update status.");
                            }
                            table.draw();
                        },
                        error: function() {
                            toastr.error("Server error.");
                        }
                    });
                });
            });

        })(jQuery);
    </script>
@endpush