@extends('backend.layout.main')

@section('title', 'Blog Management')

@section('content')
<div class="page-wrapper">
    <div class="content">

        <!-- PAGE HEADER -->
        <div class="d-md-flex page-breadcrumb mb-3">
            <div class="my-auto mb-2">
                <h2 class="mb-1">Blog Management</h2>
            </div>
            <div class="ms-auto">
                <a href="{{ route('admin.blogcategories.index') }}" class="btn btn-secondary me-2">
                    <i class="fa fa-tags me-1"></i> Categories
                </a>
                <button class="btn btn-primary"
                        data-bs-toggle="offcanvas"
                        data-bs-target="#blogOffcanvas">
                    <i class="fa fa-plus me-2"></i> Add Blog
                </button>
            </div>
        </div>

        <!-- BLOG TABLE -->
        <div class="card mb-3">
            <div class="card-body table-responsive">
                <table class="table table-bordered " id="blogTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Title</th>
                            <th>Category</th>
                            <th>Status</th>
                            <th>Verified Status</th>
                            <th>Image</th>
                            <th width="120">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

        <!-- OFFCANVAS BLOG FORM -->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="blogOffcanvas">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title">Add / Update Blog</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
            </div>

            <div class="offcanvas-body">
                <form id="blogForm" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" id="id">

                    <div class="mb-3">
                        <label>Title</label>
                        <input type="text" name="title" id="title" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label>Meta Keyword</label>
                        <input type="text" name="meta_keyword" id="meta_keyword" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label>Category</label>
                        <select name="category_id" id="category_id" class="form-control">
                            <option value="">Select Category</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->title }}</option>
                            @endforeach
                        </select>
                    </div>

                          
                    <div class="mb-3">
                        <label>Short Content</label>
                        <textarea name="short_description" id="short_description" class="form-control"></textarea>
                    </div>

                    <div class="mb-3">
                        <label>Image</label>
                        <input type="file" name="image" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label>Description</label>
                        <textarea name="description" id="description" class="form-control"></textarea>
                    </div>

                    <div class="d-flex gap-2 mt-3">
                        <button type="button"
                                class="btn btn-secondary w-50"
                                data-bs-dismiss="offcanvas">
                            Cancel
                        </button>
                        <button type="submit"
                                class="btn btn-primary w-50"
                                id="submitBtn">
                            Save
                        </button>
                    </div>
                </form>
            </div>
        </div>


        <!-- BLOG VIEW MODAL -->
        <div class="modal fade" id="blogViewModal" tabindex="-1">
            <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
        
                    <div class="modal-header">
                        <h5 class="modal-title">Blog Details</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
        
                    <div class="modal-body">
                        <div class="row mb-3">
                             <div class="col-md-8">
                                      <strong>Heading</strong> <br>
                                        <p id="view_title"></p>
        
                                        <strong>Category</strong> <br>
                                        <p class="text-muted mb-1">
                                            <span id="view_category"></span>
                                        </p>
                             </div>
                             <div class="col-md-4">
                                 <div id="view_image" class="mb-3 w-100"></div>
                             </div>
                        </div>
                  
        
                        <strong>Meta Keyword</strong> <br>
                        <p class="text-muted">
                            <span id="view_meta"></span>
                        </p>
        
                        <hr>
        
                 
        
                        <h6>Short Description</h6>
                        <p id="view_short"></p>
        
                        <hr>
        
                        <h6>Description</h6>
                        <div id="view_description"></div>
        
                    </div>
        
                </div>
            </div>
        </div>


    </div>
</div>
@endsection

@push('scripts')

<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

<script>
let blogTable;

