@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">Electric Report</h1>

        <!-- Filter Form -->
        <div class="container w-full mx-auto rounded-lg shadow-sm bg-gray-50">
            <form method="GET" action="{{ route('electricreport') }}" 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="{{ request('start_date') }}">
                </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="{{ request('end_date') }}">
                </div>

                <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>

        <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('lightbills.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 from
                                Davao
                                Light:</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()" value="">
                            {{-- <button type="submit"
                                class="px-4 py-2 text-white bg-blue-500 rounded shadow focus:outline-none focus:shadow-outline">Save
                            </button> --}}
                        </div>

                        </form>
                    </div>
                    <div>
                        <form action="{{ route('export.electric.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')">
                            Electriic 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">Rate (not
                                    Constant)
                                </th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Payable Before
                                    Additional
                                    Consumption</th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Payable Before
                                    Additional
                                    Consumption / Total Collection</th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Percentage x
                                    Difference
                                    Additional Consumption/Losses</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">Payable</th>
                            </tr>
                        </thead>
                        <tbody id="table-body" class="text-center bg-white divide-y divide-gray-200">
                            @forelse ($payments as $payment)
                                @foreach ($payment->electricPayments as $electricbill)
                                    <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 }}({{ $payment->lease->client->business_name ?? 'N/A' }})
                                        </td>
                                        <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                            {{ $electricbill->previous_reading ?? 'N/A' }}</td>
                                        <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                            {{ $electricbill->present_reading ?? 'N/A' }}</td>
                                        <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                            {{ $electricbill->consumption ?? 'N/A' }}</td>
                                        <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                            {{ $electricbill->rate ?? 'N/A' }}
                                        </td>
                                        <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                            {{ number_format($electricbill->amount, 2) ?? 'N/A' }}</td>
                                        <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                            @if ($totalElectricAmountpaid > 0)
                                                {{ number_format(($electricbill->amount / $totalElectricAmountpaid) * 100, 2) }}%
                                            @else
                                                0.00%
                                            @endif
                                        </td>
                                        <td class="px-4 py-2 text-sm text-gray-800 percentage-difference">N/A</td>
                                        <td class="px-4 py-2 text-sm text-gray-800 total-amount">N/A</td>
                                        <td class="px-4 py-2 text-sm text-gray-800 payable">N/A</td>
                                    </tr>
                                @endforeach
                            @empty
                                <tr>
                                    <td colspan="10" class="px-4 py-2 text-center text-gray-500">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">{{ $totalElectricAmountpaid }}</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>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </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 totalElectricAmount = @json($totalElectricAmount); // Pass the PHP variable to JavaScript

                const difference = currentBill - totalElectricAmount;
                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)') === null) 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);

                    // Round the payable to nearest integer but still display with two decimal places
                    const roundedPayable = Math.ceil(totalRowAmount);
                    payableCell.textContent = roundedPayable.toFixed(2); // Display with two decimals

                    // 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(0) + '%'; // Display as integer percentage

                // 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);
            }
        </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('/electric-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