@extends('layouts.app')

@section('title', 'Full Member Report')

@section('styles')
<style>
    @media print {
        body * {
            visibility: hidden;
        }
        #print-area,
        #print-area * {
            visibility: visible;
        }
        #print-area {
            position: absolute;
            top: 0;
            left: 0;
            width: 210mm;
            min-height: 297mm;
            padding: 20mm;
            background: white;
            box-sizing: border-box;
        }
        @page {
            size: A4 portrait;
            margin: 20mm;
        }
        .modal,
        .modal-backdrop,
        .modal-footer,
        .btn {
            display: none !important;
        }
        table {
            width: 100% !important;
            border-collapse: collapse;
            font-size: 12px;
        }
        th,
        td {
            border: 1px solid #333;
            padding: 6px;
        }
        .text-center {
            text-align: center;
        }
        .text-end {
            text-align: right;
        }
        .text-bold {
            font-weight: bold;
        }
        .invoice-foot {
            margin-top: 30px;
            text-align: center;
            font-size: 12px;
        }
    }
</style>
@endsection

@section('nav-header')

<div class="iq-navbar-header" style="height: 215px;">
                <div class="container-fluid iq-container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="flex-wrap d-flex justify-content-between align-items-center">
                                <div>
                                    <h1>Full Member Report</h1>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="iq-header-img">
                    <img src="../assets/images/dashboard/top-header.png" alt="header"
                        class="theme-color-default-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header1.png" alt="header"
                        class="theme-color-purple-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header2.png" alt="header"
                        class="theme-color-blue-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header3.png" alt="header"
                        class="theme-color-green-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header4.png" alt="header"
                        class="theme-color-yellow-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header5.png" alt="header"
                        class="theme-color-pink-img img-fluid w-100 h-100 animated-scaleX">
                </div>
            </div> <!-- Nav Header Component End -->
            <!--Nav End-->

@endsection



@section('content')