$(document).ready(function () {

    $('#description').summernote({ height: 200 });

    fetchBlogs();

    function initDataTable() {
        blogTable = $('#blogTable').DataTable({
            destroy: true,
            responsive: true,
            pageLength: 10,
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'collection',
                    text: '<i class="fa fa-download me-1"></i> Export',
                    className: 'btn btn-primary',
                    buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
                },
                {
                    extend: 'colvis',
                    text: '<i class="fa fa-columns me-1"></i> Columns',
                    className: 'btn btn-secondary'
                }
            ]
        });
    }

    function fetchBlogs() {
        $.get("{{ route('admin.blogs.fetch') }}", function (res) {

            let rows = '';
            $.each(res.data, function (i, item) {

            let verifiedBtn = '';

            if (item.user) {

                let isAdmin = item.user.role === 'admin';
                let isVerified = item.isVerified == 1;

                verifiedBtn = `
                    <td class="text-center">
                        <button
                            class="isverified btn btn-sm ${isVerified ? 'btn-success' : 'btn-warning'}"
                            data-id="${item.id}"
                            ${isAdmin ? '' : 'disabled'}
                        >
                            ${isVerified ? 'Verified' : (isAdmin ? 'Verify' : 'Pending')}
                        </button>
                    </td>
                `;
            } else {
                verifiedBtn = `<td>-</td>`;
            }


                rows += `
                <tr>
                    <td>${i+1}</td>
                    <td>${item.title}</td>
                    <td>${item.category?.title ?? '-'}</td>
                    <td class="text-center">
                        <button class="toggle btn btn-sm ${item.status ? 'btn-success':'btn-danger'}"
                                data-id="${item.id}">
                            ${item.status ? 'Active':'Inactive'}
                        </button>
                    </td>

                       ${verifiedBtn}
          
                   <td>
                    ${
                        item.image
                        ? (
                            item.image.match(/\.(jpg|jpeg|png)$/i)
                            ? `<img src="{{ asset('') }}${item.image}" class="img-thumbnail w-75">`
                            : `<a href="{{ asset('') }}${item.image}" target="_blank"
                                class="btn btn-sm btn-dark">
                                <i class="fa fa-file-pdf me-1"></i> View
                            </a>`
                        )
                        : '-'
                    }
                </td>

                    <td>
                        <button class="btn btn-sm view me-1"
                                data-id='${item.id}'
                                title="View">
                            <i class="fa fa-eye text-primary"></i>
                        </button>
                        <button class="btn btn-sm edit"
                                data-id="${item.id}">
                            <i class="fa fa-edit text-info"></i>
                        </button>
                        <button class="btn btn-sm delete"
                                data-id="${item.id}">
                            <i class="fa fa-trash text-danger"></i>
                        </button>
                    </td>
                </tr>`;
            });

            if ($.fn.DataTable.isDataTable('#blogTable')) {
                blogTable.destroy();
            }

            $('#blogTable tbody').html(rows);
            initDataTable();
        });
    }

    // SUBMIT BLOG
    $('#blogForm').submit(function (e) {
        e.preventDefault();
        let formData = new FormData(this);

        $.ajax({
            url: "{{ route('admin.blogs.store') }}",
            method: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function (res) {
                toastr.success(res.message);
                resetForm();
                let canvas = document.getElementById('blogOffcanvas');
                bootstrap.Offcanvas.getInstance(canvas).hide();
                fetchBlogs();
            }
        });
    });



    // EDIT
    $(document).on('click', '.edit', function () {
        
        $.ajax({
            url:"{{route('admin.blogs.edit')}}",
            method:"POST",
            data: {
                _token: '{{ csrf_token() }}',
                id: $(this).data('id')
            },
            success:function(res){
                
                let d = res.data;
                
                $('#id').val(d.id);
                $('#title').val(d.title);
                $('#short_description').val(d.short_description);
                $('#meta_keyword').val(d.meta_keyword);
                $('#category_id').val(d.category_id);
                $('#description').summernote('code', d.description);
                $('#submitBtn').text('Update');
                let canvas = new bootstrap.Offcanvas('#blogOffcanvas');
                canvas.show();
            }
        })
        // let item = $(this).data('item');
    });

    function resetForm() {
        $('#blogForm')[0].reset();
        $('#description').summernote('reset');
        $('#id').val('');
        $('#submitBtn').text('Save');
    }

    // DELETE
    $(document).on('click', '.delete', function () {
        if (!confirm('Delete this blog?')) return;

        $.ajax({
            url: "{{ route('admin.blogs.delete') }}",
            type: "DELETE",
            data: {
                _token: '{{ csrf_token() }}',
                id: $(this).data('id')
            },
            success: function (res) {
                toastr.success(res.message);
                fetchBlogs();
            }
        });
    });

    // TOGGLE STATUS
    $(document).on('click', '.toggle', function () {
        $.ajax({
            url: "{{ route('admin.blogs.toggle') }}",
            type: "PATCH",
            data: {
                _token: '{{ csrf_token() }}',
                id: $(this).data('id')
            },
            success: function (res) {
                toastr.success(res.message);
                fetchBlogs();
            }
        });
    });


    // TOGGLE STATUS
    $(document).on('click', '.isverified', function () {
        $.ajax({
            url: "{{ route('admin.blogs.isverified') }}",
            type: "PATCH",
            data: {
                _token: '{{ csrf_token() }}',
                id: $(this).data('id')
            },
            success: function (res) {
                toastr.success(res.message);
                fetchBlogs();
            }
        });
    });



$(document).on('click', '.view', function () {

    // let item = $(this).data('item');
    
           $.ajax({
            url:"{{route('admin.blogs.edit')}}",
            method:"POST",
            data: {
                _token: '{{ csrf_token() }}',
                id: $(this).data('id')
            },
            success:function(res){
                
                let d = res.data;
                
                
                    $('#view_title').text(d.title);
                    $('#view_category').text(d.category?.title ?? '-');
                    $('#view_meta').text(d.meta_keyword ?? '-');
                    $('#view_short').text(d.short_description ?? '-');
                    $('#view_description').html(d.description ?? '-');
                
                    if (d.image) {
                        if (d.image.match(/\.(jpg|jpeg|png)$/i)) {
                            $('#view_image').html(`
                                <img src="{{ asset('') }}${d.image}"
                                     class="img-fluid rounded border w-100"  >
                            `);
                        } else {
                            $('#view_image').html(`
                                <a href="{{ asset('') }}${d.image}"
                                   target="_blank"
                                   class="btn btn-dark">
                                   <i class="fa fa-file-pdf me-1"></i> View File
                                </a>
                            `);
                        }
                    } else {
                        $('#view_image').html('-');
                    }
                
                    let modal = new bootstrap.Modal(
                        document.getElementById('blogViewModal')
                    );
                    modal.show();
                
            },
           });


});



















});
</script>
@endpush