@extends('layouts.app')

@section('title', 'Blogs')

@section('content')

    <link href="{{ asset('backend/vendor/datatables/css/jquery.dataTables.min.css') }}" rel="stylesheet">

    <div class="content-body">
        <div class="container-fluid">
            <div class="page-titles">
                <div class="d-flex justify-content-between align-items-center mb-3">

                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">Dashboard</a></li>
                        <li class="breadcrumb-item active">Blogs</li>
                    </ol>

                    <div class="d-flex gap-2">
                        <div class="" href="javascript:void(0)">
                            <input type="text" name="search" id="search" class="form-control" placeholder="Search">

                        </div>
                        <a class="btn btn-success" onclick="downloadExcel()">
                            <i class="fas fa-file-excel" style="font-size: 18px;"></i>
                        </a>
                        <a class="btn btn-danger" onclick="downloadPDF()">
                            <i class="fas fa-file-pdf" style="font-size: 18px;height: 20px;"></i>
                        </a>

                        <a href="{{ route('blog.create') }}" class="btn btn-primary">
                            <i class="fas fa-plus" style="font-size: 18px;"></i>
                        </a>
                    </div>

                </div>

            </div>
            <div class="row">

                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Blogs</h4>
                        </div>
                        <div class="card-body">
                            @if (session('success'))
                                <div class="alert alert-success">
                                    {{ session('success') }}
                                </div>
                            @endif
                            <div class="table-responsive">
                                <table id="example3"
                                    class="table table-bordered table-striped table-responsive-md table-hover table-datatable">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Title</th>
                                            <th>Small Text</th>
                                            <th>Published At</th>
                                            <th>Status</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($blogs as $blog)
                                            <tr>
                                                <td>{{ $blog->id }}</td>
                                                <td>{{ $blog->title }}</td>
                                                <td>{!! Str::limit($blog->small_text, 50) !!}</td>
                                                
                                                <td dir="rtl" style="text-align: center;width: 180px;">{{ $blog->publish_at_ar }}</td>
                                                <td >
                                                    @if($blog->is_active == 1)
                                                        <span class="badge bg-success">Active</span>
                                                    @else
                                                        <span class="badge bg-danger">Inactive</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <a href="{{ route('blog.edit', $blog->id) }}"
                                                        class="btn btn-sm btn-info">
                                                        <i class="fas fa-edit"></i>
                                                    </a>

                                                    @if ($blog->is_active == 0)
                                                        <form class="d-inline" action="{{ route('blog.activate', $blog->id) }}" method="POST">
                                                            @csrf
                                                            @method('POST')
                                                            <button type="submit" class="btn btn-sm btn-success">
                                                                <i class="fas fa-trash-restore"></i>
                                                            </button>
                                                        </form>
                                                    @else
                                                        <form class="d-inline" action="{{ route('blog.destroynow', $blog->id) }}" method="POST">
                                                            @csrf
                                                            @method('POST')
                                                            <button type="submit" class="btn btn-sm btn-danger">
                                                                <i class="fas fa-trash"></i>
                                                            </button>
                                                        </form>
                                                    @endif

                                                </td>
                                            </tr>
                                        @endforeach
                                            

                                    </tbody>

                                </table>

                                <div class="d-flex justify-content-center">
                                    <div class="pagination">
                                        @if ($blogs->hasPages())
                                            {{ $blogs->links('pagination::bootstrap-4') }}
                                        @else
                                        @endif
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    




    <script src="{{ asset('backend/vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('backend/js/plugins-init/datatables.init.js') }}"></script>

    <!-- For Excel -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

    <!-- For PDF -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script>
        // ========== DOWNLOAD EXCEL ==========
        function downloadExcel() {
            let table = document.getElementById("example3");
            let wb = XLSX.utils.table_to_book(table, {
                sheet: "Offers"
            });
            XLSX.writeFile(wb, "offers.xlsx");
        }

        // ========== DOWNLOAD PDF ==========
        async function downloadPDF() {
            const {
                jsPDF
            } = window.jspdf;
            let table = document.getElementById("example3");

            html2canvas(table, {
                scale: 2
            }).then(canvas => {
                let imgData = canvas.toDataURL("image/png");
                let pdf = new jsPDF('l', 'mm', 'a4');

                let pageWidth = pdf.internal.pageSize.getWidth();
                let pageHeight = pdf.internal.pageSize.getHeight();

                let imgWidth = pageWidth - 20;
                let imgHeight = (canvas.height * imgWidth) / canvas.width;

                let position = 10;

                if (imgHeight < pageHeight) {
                    pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
                } else {
                    let y = 0;
                    while (y < imgHeight) {
                        pdf.addImage(imgData, 'PNG', 10, position - y, imgWidth, imgHeight);
                        y += pageHeight;
                        if (y < imgHeight) pdf.addPage();
                    }
                }

                pdf.save("offers.pdf");
            });
        }
    </script>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
    $('#search').on('keyup', function () {

        let search = $(this).val();

        $.ajax({
            url: "{{ route('blog.index') }}",
            type: "GET",
            data: {
                search: search
            },

            success: function (response) {

                let tbody = '';

                response.blogs.data.forEach(blog => {

                    tbody += `
                        <tr>
                            <td>${blog.id}</td>

                            <td>${blog.title ?? ''}</td>

                            <td>${blog.small_text ?? ''}</td>

                            <td style="text-align:center;width:180px;">
                                ${blog.publish_at_ar ?? ''}
                            </td>

                            <td>
                                ${
                                    blog.is_active == 1
                                    ? '<span class="badge bg-success">Active</span>'
                                    : '<span class="badge bg-danger">Inactive</span>'
                                }
                            </td>

                            <td>
                                <a href="/admin/blog/${blog.id}/edit"
                                   class="btn btn-sm btn-info">
                                    <i class="fas fa-edit"></i>
                                </a>
                            </td>
                        </tr>
                    `;
                });

                $('#example3 tbody').html(tbody);

            }
        });

    });
</script>

    <script>
        document.querySelectorAll("#example3 th").forEach((header, index) => {
            header.style.cursor = "pointer";
            header.addEventListener("click", function () {
                sortTable(index);
            });
        });
        
        function sortTable(columnIndex) {
            const table = document.getElementById("example3");
            const tbody = table.tBodies[0];
            const rows = Array.from(tbody.querySelectorAll("tr"));
            const asc = table.getAttribute("data-sort") !== "asc";
        
            rows.sort((a, b) => {
                let x = a.children[columnIndex].innerText.trim().toLowerCase();
                let y = b.children[columnIndex].innerText.trim().toLowerCase();
        
                // لو العمود أرقام (ID – Phone – Trips)
                if (!isNaN(x) && !isNaN(y)) {
                    return asc ? x - y : y - x;
                }
        
                // لو نصوص (Name – Status)
                return asc ? x.localeCompare(y) : y.localeCompare(x);
            });
        
            rows.forEach(row => tbody.appendChild(row));
            table.setAttribute("data-sort", asc ? "asc" : "desc");
        }
    </script>
    
    
@endsection