@extends('admin.layout.app')
@section('title', 'Manage Blogs')
@section('content')


    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content-area">
                    <main id="main" class="main-content">
                        <div class="tfcl-dashboard">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h1 class="admin-title m-0">All Blogs</h1>

                                <a href="{{ route('admin.create.blog') }}" class="pre-btn py-2 px-4"
                                   style="text-decoration: none;">
                                    <i class="fas fa-plus me-2"></i> Add New Blog
                                </a>
                            </div>
                            <div id="status-message" style="display:none;"
                                 class="status-alert-bar">
                                <span id="msg-text"></span>
                            </div>
                            <div class="row">
                                @forelse($blogs as $blog)
                                    <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
                                        <div
                                            class="blog-card shadow-sm border rounded bg-white h-100 overflow-hidden text-center">
                                            <div class="thumbnail-wrapper p-3">
                                                <a href="{{route('admin.blogs.edit',$blog->id)}}">
                                                    <img
                                                        src="{{ $blog->getFirstMediaUrl('blog_thumbnails') ?: asset('assets/images/dashboard/avatar.png') }}"
                                                        alt="{{ $blog->title }}"
                                                        class="rounded square-img shadow-sm"></a>
                                            </div>

                                            <div class="p-3">
                                                <h5 class="blog-title mb-3">{{ Str::limit($blog->title, 45) }}</h5>

                                                <div class="d-flex flex-column gap-2">
                                                    <div id="status-container-{{ $blog->id }}">
                                                        @if($blog->status == 'published')
                                                            <button
                                                                onclick="changeStatus('{{ $blog->id }}', 'draft')"
                                                                class="btn btn-sm btn-outline-secondary w-100">
                                                                <i class="fas fa-edit me-1"></i> Switch to Draft
                                                            </button>
                                                        @else
                                                            <button
                                                                onclick="changeStatus('{{ $blog->id }}', 'published')"
                                                                class="btn btn-sm btn-outline-success w-100">
                                                                <i class="fas fa-paper-plane me-1"></i> Switch to
                                                                Publish
                                                            </button>
                                                        @endif
                                                    </div>

                                                    <button onclick="confirmDelete('{{ $blog->id }}')"
                                                            class="btn btn-sm btn-orange-outline w-100">
                                                        <i class="fas fa-trash-alt me-1"></i> Delete
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="col-12 text-center py-5">
                                        <img src="{{ asset('assets/images/no-data.webp') }}" width="150"
                                             alt="No Blogs">
                                        <h4 class="mt-3 text-muted">No blogs found. Start by adding one!</h4>
                                    </div>
                                @endforelse
                            </div>

                            @if ($blogs->hasPages())
                                <div class="tfcl-pagination paging-navigation clearfix">

                                    {{-- PREVIOUS --}}
                                    @if ($blogs->onFirstPage())
                                        <span class="prev page-numbers disabled">
            <i class="far fa-angle-left"></i>
        </span>
                                    @else
                                        <a class="prev page-numbers"
                                           href="{{ $blogs->previousPageUrl() }}">
                                            <i class="far fa-angle-left"></i>
                                        </a>
                                    @endif


                                    {{-- PAGE LINKS --}}
                                    @foreach ($blogs->getUrlRange(1, $blogs->lastPage()) as $page => $url)
                                        @if ($page == $blogs->currentPage())
                                            <span
                                                class="page-numbers current">{{ $page }}</span>
                                        @else
                                            <a class="page-numbers"
                                               href="{{ $url }}">{{ $page }}</a>
                                        @endif
                                    @endforeach


                                    {{-- NEXT --}}
                                    @if ($blogs->hasMorePages())
                                        <a class="next page-numbers"
                                           href="{{ $blogs->nextPageUrl() }}">
                                            <i class="far fa-angle-right"></i>
                                        </a>
                                    @else
                                        <span class="next page-numbers disabled">
            <i class="far fa-angle-right"></i>
        </span>
                                    @endif

                                </div>
                            @endif
                        </div>
                    </main>
                </div>
            </div>
        </div>

    </div>

    <div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <h5 class="modal-title">Confirm Deletion</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center py-4">
                    <i class="fas fa-exclamation-triangle text-danger mb-3" style="font-size: 40px;"></i>
                    <p>This blog will be permanently removed.</p>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <form id="deleteForm" method="POST">
                        @csrf
                        @method('DELETE')
                        <input type="hidden" name="created_at" id="delete_created_at">
                        <button type="submit" class="btn btn-danger">Delete Now</button>
                    </form>
                </div>
            </div>
        </div>
    </div>


@endsection

@push('scripts')
    <script>
        function confirmDelete(id) {
            let url = "{{ route('admin.blog.destroy', ':id') }}";
            url = url.replace(':id', id);
            document.getElementById('deleteForm').action = url;
            new bootstrap.Modal(document.getElementById('deleteModal')).show();
        }

        function changeStatus(id, status) {
            // Button ko disable karein taake multiple clicks na hon
            let container = $(`#status-container-${id}`);
            container.find('button').prop('disabled', true).text('Updating...');

            $.ajax({
                url: "{{ route('admin.blog.status') }}",
                method: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: id,
                    status: status
                },
                success: function (response) {
                    // 1. Status Bar Update karein
                    $('#status-message').removeClass('error-bg').css('background-color', '#1471C7').fadeIn();
                    $('#msg-text').text('Status updated successfully!');

                    // 3 second baad message hide kardein
                    setTimeout(() => {
                        $('#status-message').fadeOut();
                    }, 3000);

                    // 2. Button aur Badge ko reload kiye baghair update karein
                    let newHtml = '';
                    if (status === 'published') {
                        newHtml = `
                    <button onclick="changeStatus('${id}', 'draft')" class="btn btn-sm btn-outline-secondary w-100">
                        <i class="fas fa-edit me-1"></i> Switch to Draft
                    </button>

                `;
                    } else {
                        newHtml = `
                    <button onclick="changeStatus('${id}', 'published')" class="btn btn-sm btn-outline-success w-100">
                        <i class="fas fa-paper-plane me-1"></i> Switch to Publish
                    </button>

                `;
                    }

                    container.html(newHtml);
                },
                error: function () {
                    $('#status-message').addClass('error-bg').css('background-color', '#dc3545').fadeIn();
                    $('#msg-text').text('Error updating status!');
                    container.find('button').prop('disabled', false);
                }
            });
        }
    </script>
@endpush