@extends('layouts.app')

@section('title', 'Clients')

@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="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Clients</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('client.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">Clients</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>Order ID</th>
                                            <th>Title</th>
                                            <th>Image</th>
                                            <th>Status</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($clients as $client)
                                            <tr>
                                                <td>{{ $client->order }}</td>
                                                <td>{{ $client->title }}</td>
                                                <td>
                                                    @if($client->image_mobile)
                                                        <img src="{{ $client->image_mobile }}" 
                                                             alt="" 
                                                             class="img-thumbnail" 
                                                             style="max-width: 100px;">
                                                    @endif
                                                </td>
                                                <td >
                                                    @if($client->is_active == 1)
                                                        <span class="badge bg-success">Active</span>
                                                    @else
                                                        <span class="badge bg-danger">Inactive</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <a href="{{ route('client.edit', $client->id) }}"
                                                        class="btn btn-sm btn-info">
                                                        <i class="fas fa-edit"></i>
                                                    </a>

                                                    @if ($client->is_active == 0)
                                                        <form class="d-inline" action="{{ route('client.activate', $client->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('client.destroynow', $client->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 ($clients->hasPages())
                                            {{ $clients->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>
        document.getElementById("search").addEventListener("keyup", function () {
            let value = this.value.toLowerCase();
            let rows = document.querySelectorAll("#example3 tbody tr");
        
            rows.forEach(row => {
                let text = row.innerText.toLowerCase();
                row.style.display = text.includes(value) ? "" : "none";
            });
        });
    </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