@extends('layouts.sidebar')

@section('content')
    <style>
        @media print {
            body * {
                visibility: hidden;
            }

            .print-content,
            .print-content * {
                visibility: visible;
                font-size: 10px;
            }

            .print-content {
                position: absolute;
                left: 0;
                top: 0;
                width: 210mm;
                height: 350mm;
                padding: 10mm;
                box-sizing: border-box;
            }

            .print-content table td,
            .print-content table th {
                padding: 2px;
            }
        }
    </style>

    <div class="px-4 py-8 ">
        <h1 class="mb-4 text-2xl font-extrabold">Water Report</h1>
        <div class="container w-full mx-auto rounded-lg shadow-sm bg-gray-50">
            <form method="GET" action="{{ url('/water-report') }}" class="grid grid-cols-1 gap-3 mb-6 md:grid-cols-4">
                <div class="mb-4">
                    <label for="start_date" class="block mb-2 text-sm font-bold text-gray-700">Start Date</label>
                    <input type="date" id="start_date" name="start_date"
                        class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                        value="{{ $nextStartDate ? $nextStartDate->format('Y-m-d') : request('start_date') }}"
                        onchange="setEndDate()">
                </div>

                <div class="mb-4">
                    <label for="end_date" class="block mb-2 text-sm font-bold text-gray-700">End Date</label>
                    <input type="date" id="end_date" name="end_date"
                        class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                        value="{{ $nextEndDate ? $nextEndDate->format('Y-m-d') : request('end_date') }}">
                </div>

                <script>
                    function setEndDate() {
                        const startDateInput = document.getElementById('start_date');
                        const endDateInput = document.getElementById('end_date');

                        const startDate = new Date(startDateInput.value);
                        if (!isNaN(startDate.getTime())) { // Check if start date is valid
                            const endDate = new Date(startDate);
                            endDate.setDate(startDate.getDate() + 30); // Add 30 days to the start date

                            const month = (endDate.getMonth() + 1).toString().padStart(2, '0'); // Ensure two digits
                            const day = endDate.getDate().toString().padStart(2, '0'); // Ensure two digits
                            const year = endDate.getFullYear();

                            endDateInput.value = `${year}-${month}-${day}`; // Set the value of end date
                        }
                    }
                </script>

                <div class="mb-4">
                    <label for="account" class="block mb-2 text-sm font-bold text-gray-700">Select Account
                        Number/Area</label>
                    <select id="account_number" name="account_number"
                        class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline">
                        <option value="">All Accounts</option>
                        @foreach ($account as $account)
                            <option value="{{ $account->id }}"
                                {{ request('account') == $account->account_number ? 'selected' : '' }}>
                                {{ $account->account_number }}
                                @foreach ($account->accountchannel as $ac)
                                    {{ $ac->property->property_name }}
                                @endforeach
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="flex items-center justify-center"> <button type="submit"
                        class="w-32 h-10 px-4 py-2 text-white bg-blue-500 rounded shadow focus:outline-none focus:shadow-outline">Filter
                    </button></div>

            </form>

        </div>
        @if (session('success'))
            <div class="text-center text-green-500">{{ session('success') }}</div>
        @endif
        <div class="print-content">
            <div class="col-span-2 p-4 rounded-lg shadow-sm bg-gray-50">
                <!-- Display Selected Filter Criteria -->
                @if (request('month') && request('year'))
                    <div class="p-4 mb-6 bg-gray-100 rounded-lg">
                        <h2 class="mb-2 text-lg font-semibold">Selected Filter Criteria</h2>
                        <p class="text-sm text-gray-700">Month:
                            {{ \DateTime::createFromFormat('!m', request('month'))->format('F') }}
                        </p>
                        <p class="text-sm text-gray-700">Year: {{ request('year') }}</p>
                    </div>
                @endif
                <div class="flex items-center justify-center w-full gap-10 flex-col-1 md:flex-row">
                    <div>
                        {{-- <form method="POST" action="{{ route('waterbill.store') }}"> --}}
                        @csrf
                        <div class="grid grid-cols-1 gap-3 mb-6 md:grid-cols-4">
                            <div class="hidden mb-4">
                                <label for="start_date" class="block mb-2 text-sm font-bold text-gray-700">Start
                                    Date</label>
                                <input type="date" id="start_date" name="start_date"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    value="{{ request('start_date') }}">
                            </div>

                            <div class="hidden mb-4">
                                <label for="end_date" class="block mb-2 text-sm font-bold text-gray-700">End
                                    Date</label>
                                <input type="date" id="end_date" name="end_date"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    value="{{ request('end_date') }}">
                            </div>

                            <div class="hidden mb-4">
                                <label for="property" class="block mb-2 text-sm font-bold text-gray-700">Select
                                    Property</label>
                                <select id="property" name="property_id"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline">
                                    <option value="">All Properties</option>
                                    @foreach ($properties as $property)
                                        <option value="{{ $property->id }}"
                                            {{ request('property') == $property->id ? 'selected' : '' }}>
                                            {{ $property->property_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="flex items-center justify-center gap-10 mb-4">
                            <label for="currentBill" class="block text-sm font-medium text-gray-700">Current Bill
                                :</label>
                            <input type="number" id="currentBill" name="bill_amount"
                                value="{{ request('billing_amount') }}"
                                class="block w-1/2 h-10 mt-1 border border-black rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                                step="0.01" oninput="calculateDifference()">


                        </div>

                        </form>

                    </div>
                    <div>
                        <form action="{{ route('export.water.report') }}" method="GET">
                            <div class="hidden">
                                <div class="mb-4">
                                    <label for="start_date" class="block text-gray-700">Start Date</label>
                                    <input type="date" name="start_date" id="start_date"
                                        class="block w-full mt-1 form-input" required value="{{ request('start_date') }}">
                                </div>

                                <div class="mb-4">
                                    <label for="end_date" class="block text-gray-700">End Date</label>
                                    <input type="date" name="end_date" id="end_date"
                                        class="block w-full mt-1 form-input" required value="{{ request('end_date') }}">
                                </div>

                                <div class="mb-4">
                                    <label for="accountId" class="block text-gray-700">account_id</label>
                                    <input type="number" name="accountId" id="accountId"
                                        class="block w-full mt-1 form-input" value="{{ request('account_number') }}">
                                </div>

                                <div class="mb-4">
                                    <label for="current_bill" class="block text-gray-700">Current Bill</label>
                                    <input type="number" step="0.01" name="current_bill" id="current_bill"
                                        value="{{ request('billing_amount') }}" class="block w-full mt-1 form-input"
                                        required value="">
                                </div>
                            </div>


                            <button type="submit" class="px-4 py-2 text-white bg-blue-500 rounded">Export to
                                Excel</button>
                        </form>
                    </div>
                    {{-- <div>
                        <button class="px-4 py-2 text-white bg-blue-500 rounded" onclick="openModal('addItemModal')">
                            Water Bill History</button>
                    </div> --}}
                </div>

                <script>
                    // Function to copy the value from currentBill to current_bill
                    function copyToCurrentBill() {
                        // Get the value from the currentBill input
                        let currentBillValue = document.getElementById('currentBill').value;

                        // Set the value to the current_bill input
                        document.getElementById('current_bill').value = currentBillValue;
                    }
                </script>

                <div class="overflow-x-auto">
                    <table class="w-full bg-white border border-collapse border-gray-300 divide-y divide-gray-200">

                        <thead class="text-center text-black bg-orange-500">
                            <tr>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Unit</th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Renters</th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Previous Reading
                                </th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Present Reading
                                </th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Consumption</th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300"></th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Total Amount
                                </th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Percentage of
                                    Total
                                    Collection</th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Percentage x
                                    Difference =
                                    Additonal Consumption</th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Total</th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Payable</th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">0-10 </th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">11-20 </th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">21-30 </th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300 0">31-40 </th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">41-up </th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">total</th>
                            </tr>
                        </thead>
                        <tbody id="table-body" class="text-center bg-white divide-y divide-gray-200">
                            @forelse ($payments as $payment)
                                @foreach ($payment->waterPayments as $waterbill)
                                    @php
                                        // Initialize rate variables
                                        $baseRate = 0;
                                        $bracket1Rate = 0;
                                        $bracket2Rate = 0;
                                        $bracket3Rate = 0;
                                        $bracket4Rate = 0;

                                        // Find the matching rate from the waterRates collection
                                        $rateInfo = $waterRates->firstWhere('name', $waterbill->rate);

                                        if ($rateInfo) {
                                            $baseRate = $rateInfo->{'0_10'}; // Assuming base_rate is the correct field name

                                            $bracket4Rate = $rateInfo->{'41_up'};
                                            $bracket3Rate = $rateInfo->{'31_40'};
                                            $bracket2Rate = $rateInfo->{'21_30'};
                                            $bracket1Rate = $rateInfo->{'11_20'};
                                        }

                                        $amount = 0;
                                        $details = [];

                                        if ($waterbill->consumption <= 10) {
                                            $amount = $baseRate;
                                            $details[] = number_format($baseRate, 2);
                                        } else {
                                            $amount = $baseRate;
                                            $details[] = number_format($baseRate, 2);

                                            if ($waterbill->consumption <= 20) {
                                                $additionalUnits = $waterbill->consumption - 10;
                                                $amount += $additionalUnits * $bracket1Rate;
                                                $details[] = number_format($additionalUnits * $bracket1Rate, 2);
                                            } elseif ($waterbill->consumption <= 30) {
                                                $additionalUnits1 = 10;
                                                $additionalUnits2 = $waterbill->consumption - 20;
                                                $amount +=
                                                    $additionalUnits1 * $bracket1Rate +
                                                    $additionalUnits2 * $bracket2Rate;
                                                $details[] = number_format($additionalUnits1 * $bracket1Rate, 2);
                                                $details[] = number_format($additionalUnits2 * $bracket2Rate, 2);
                                            } elseif ($waterbill->consumption <= 40) {
                                                $additionalUnits1 = 10;
                                                $additionalUnits2 = 10;
                                                $additionalUnits3 = $waterbill->consumption - 30;
                                                $amount +=
                                                    $additionalUnits1 * $bracket1Rate +
                                                    $additionalUnits2 * $bracket2Rate +
                                                    $additionalUnits3 * $bracket3Rate;
                                                $details[] = number_format($additionalUnits1 * $bracket1Rate, 2);
                                                $details[] = number_format($additionalUnits2 * $bracket2Rate, 2);
                                                $details[] = number_format($additionalUnits3 * $bracket3Rate, 2);
                                            } else {
                                                $additionalUnits1 = 10;
                                                $additionalUnits2 = 10;
                                                $additionalUnits3 = 10;
                                                $additionalUnits4 = $waterbill->consumption - 40;
                                                $amount +=
                                                    $additionalUnits1 * $bracket1Rate +
                                                    $additionalUnits2 * $bracket2Rate +
                                                    $additionalUnits3 * $bracket3Rate +
                                                    $additionalUnits4 * $bracket4Rate;
                                                $details[] = number_format($additionalUnits1 * $bracket1Rate, 2);
                                                $details[] = number_format($additionalUnits2 * $bracket2Rate, 2);
                                                $details[] = number_format($additionalUnits3 * $bracket3Rate, 2);
                                                $details[] = number_format($additionalUnits4 * $bracket4Rate, 2);
                                            }
                                        }

                                        $totalCollection = $totalWaterAmountpaid ?? 0; // Ensure this is defined somewhere in your code
                                        $percentageOfTotalCollection =
                                            $totalCollection > 0 ? ($amount / $totalCollection) * 100 : 0;
                                    @endphp
                                    <tr>
                                        <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                            {{ $payment->lease->unit->unit_name ?? 'N/A' }}
                                        </td>
                                        <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                            {{ $payment->lease->client->owners_name ?? 'N/A' }}
                                        </td>
                                        <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                            {{ $waterbill->previous_reading ?? 'N/A' }}
                                        </td>
                                        <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                            {{ $waterbill->present_reading ?? 'N/A' }}
                                        </td>
                                        <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                            {{ number_format($waterbill->consumption, 2) ?? 'N/A' }}
                                        </td>
                                        <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                            {{ $waterbill->rate ?? 'N/A' }}
                                        </td>
                                        <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                            {{ number_format($waterbill->amount, 2) ?? 'N/A' }}
                                        </td>
                                        <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                            @if ($totalWaterAmountpaid > 0)
                                                {{ number_format(($waterbill->amount / $totalWaterAmountpaid) * 100, 2) }}%
                                            @else
                                                0.00%
                                            @endif
                                        </td>
                                        <td
                                            class="px-4 py-2 text-sm text-gray-800 border border-gray-300 percentage-difference">
                                            N/A</td>
                                        <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300 total-amount">N/A
                                        </td>
                                        <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300 payable">N/A</td>
                                        <td class="px-4 py-2 text-sm text-gray-800 bg-yellow-400 border border-gray-300 ">
                                            {{ isset($details[0]) ? $details[0] : 'N/A' }}
                                        </td>
                                        <td class="px-4 py-2 text-sm text-gray-800 bg-yellow-400 border border-gray-300">
                                            {{ isset($details[1]) ? $details[1] : 'N/A' }}
                                        </td>
                                        <td class="px-4 py-2 text-sm text-gray-800 bg-yellow-400 border border-gray-300">
                                            {{ isset($details[2]) ? $details[2] : 'N/A' }}
                                        </td>
                                        <td class="px-4 py-2 text-sm text-gray-800 bg-yellow-400 border border-gray-300">
                                            {{ isset($details[3]) ? $details[3] : 'N/A' }}
                                        </td>
                                        <td class="px-4 py-2 text-sm text-gray-800 bg-yellow-400 border border-gray-300">
                                            {{ isset($details[4]) ? $details[4] : 'N/A' }}
                                        </td>
                                        <td class="px-4 py-2 text-sm text-gray-800 bg-yellow-400 border border-gray-300">



                                            {{ number_format($amount, 2) ?: 'N/A' }}
                                        </td>
                                    </tr>
                                @endforeach
                            @empty
                                <tr>
                                    <td colspan="14" class="px-4 py-2 text-sm text-center text-gray-800">No data
                                        available</td>
                                </tr>
                            @endforelse
                        </tbody>
                        <tfoot class="text-center bg-gray-100">
                            <tr class="font-semibold bg-gray-100">
                                <td colspan="6" class="px-4 py-2 text-sm text-right">Total:</td>

                                <td class="px-4 py-2 text-sm text-gray-800">{{ $totalWaterAmountpaid }}</td>
                                <td class="px-4 py-2 text-sm text-gray-800" id="total-collection-percentage">0.00%
                                </td>
                                <td class="px-4 py-2 text-sm text-gray-800" id="total-losses">0.00</td>
                                <td class="px-4 py-2 text-sm text-gray-800" id="total-amount">0.00</td>
                                <td class="px-4 py-2 text-sm text-gray-800" id="total-payable">0.00</td>
                                <td class="px-4 py-2 text-sm text-gray-800"></td>
                                <td class="px-4 py-2 text-sm text-gray-800"></td>
                                <td class="px-4 py-2 text-sm text-gray-800"></td>
                                <td class="px-4 py-2 text-sm text-gray-800"></td>
                                <td class="px-4 py-2 text-sm text-gray-800"></td>
                                <td class="px-4 py-2 text-sm text-gray-800"></td>

                            </tr>
                        </tfoot>
                    </table>
                    @if ($nextStartDate && $nextEndDate)
                        <form method="GET" action="{{ url('water-report') }}">
                            <input type="hidden" name="start_date" value="{{ $nextStartDate }}">
                            <input type="hidden" name="end_date" value="{{ $nextEndDate }}">
                            <button type="submit" class="btn btn-primary">Next</button>
                        </form>
                    @endif
                </div>
            </div>
            <div class="mt-4">
                {{ $payments->links() }} <!-- This will render the pagination links -->
            </div>
            <!-- Summary Section -->
            <div class="p-4 mt-6 rounded-lg shadow-sm bg-gray-50">
                <h2 class="text-lg font-semibold">Summary</h2>

                <p id="difference" class="text-lg font-semibold">Difference: 0.00</p>
            </div>
        </div>

        <script>
            function calculateDifference() {
                const currentBill = parseFloat(document.getElementById('currentBill').value) || 0;
                const totalWaterAmount = @json($totalWaterAmount); // Pass the PHP variable to JavaScript

                const difference = currentBill - totalWaterAmount;
                document.getElementById('difference').textContent = `Difference: ${difference.toFixed(2)}`;

                let totalAmountPaid = 0;
                let totalPercentage = 0;
                let totalLosses = 0;
                let totalAmount = 0;
                let totalPayable = 0;
                copyToCurrentBill();

                // Calculate the percentage x difference, total amount, and total collection percentage for each row
                document.querySelectorAll('#table-body tr').forEach(row => {
                    if (!row.querySelector('td:nth-child(1)')) return; // Skip the total row

                    const amountCell = row.querySelector('td:nth-child(7)');
                    const percentageCell = row.querySelector('td:nth-child(8)');
                    const totalAmountCell = row.querySelector('.total-amount');
                    const percentageDifferenceCell = row.querySelector('.percentage-difference');
                    const payableCell = row.querySelector('.payable');

                    const amount = parseFloat(amountCell.textContent.replace(/,/g, '')) || 0;
                    const percentage = parseFloat(percentageCell.textContent.replace('%', '').replace(/,/g, '')) || 0;

                    // Calculate the percentage difference
                    const percentageDifference = (percentage / 100) * difference;
                    percentageDifferenceCell.textContent = percentageDifference.toFixed(2);

                    // Calculate the total amount
                    const totalRowAmount = amount + percentageDifference;
                    totalAmountCell.textContent = totalRowAmount.toFixed(2);

                    // Calculate and display the rounded total amount (payable)
                    const roundedPayable = Math.round(totalRowAmount);
                    payableCell.textContent = roundedPayable.toFixed(2);

                    // Accumulate totals
                    totalAmountPaid += amount;
                    totalPercentage += percentage;
                    totalLosses += percentageDifference;
                    totalAmount += totalRowAmount;
                    totalPayable += roundedPayable;
                });

                // Update total collection percentage
                const totalCollectionPercentageCell = document.getElementById('total-collection-percentage');
                totalCollectionPercentageCell.textContent = totalPercentage.toFixed(2) + '%';

                // Update totals in the footer
                document.getElementById('total-losses').textContent = totalLosses.toFixed(2);
                document.getElementById('total-amount').textContent = totalAmount.toFixed(2);
                document.getElementById('total-payable').textContent = totalPayable.toFixed(2);
            }

            // Add event listener to trigger calculation when input changes
            document.getElementById('currentBill').addEventListener('input', calculateDifference);
        </script>




        <div id="addItemModal"
            class="absolute inset-0 z-50 flex items-start justify-center hidden bg-black bg-opacity-50">
            <div class="w-full max-w-4xl overflow-hidden bg-white rounded-lg shadow-lg">
                <!-- Modal header -->
                <div class="flex items-center justify-between px-4 py-2 text-white bg-blue-600">
                    <h5 class="text-lg font-bold">Bills</h5>
                    <button onclick="closeModal('addItemModal')" class="text-white hover:text-gray-300">
                        &times;
                    </button>
                </div>
                <div class="p-4">
                    <table id="billsTable" class="w-full border-separate border-spacing-0">
                        <thead>
                            <tr class="bg-gray-100 border-b border-gray-300">
                                <th class="px-4 py-2 text-sm font-semibold text-left text-gray-700">Property</th>
                                <th class="px-4 py-2 text-sm font-semibold text-left text-gray-700">Start Date</th>
                                <th class="px-4 py-2 text-sm font-semibold text-left text-gray-700">End Date</th>
                                <th class="px-4 py-2 text-sm font-semibold text-left text-gray-700">Bill</th>
                                <th class="px-4 py-2 text-sm font-semibold text-left text-gray-700">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Table data will be populated here -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {{-- <script>
            $(document).ready(function() {
                $('#billsTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: '{{ url('/water-report') }}', // Ensure this route is defined in your web.php
    columns: [{
    data: 'property_name',
    name: 'property_name'
    },
    {
    data: 'start_date',
    name: 'start_date',
    render: function(data, type, row) {
    // Format the start_date as day-Month-year
    return formatDate(data);
    }
    },
    {
    data: 'end_date',
    name: 'end_date',
    render: function(data, type, row) {
    // Format the end_date as day-Month-year
    return formatDate(data);
    }
    },
    {
    data: 'bill_amount',
    name: 'bill_amount'
    },
    {
    data: 'actions',
    name: 'actions',
    orderable: false,
    searchable: false
    }
    ]
    });

    function formatDate(dateString) {
    // Convert the date string to a Date object
    const date = new Date(dateString);
    // Format the date as day-Month-year
    const day = String(date.getDate()).padStart(2, '0');
    const month = getMonthName(date.getMonth()); // Get the month name
    const year = date.getFullYear();
    return `${day}-${month}-${year}`;
    }

    function getMonthName(monthIndex) {
    // Array of month names
    const months = [
    'January', 'February', 'March', 'April', 'May', 'June',
    'July', 'August', 'September', 'October', 'November', 'December'
    ];
    // Return the month name based on the index
    return months[monthIndex];
    }
    });
    </script> --}}


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

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

    @endsection