@extends('users.layouts.index')

@section('content')
    <h2 class="text-xl text-gray-500 font-semibold ml-4 mb-2">Meter Reading</h2>
    <div class="bg-white p-4 rounded-lg shadow-bottom-only border-t-2">
        <!-- Meter Readings Content -->
        <div id="meter-readings-content">
            <p class="text-center py-4">Please select a meter from the dropdown above.</p>
        </div>
        
       
    </div>

    <script>
        $(document).ready(function() {
            let table = null;

            // Handle meter selection change - fetch meter readings
            $('#accountDropdown').on('change', function() {
                const meterNumber = $(this).val();
                if (meterNumber) {
                    fetchMeterData(meterNumber);
                } else {
                    $('#meter-readings-content').html('<p class="text-center py-4">Please select a meter from the dropdown above.</p>');
                    if (table) {
                        table.destroy();
                        table = null;
                    }
                }
            });

            // Fetch meter reading data
            function fetchMeterData(meterNumber) {
                $('#meter-readings-content').html('<p class="text-center py-4">Loading meter data...</p>');
                
                $.ajax({
                    url: '/user/get-meter-readings', // Ensure this matches the controller endpoint
                    method: 'GET',
                    data: { meter_number: meterNumber },
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    success: function(response) {
                        let content = '';
             

            // ✅ If SMART METER
            if (response.success && response.is_smart) {
                const tokens = response.tokens || [];
                
                if (tokens.length > 0) {
                    content = `
                        <h4 class="mb-3">Tokens for Smart Meter: ${meterNumber}</h4>
                        <div class="overflow-x-auto">
                            <table class="table table-bordered table-striped w-full">
                                <thead>
                                    <tr>
                                        <th>Token</th>
                                        <th>Water Units (Liters)</th>
                                        <th>Total Paid (KES)</th>
                                        <th>Generated</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    ${tokens.map(token => `
                                        <tr>
                                            <td>${token.token || 'N/A'}</td>
                                            <td>${number_format(token.total_unit || 0, 2)}</td>
                                            <td>${number_format(token.total_paid || 0, 2)}</td>
                                            <td>${formatDateTime(token.gen_datetime) || 'N/A'}</td>
                                        </tr>
                                    `).join('')}
                                </tbody>
                            </table>
                        </div>
                    `;
                } else {
                    content = `<p class="text-center py-4">No tokens found for this smart meter.</p>`;
                }
            } 
            // ✅ If TRADITIONAL METER
            else if (response.success && response.readings && response.readings.length > 0) {
                content = `
                    <h4 class="mb-3">Meter Readings for: ${meterNumber}</h4>
                    <div class="overflow-x-auto">
                        <table id="meterReadingTable" class="display w-full">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Units</th>
                                    <th>Current Reading</th>
                                    <th>Previous Reading</th>
                                    <th>Date Recorded</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${response.readings.map(reading => `
                                    <tr class="border-b">
                                        <td class="py-4 text-center">${reading.id || 'N/A'}</td>
                                        <td class="text-center">${reading.units || 0}</td>
                                        <td class="text-center">${number_format(reading.current_reading || 0, 2)}</td>
                                        <td class="text-center">${number_format(reading.previous_reading || 0, 2)}</td>
                                        <td class="text-center">${formatDate(reading.created_at)}</td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>
                `;
            } 
            // ✅ If neither
            else {
                content = `<p class="text-center py-4">No meter data found for this meter.</p>`;
            }

                        
                        $('#meter-readings-content').html(content).hide().fadeIn();
                        
                        if (table) {
                            table.destroy();
                            table = null;
                        }
                        
                        if (!response.is_smart && response.readings && response.readings.length) {
                            table = $('#meterReadingTable').DataTable({
                                paging: false,
                                searching: false,
                                ordering: false,
                                info: false
                            });
                        }

                        // Handle tab clicks for smart meters
                        $('#meterTabs a').on('click', function(e) {
                            e.preventDefault();
                            $(this).tab('show');
                        });

                        // Handle data type change for smart meters
                        $('#data_type').on('change', function() {
                            const dataType = $(this).val();
                            if (dataType === 'monthly') {
                                $('#day-field').hide();
                                $('#date-fields').show();
                            } else {
                                $('#day-field').show();
                                $('#date-fields').show();
                            }
                        });

                        // Handle usage data form submission for smart meters
                        $('#usage-data-form').on('submit', function(e) {
                            e.preventDefault();
                            const dataType = $('#data_type').val();
                            const payload = { 
                                meter_number: meterNumber, 
                                year: $('#year').val(), 
                                month: $('#month').val(), 
                                day: $('#day').val() || null 
                            };
                            
                            if (dataType === 'monthly') {
                                delete payload.day;
                            } else if (!payload.day) {
                                alert('Please select a day for daily/hourly data.');
                                return;
                            }
                            
                            $('#usage-result').html('<p>Loading usage data...</p>');
                            
                            $.ajax({
                                url: '/proxy/' + dataType + '-data', // Placeholder endpoint
                                method: 'POST',
                                data: JSON.stringify(payload),
                                contentType: 'application/json',
                                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                                success: function(response) {
                                    if (response.ResultCode === '00') {
                                        const result = response.Result[0];
                                        $('#usage-result').html(`
                                            <h4>Usage Data for ${meterNumber}</h4>
                                            <ul class="list-unstyled">
                                                <li><strong>Meter Number:</strong> ${result.MeterNo || 'N/A'}</li>
                                                <li><strong>Year:</strong> ${result.Year || 'N/A'}</li>
                                                <li><strong>Month:</strong> ${('0' + result.Month).slice(-2) || 'N/A'}</li>
                                                ${dataType !== 'monthly' ? '<li><strong>Day:</strong> ' + ('0' + result.Day).slice(-2) + '</li>' : ''}
                                                <li><strong>Total Units Counter:</strong> ${result.TotalUnitsCounter || 'N/A'}</li>
                                                <li><strong>Current Credit Register:</strong> ${result.CurrentCreditRegister || 'N/A'}</li>
                                                ${dataType !== 'monthly' ? '<li><strong>Relay Status:</strong> ' + (result.RelayStatus || 'N/A') + '</li>' : ''}
                                                ${dataType.includes('hourly') && result.HourlyData ? '<li><strong>Hourly Data:</strong> ' + result.HourlyData.join(', ') + '</li>' : ''}
                                            </ul>
                                        `);
                                    } else {
                                        $('#usage-result').html('<p class="text-danger">Error: ' + (response.Reason || 'No data available') + '</p>');
                                    }
                                },
                                error: function(xhr) {
                                    $('#usage-result').html('<p class="text-danger">Error fetching usage data. Please try again.</p>');
                                    console.error('Usage data error:', xhr.responseText);
                                }
                            });
                        });
                    },
                    error: function(xhr) {
                        console.error('AJAX Error fetching meter data:', xhr.responseText);
                        let errorMessage = 'Error loading meter data.';
                        try {
                            const response = JSON.parse(xhr.responseText);
                            errorMessage = response.message || response.error || errorMessage;
                        } catch (e) {}
                        $('#meter-readings-content').html(`<p class="text-center py-4 text-red-600">${errorMessage}</p>`);
                    }
                });
            }

            // Helper functions
            function number_format(number, decimals) {
                if (number === null || number === undefined) return '0.00';
                return parseFloat(number).toLocaleString('en-US', { 
                    minimumFractionDigits: decimals, 
                    maximumFractionDigits: decimals 
                });
            }
            
            function formatDate(dateString) {
                if (!dateString) return 'N/A';
                try {
                    return new Date(dateString).toLocaleString('en-US', { 
                        month: 'long', 
                        day: 'numeric', 
                        year: 'numeric' 
                    });
                } catch (e) {
                    return 'N/A';
                }
            }
            
            function formatDateTime(dateString) {
                if (!dateString) return 'N/A';
                try {
                    return new Date(dateString).toLocaleString();
                } catch (e) {
                    return 'N/A';
                }
            }

            // On page load, if there's a preselected meter, fetch its data
            const preselectedMeter = $('#accountDropdown').val();
            if (preselectedMeter) {
                fetchMeterData(preselectedMeter);
            }
        });
    </script>
@endsection