@extends('layouts.sidebar')

@section('content')
    <div class="p-6 mx-auto ">

        <div class="relative flex flex-col items-end justify-end mr-10 text-center">
            <div>
                <button type="button"
                    class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-blue-500 border border-gray-300 rounded-md shadow-sm hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500"
                    id="menu-button" aria-expanded="false" aria-haspopup="true" onclick="toggleDropdown()">
                    Menu
                    <!-- Dropdown icon -->
                    <svg class="w-5 h-5 ml-2 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                        aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M5.23 7.21a.75.75 0 011.06 0L10 10.44l3.71-3.23a.75.75 0 111.04 1.08l-4.25 3.5a.75.75 0 01-1.04 0l-4.25-3.5a.75.75 0 010-1.08z"
                            clip-rule="evenodd" />
                    </svg>
                </button>
                <div class="absolute right-0 z-10 hidden w-56 mt-2 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
                    role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1"
                    id="dropdown-menu">
                    <div class="py-1" role="none">
                        <a href="{{ url('bills') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">DLPC
                            Billings</a>
                        <a href="{{ route('lights.index') }}"
                            class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">DLPC
                            Accounts</a>
                        <a href="{{ route('water1.index') }}"
                            class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">DCWD
                            Accounts</a>
                    </div>
                </div>
            </div> <!-- Dropdown menu, show/hide based on menu state -->

        </div>
        <script>
            // Dropdown toggle
            document.getElementById('menu-button').addEventListener('click', function() {
                const menu = document.getElementById('dropdown-menu');
                menu.classList.toggle('hidden');
            });
        </script>



       
        <script>
            function displayDates() {
                // Get the selected dates
                const startDate = document.getElementById('start_date').value;
                const endDate = document.getElementById('end_date').value;

                // Check if both dates are selected
                if (startDate && endDate) {
                    // Display the selected dates
                    document.getElementById('dateDisplay').textContent = `Start Date: ${startDate}, End Date: ${endDate}`;
                } else {
                    // Clear the display if any of the dates are not selected
                    document.getElementById('dateDisplay').textContent = '';
                }
            }
        </script>
        <!-- Display Filtered Date Range -->

        <div class="print-content ">
            <h1 class="mb-4 text-xl font-bold">Water Monthly Bills</h1>
            <form id="filter-form" action="" class="">
            <div class="flex items-center mt-6 mb-4 space-x-4">

                <div>
                    <label for="start_date" class="block text-sm font-medium text-gray-700">Start Date:</label>
                    <input type="date" name="start_date" id="start_date"
                        class="p-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                        onchange="displayDates()">
                </div>

                <div>
                    <label for="end_date" class="block text-sm font-medium text-gray-700">End Date:</label>
                    <input type="date" name="end_date" id="end_date"
                        class="p-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                        onchange="displayDates()">
                </div>
            </div>

            <button type="submit"
                class="px-4 py-2 text-white bg-indigo-600 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                Filter
            </button>
        </form>
            <div class="w-full mt-8 " id="print-section">
                <div class="text-center">
                    <h2 class="mb-4 text-xl font-bold ">Davao City Water Distric (DCWD)</h2>
                    <p id="dateDisplay" class="mt-4 text-sm text-gray-700"></p>
                </div>
                <table id="light_M_Table_With_Tax"
                    class="min-w-full text-center bg-white border-collapse rounded shadow-md">
                    <thead class="text-xs bg-gray-200">
                        <tr>
                            <th class="px-4 py-2 border">Area</th>
                            <th class="px-4 py-2 border">DCWD Actual Bill</th>
                            <th class="px-4 py-2 border">Expanded Withholding Tax</th>
                            <th class="px-4 py-2 border">Net of Withholding Tax</th>
                            <th class="px-4 py-2 border">Actual Tenant Computation</th>
                            <th class="px-4 py-2 border">Loss / Income</th>

                        </tr>
                    </thead>
                    <tbody class="text-xs">
                        <!-- DataTables will populate this -->
                    </tbody>
                    <tfoot class="text-xs bg-gray-200">
                        <tr>
                            <th class="px-4 py-2 border">Total</th>
                            <th class="px-4 py-2 border" id="total-bill-with-tax">0.00</th>
                            <th class="px-4 py-2 border" id="total-tax-with-tax">0.00</th>
                            <th class="px-4 py-2 border" id="total-net-with-tax">0.00</th>
                            <th class="px-4 py-2 border"></th>
                            <th class="px-4 py-2 border"></th>

                        </tr>
                    </tfoot>
                </table>


                <div class="w-full mt-8">
                    <h2 class="mb-4 text-xl font-bold text-center"></h2>
                    <table id="light_M_Table_Without_Tax"
                        class="min-w-full text-center bg-white border-collapse rounded shadow-md">
                        <thead class="text-xs bg-gray-200">
                            <tr>
                                <th class="px-4 py-2 border">Area</th>
                                <th class="px-4 py-2 border">DCWD Actual Bill</th>
                                <th class="px-4 py-2 border">Net</th>
                                <th class="px-4 py-2 border">Actual Tenant Computation</th>
                                <th class="px-4 py-2 border">Loss / Income</th>

                            </tr>
                        </thead>
                        <tbody class="text-xs">
                            <!-- DataTables will populate this -->
                        </tbody>
                        <tfoot class="text-xs bg-gray-200">
                            <tr>
                                <th class="px-4 py-2 border">Total</th>
                                <th class="px-4 py-2 border" id="total-bill-without-tax">0.00</th>
                                <th class="px-4 py-2 border" id="total-net-without-tax">0.00</th>
                                <th class="px-4 py-2 border"></th>
                                <th class="px-4 py-2 border"></th>


                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
        <button onclick="printDiv('print-section')" class="px-4 py-2 text-white bg-blue-500 rounded">
            Print
        </button>
        <script>
            $(document).ready(function() {
                // Table 1: Withholding Tax
                var tableWithTax = $('#light_M_Table_With_Tax').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: '{{ url('bills1') }}', // Single endpoint for both tables
                        data: function(d) {
                            d.table = 'with_tax';
                            d.start_date = $('#start_date').val(); // Pass the start date filter
                            d.end_date = $('#end_date').val(); // Pass the end date filter
                        }
                    },
                    columns: [{
                            data: 'properties',
                            name: 'properties'
                        },
                        {
                            data: 'bill_amount',
                            name: 'bill_amount',
                            render: function(data, type, row) {
                                if (!data) return ''; // Handle null or empty data
                                return parseFloat(data).toFixed(2); // Format to two decimal places
                            }
                        },
                        {
                            data: 'tax',
                            name: 'tax'
                        },
                        {
                            data: 'net',
                            name: 'net'
                        },
                        {
                            data: 'tenant_consumtion',
                            name: 'tenant_consumtion'
                        },
                        {
                            data: 'loss',
                            name: 'loss',
                            render: function(data, type, row) {
                                // Convert to float and fix to 2 decimal places, handling precision issues
                                let formattedLoss = parseFloat(Number(data).toFixed(2));
                                // Apply red color if negative
                                return formattedLoss < 0 ?
                                    `<span style="color: red;">${formattedLoss}</span>` :
                                    formattedLoss;
                            }
                        }

                    ],
                    drawCallback: function(settings) {
                        calculateTotals('#total-bill-with-tax', '#total-net-with-tax',
                            '#total-tax-with-tax', tableWithTax);
                    }
                });

                // Table 2: Without Withholding Tax
                var tableWithoutTax = $('#light_M_Table_Without_Tax').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: '{{ url('bills1') }}', // Same endpoint
                        data: function(d) {
                            d.table = 'without_tax'; // Pass the 'without_tax' parameter to the backend
                            d.start_date = $('#start_date').val(); // Pass the start date filter
                            d.end_date = $('#end_date').val(); // Pass the end date filter
                        }
                    },
                    columns: [{
                            data: 'properties',
                            name: 'properties'
                        },
                        {
                            data: 'bill_amount',
                            name: 'bill_amount',
                            render: function(data, type, row) {
                                if (!data) return ''; // Handle null or empty data
                                return parseFloat(data).toFixed(2); // Format to two decimal places
                            }
                        },
                        {
                            data: 'net',
                            name: 'net'
                        },
                        {
                            data: 'tenant_consumtion',
                            name: 'tenant_consumtion'
                        },
                        {
                            data: 'loss',
                            name: 'loss',
                            render: function(data, type, row) {
                                // Convert to float and fix to 2 decimal places, handling precision issues
                                let formattedLoss = parseFloat(Number(data).toFixed(2));
                                // Apply red color if negative
                                return formattedLoss < 0 ?
                                    `<span style="color: red;">${formattedLoss}</span>` :
                                    formattedLoss;
                            }
                        },

                    ],
                    drawCallback: function(settings) {
                        calculateTotals('#total-bill-without-tax', '#total-net-without-tax', '',
                            tableWithoutTax);
                    }
                });

                // Filter form submit
                $('#filter-form').on('submit', function(e) {
                    e.preventDefault();
                    tableWithTax.ajax.reload(); // Reload the table with tax
                    tableWithoutTax.ajax.reload(); // Reload the table without tax
                });

                // Calculate totals
                function calculateTotals(totalBillSelector, totalNetSelector, totalTaxSelector, table) {
                    var totalBill = 0;
                    var totalNet = 0;
                    var totalTax = 0;

                    table.rows().every(function() {
                        var data = this.data();
                        totalBill += parseFloat(data.bill_amount) || 0;
                        totalNet += parseFloat(data.net) || 0;
                        totalTax += parseFloat(data.tax || 0); // Ensure tax is accounted for only when present
                    });

                    $(totalBillSelector).text(totalBill.toFixed(2));
                    $(totalNetSelector).text(totalNet.toFixed(2));
                    if (totalTaxSelector) {
                        $(totalTaxSelector).text(totalTax.toFixed(2));
                    }
                }
            });
        </script>