<!-- Table -->
        <div class="conatiner-fluid content-inner mt-n5 py-0">
            <div class="card">
                <div class="card-body">



                    <form id="reportForm">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="areaSelect" class="form-label">Area</label>
                                <select class="form-select" id="areaSelect" required>
                                    <option selected value="0">All Areas</option>
                                    <!-- Populate dynamically via JS -->
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label for="subareaSelect" class="form-label">Sub Area</label>
                                <select class="form-select" id="subareaSelect" required>
                                    <option selected value="0" disabled>All Sub Areas</option>
                                    <!-- Populate dynamically via JS -->
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label for="minShareAmount" class="form-label">Minimum Share Amount ( 0 is all)</label>
                                <input type="number" id="minShareAmount" class="form-control" value="0" required>
                            </div>


                            {{-- <div class="col-6">
                                <label class="form-label">From Date</label>
                                <input type="date" class="form-control" id="fromDate" required>
                            </div>
                            <div class="col-6">
                                <label class="form-label">To Date</label>
                                <input type="date" class="form-control" id="toDate" required>
                            </div> --}}

                        </div>

                        <br><br>
                        <div class="form-group mt-3">
                            <button type="submit" id="generateBtn" class="btn btn-primary" disabled>Generate
                                Report</button>
                            <button id="viewBtn" class="btn btn-outline-secondary" disabled>View</button>
                            <button id="printBtn" class="btn btn-outline-success" disabled>Print</button>
                        </div>
                    </form>


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

        <div class="modal fade" id="reportModal" tabindex="-1" aria-labelledby="reportModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="reportModalLabel">Full Member Report</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                    </div>
                    <div class="modal-body">
                        <!-- Report Content Goes Here -->
                        <div id="modalReportContent">
                            <div class="card">
                                <div class="card-body">
                                    <div class="invoice-wrapper" id="print-area">
                                        <div class="invoice">
                                            <div class="invoice-container">
                                                <div class="invoice-head">
                                                    <div class="invoice-head-top d-flex justify-content-between px-4">
                                                        <div class="invoice-head-top-left text-start">
                                                            <h5>Full Member Report</h5>
                                                            <h6>
                                                                Area: All<br>
                                                                Sub Area: All<br>
                                                            
                                                            </h6>
                                                        </div>
                                                        <div class="invoice-head-top-right text-end">

                                                            <h6>
                                                                Print Date : <span id="current-date"></span><br>
                                                                <strong>Print Time: </strong><span
                                                                    id="local-time"></span>
                                                            </h6>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="overflow-view">
                                                    <div class="invoice-body">
    <div style="overflow-x: auto;">
        <table class="table table-bordered table-striped">

                                                            <thead>
                                                                <tr>
                                                                    <td class="text-bold">S.No.</td>
                                                                    <td class="text-bold">Member No</td>
                                                                    <td class="text-bold">NIC</td>
                                                                    <td class="text-bold">Name</td>
                                                                    <td class="text-bold">Gender</td>
                                                                    <td class="text-bold">Age</td>
                                                                    <td class="text-bold">Email</td>
                                                                    <td class="text-bold">Contact</td>
                                                                    <td class="text-bold">Address</td>
                                                                    <td class="text-bold">Sub Area</td>
                                                                    <td class="text-bold">Area</td>
                                                                    <td class="text-bold">Amount</td>
                                                                </tr>
                                                            </thead>

                                                            <tbody></tbody>

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

                                                <div class="invoice-foot text-center">
                                                    <p><span class="text-bold text-center">NOTE:&nbsp;</span>This is
                                                        computer generated
                                                        Report.
                                                    </p>
                                                    <p>
                                                        <span class="text-bold text-center">PRINTED BY:&nbsp;</span>{{ session('username', 'Unknown User') }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button id="downloadBtn" class="btn btn-success" style="display: none;">Download PDF</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="reportModal" tabindex="-1" aria-labelledby="reportModalLabel" aria-hidden="true">
        </div>
@endsection


@section('scripts')
  <!-- generate btn functions -->


  <script>
    window.onload = function () {
    fetch('/api/areas')
        .then(res => res.json())
        .then(data => {
            const areaSelect = document.getElementById('areaSelect');
            areaSelect.innerHTML = '<option value="0">All Areas</option>'; // Reset before fill
            data.forEach(area => {
                areaSelect.innerHTML += `<option value="${area.id}">${area.name}</option>`;
            });
        });

    document.getElementById('areaSelect').addEventListener('change', function () {
        const areaId = this.value;
        fetch(`/api/areas/${areaId}/sub-areas`)
            .then(res => res.json())
            .then(data => {
                const subareaSelect = document.getElementById('subareaSelect');
                subareaSelect.innerHTML = '<option value="0">All Sub Areas</option>'; // Reset
                data.forEach(sa => {
                    subareaSelect.innerHTML += `<option value="${sa.id}">${sa.name}</option>`;
                });
            });
    });
};

</script>


   <script>
    const form = document.getElementById('reportForm');
    const generateBtn = document.getElementById('generateBtn');
    const viewBtn = document.getElementById('viewBtn');
    const printBtn = document.getElementById('printBtn');

    const requiredFields = ['areaSelect', 'subareaSelect', 'minShareAmount'];


    // Enable "Generate" only when all fields are filled
    form.addEventListener('input', () => {
        const allFilled = requiredFields.every(id => {
            const el = document.getElementById(id);
            return el && el.value.trim() !== '';
        });
        generateBtn.disabled = !allFilled;
    });

    // On Generate click, enable View and Print
    form.addEventListener('submit', function (e) {
    e.preventDefault();

    const subareaId = document.getElementById('subareaSelect').value;
    const minShareAmount = document.getElementById('minShareAmount').value;

    const areaId = document.getElementById('areaSelect').value;

    fetch(`/api/reports/member-shares?area_id=${areaId}&subarea_id=${subareaId}&min_share_amount=${minShareAmount}`)
        .then(response => response.json())
        .then(data => {
            const tbody = document.querySelector("#print-area tbody");
            tbody.innerHTML = ''; // clear old data

            data.forEach((item, index) => {
                const dob = new Date(item.member_dob);
                const age = new Date().getFullYear() - dob.getFullYear();

                const row = `
                        <tr>
                            <td>${index + 1}</td>
                            <td>${item.member_number}</td>
                            <td>${item.member_nic}</td>
                            <td>${item.member_full_name}</td>
                            <td>${item.member_gender}</td>
                            <td>${age}</td>
                            <td>${item.member_email}</td>
                            <td>${item.member_phone_number}</td>
                            <td>${item.member_address}</td>
                            <td>${item.subarea_name}</td>
                            <td>${item.area_name}</td>
                            <td>${item.total_share_amount}</td>
                        </tr>
                    `;

                tbody.innerHTML += row;
            });

            // Enable buttons
            viewBtn.disabled = false;
            viewBtn.classList.remove('btn-outline-secondary');
            viewBtn.classList.add('btn-secondary');

            printBtn.disabled = false;
            printBtn.classList.remove('btn-outline-success');
            printBtn.classList.add('btn-success');

            generateBtn.disabled = true;
        })
        .catch(err => {
            console.error("Error fetching report data:", err);
            alert("Failed to generate report. Please try again.");
        });
});

</script>



    <!-- jspdf -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.25/jspdf.plugin.autotable.min.js"></script>
    <script>
        // Set current date/time
        document.getElementById("current-date").textContent = new Date().toLocaleDateString();
        document.getElementById("local-time").textContent = new Date().toLocaleTimeString();

        const { jsPDF } = window.jspdf;

        function generatePDF(mode = 'download') {
    const doc = new jsPDF('p', 'mm', 'a4');

    const reportTitle = 'Full Member Report';
    const areaName = document.getElementById('areaSelect').selectedOptions[0].text;
    const subareaName = document.getElementById('subareaSelect').selectedOptions[0].text;

    const printedBy = document.querySelector('.invoice-foot').innerText.split('PRINTED BY:')[1]?.trim() || 'Unknown';
    const printDate = new Date().toLocaleDateString();
    const printTime = new Date().toLocaleTimeString();

    const table = document.querySelector("#print-area table");
    const rows = Array.from(table.querySelectorAll("tbody tr")).map(tr =>
        Array.from(tr.querySelectorAll("td")).map(td => td.innerText.trim())
    );

    const headers = [[
        "S.No.", "Member No", "NIC", "Name", "Gender", "Age", "Email", "Contact",
        "Address", "Sub Area", "Area", "Amount"
    ]];

    window.lastPageNum = null;

    doc.autoTable({
        startY: 25,
        head: headers,
        body: rows,
        styles: { fontSize: 9 },
        theme: 'grid',
        margin: { top: 15 },
        headStyles: {
            fillColor: [13, 110, 253],
            textColor: 255,
            halign: 'center'
        },
        didDrawPage: function () {
            const pageNumber = doc.internal.getNumberOfPages();
            const pageWidth = doc.internal.pageSize.width;
            const pageHeight = doc.internal.pageSize.height;

            if (pageNumber === 1) {
                doc.setFontSize(14);
                doc.text(reportTitle, 14, 10);

                doc.setFontSize(10);
                doc.text(`Area: ${areaName}`, 14, 15);
                doc.text(`Sub Area: ${subareaName}`, 14, 20);

                doc.text(`Print Date: ${printDate}`, pageWidth - 60, 10);
                doc.text(`Print Time: ${printTime}`, pageWidth - 60, 15);
            }

            doc.setFontSize(9);
            doc.text(`Page ${pageNumber}`, pageWidth / 2, pageHeight - 10, { align: 'center' });
        },
        didDrawCell: function () {
            window.lastPageNum = doc.internal.getNumberOfPages();
        }
    });

    if (typeof window.lastPageNum === 'number') {
        doc.setPage(window.lastPageNum);
        const pageWidth = doc.internal.pageSize.width;
        const pageHeight = doc.internal.pageSize.height;
        doc.setFontSize(9);
        doc.text("NOTE: This is a computer generated Report.", pageWidth / 2, pageHeight - 25, { align: 'center' });
        doc.text("PRINTED BY: " + printedBy, pageWidth / 2, pageHeight - 20, { align: 'center' });
    }

    if (mode === 'download') {
        doc.save("member-report.pdf");
    } else if (mode === 'print') {
        const pdfUrl = doc.output('bloburl');
        const printWindow = window.open(pdfUrl, '_blank');
        printWindow.onload = () => printWindow.print();
    }
}


        // Button handlers
        document.getElementById("downloadBtn").addEventListener("click", function () {
            generatePDF('download');
        });

        document.getElementById("printBtn").addEventListener("click", function () {
            generatePDF('print');
        });
    </script>


    <!-- modal -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
    <script>
        const modal = new bootstrap.Modal(document.getElementById('reportModal'));
        const reportContent = document.querySelector('.invoice-wrapper');
        const modalReportContent = document.getElementById('modalReportContent');
        const downloadBtn = document.getElementById('downloadBtn');


        document.getElementById('viewBtn').addEventListener('click', () => {
            const selectedArea = document.getElementById('areaSelect');
            const selectedSubarea = document.getElementById('subareaSelect');

            // Get display names from selected option text
            const areaName = selectedArea.options[selectedArea.selectedIndex].text;
            const subareaName = selectedSubarea.options[selectedSubarea.selectedIndex].text;

            // Inject into modal
            document.querySelector("#print-area .invoice-head-top-left h6").innerHTML = `
                Area: ${areaName}<br>
                Sub Area: ${subareaName}<br>
            `;


            downloadBtn.style.display = "inline-block"; // Show Download for Generate
            modal.show();
        });

    </script>

    <!-- current Time and date -->
    <script>
        // Set Print Date
        document.getElementById("current-date").innerHTML = new Date().toLocaleDateString();

        // Set Print Time
        setInterval(function () {
            var currentTime = new Date();
            document.getElementById("local-time").innerHTML = currentTime.toLocaleTimeString();
        }, 1000);
    </script>

    
@endsection