<script>
            function printDiv(divId) {
                var printContents = document.getElementById(divId).innerHTML;
                var originalContents = document.body.innerHTML;

                // Temporarily update the body content for printing
                document.body.innerHTML = printContents;

                // Apply print styles
                var style = document.createElement('style');
                style.innerHTML = `
            @media print {
                @page {
                    size: landscape;  /* Force portrait orientation */
                    margin: 1cm;      /* Adjust margins if necessary */
                }
                body {
                    font-family: Arial, sans-serif;
                }
                      .dataTables_filter {
                    display: none !important;
                }

                /* Hide pagination controls */
                .dataTables_paginate {
                    display: none !important;
                }

                /* Optionally, you can hide the table length selection too */
                .dataTables_length {
                    display: none !important;
                }

                /* If you want to adjust the table styles for print (optional) */
                table {
                    width: 100% !important;
                }

                /* You can also increase font size for better readability during print */
                th,
                td {
                    font-size: 12px;
                }

                /* Optional: Hide DataTable table headers for print */
                .dataTables_info {
                    display: none !important;
                }
            }
        `;
                document.head.appendChild(style);

                // Trigger print dialog
                window.print();

                // Restore original page content after printing
                document.body.innerHTML = originalContents;
                window.location.reload(); // Reload to ensure any dynamic content is restored
            }
        </script>



        <script>
            function openModal(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.remove('hidden');
                modal.classList.add('flex');
            }

            function closeModal(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            }
        </script>
    @endsection