@extends('_version_02.commons.layouts.admin')
@section('content')
@include('_version_02.commons.layouts.partials._alert')


@include('_version_02.utility_charges.layouts.partials._meter_css')
<section class="hk-sec-wrapper">
    <div class="table-responsive">
        <table id="leaf_data_table" class="table tablesaw table-bordered table-hover mb-0 w-100 pb-30" data-tablesaw-minimap data-tablesaw-mode-switch>
            <thead>
                <tr>
                    <th class="text-center">{{ App\Language::trans('Unit') }}</th>
                    <th class="text-center" width="100px;">{{ App\Language::trans('Actions') }}</th>
                </tr>
            </thead>
            <tbody>
                                @foreach($houses as $house)
                    <tr>
                        <td>
                            <div class="info-box-content">
                                <span class="info-box-number">
                                    <span class="label label-primary pull-left">
                                        {{ $house_counter }}.
                                    </span> &nbsp; {{ $house['house_unit'] }}
                                    <span class="badge badge-success pull-right">
                                        ID: {{ $house['id_house'] }}
                                    </span>
                                </span>
                            </div>
                        </td>
                        <td class="text-center">
                            <button 
                                class="btn btn-primary btn-sm show-details-btn" 
                                data-house-id="{{ $house['id_house'] }}">
                                <i class="fa fa-search" aria-hidden="true"></i>
                            </button>
                        </td>
                    </tr>
                    <!-- Accordion row -->
                    <tr class="details-row" id="details-row-{{ $house['id_house'] }}" style="display: none;">
                        <td colspan="2">
                            <div class="accordion" id="accordion-{{ $house['id_house'] }}">
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <img src="{{asset(App\Setting::LOADING_GIF)}}" alt=""/>
                                    </h2>
                                    <div id="collapse-{{ $house['id_house'] }}" class="accordion-collapse collapse">
                                        <div class="accordion-body">
                                            Loading details...
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @php $house_counter++; @endphp
                @endforeach
            </tbody>
        </table>
    </div>
</section>


 <input type="hidden" id="start" name="start" value="{{$start}}">
@endsection
@section('script')

    document.addEventListener('DOMContentLoaded', function () {
        const buttons = document.querySelectorAll('.show-details-btn');

        buttons.forEach(button => {
            button.addEventListener('click', function () {
                const houseId = this.dataset.houseId;
                const roomId = this.dataset.roomId; // Get the room ID from the button's data attribute
                const detailsRow = document.getElementById(`details-row-${houseId}`);
                const accordionBody = document.querySelector(`#collapse-${houseId} .accordion-body`);

                // Toggle details row visibility
                detailsRow.style.display = detailsRow.style.display === 'none' ? '' : 'none';

                // Fetch data only if the accordion is empty
                if (accordionBody.innerHTML.trim() === 'Loading details...') {
                    const url = `${getHouseMeterDataByHouseIdUrl}?house_id=${houseId}`;
                    console.log(url);
                    fetch(url)
                        .then(response => response.json())
                         .then(data => {
                         console.log(data);
                            if (data.status_code === true) {
                                const rooms = data.rooms;

                                rooms.forEach(room => {
                                console.log('Show room:');
                                   console.log(room);
                                    generateRoomHTML(room , data.house.id_house);
                                    
                                });
                            } else {
                                console.error("API call failed:", data.message);
                                // Optionally, show an error message in the UI
                            }
                        })
                        .catch(error => {
                            console.error('Error fetching house details:', error);
                            accordionBody.innerHTML = '<p class="text-danger">Failed to load details.</p>';
                        });
                }
            });
        });
    });

   // JavaScript Function
// JavaScript Function
function generateRoomHTML(room, id_house) {
    console.log('Render room HTML');
    console.log(room);
    console.log(room.meter);
    const meter = room.meter;
    const container = document.getElementById('accordion-' + id_house);
    const isRemoteReady = room?.meter?.is_remote_ready || false;
     const isRemoteLive = room?.meter?.is_remote_ready || false;

    const roomHTML = `
        <div>
            <button onclick="toggleRoomPanel(${room.id_house_room});" id="room-button-${room.id_house_room}" 
                class="badge badge-soft-${room.meter ? 'success' : 'danger'} badge-outline pull-right box-success accordion mb-1" 
                style="${room.meter ? 
                    'background-image: linear-gradient(to right, rgba(140,207,127,0), rgba(140,207,127,0.7))' :
                    'background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,0.7))'}; height:75px;">
                
                <span class="label label-primary pull-left">${room.counter}.</span> &nbsp; Room ${room.house_room_name}
                <span class="badge badge-${room.house_room_members && room.house_room_members.length > 0 ? 'success' : 'danger'} mr-1 pull-right">
                    ${room.house_room_members && room.house_room_members.length > 0 ? "Tenanted" : "Empty"}
                </span>
                <span class="badge badge-${isRemoteReady ? 'success' : 'danger'} mr-1 pull-right">
                    ${isRemoteReady ? '<i class="fa fa-check" aria-hidden="true"></i>' : '<i class="fas fa-times"></i>'} Remote Control
                </span>
                <span class="badge badge-success mr-1 pull-right">${room.house_room_type}</span>
                <span class="badge badge-success mr-1 pull-right">Id: ${room.id_house_room}</span>
            </button>

            <!-- Room Detail Panel -->
            <div id="panel-${room.id_house_room}" style="display: none; padding: 10px; border: 1px solid #ccc; margin-top: 10px; border-radius: 5px;">
                <hr>
                <div class="row">
                    <div class="col-md-6">
                        <div class="box box-success box-solid">
                            <div class="hk-pg-header">
                                <h4 class="hk-pg-title">
                                    <span class="pg-title-icon">
                                        <span class="feather-icon"><i data-feather="toggle-right"></i></span>
                                    </span>
                                    Tenant Detail
                                </h4>
                            </div>
                            <div class="box-body">
                                <table class="table table-hover">
                                    <tr class="table-light">
                                        <th style="width: 10px">#</th>
                                        <th>Name</th>
                                        <th>Check In Date</th>
                                        <th>Total Consumption (kwh)</th>
                                    </tr>
                                    ${room.house_room_members && room.house_room_members.length > 0 ? 
                                        room.house_room_members.map((member, i) => `
                                            <tr>
                                                <td><span class="label label-primary pull-left">${i + 1}</span></td>
                                                <td>${member.house_member_name}</td>
                                                <td>${member.house_room_member_start_date}</td>
                                                <td><label id="lbl_${member.house_member_id_user}_total_usage_${room.id_house_room}">
                                                    <img src="/path-to/loading.gif" alt=""/>
                                                </label></td>
                                            </tr>
                                        `).join('') 
                                        : 
                                        `<tr><td colspan="4">No tenants found</td></tr>`
                                    }
                                </table>
                            </div>
                        </div>

                        <div class="box box-success box-solid">
                            <div class="hk-pg-header">
                                <h4 class="hk-pg-title">
                                    <span class="pg-title-icon">
                                        <span class="feather-icon"><i data-feather="toggle-right"></i></span>
                                    </span>
                                    Reading Monitoring
                                </h4>
                            </div>
                            <div class="box-body">
                                <table class="table table-hover">
                                    <tr class="table-light">
                                        <th style="width: 10px">#</th>
                                        <th>Item</th>
                                        <th></th>
                                    </tr>
                                    <tr>
                                        <td><span class="label label-primary pull-left">1</span></td>
                                        <td>Last Reading At</td>
                                        <td><label id="lbl_last_reading_at_${room.id_house_room}">
                                            <img src="/path-to/loading.gif" alt=""/>
                                        </label></td>
                                    </tr>
                                    <tr>
                                        <td><span class="label label-primary pull-left">2</span></td>
                                        <td>Last Current Reading</td>
                                        <td><label id="lbl_last_reading_${room.id_house_room}">
                                            <img src="/path-to/loading.gif" alt=""/>
                                        </label></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        ${meter.id ? `
                            <div class="box box-success box-solid">
                                <div class="hk-pg-header">
                                    <h4 class="hk-pg-title">
                                        <span class="pg-title-icon">
                                            <span class="feather-icon"><i data-feather="toggle-right"></i></span>
                                        </span>
                                        Meter Register Detail
                                    </h4>
                                </div>
                                <div class="box-body">
                                    <table class="table table-hover">
                                        <tr>
                                            <td>Meter ID</td>
                                            <td>${room.meter.id}</td>
                                        </tr>
                                        <tr>
                                            <td>IP</td>
                                            <td><input type="text" class="form-control" value="${room.meter.ip_address || ''}" /></td>
                                        </tr>
                                        <tr>
                                            <td>Contact No</td>
                                            <td><input type="text" class="form-control" value="${room.meter.contract_no || ''}" /></td>
                                        </tr>
                                        <tr>
                                            <td>Created At</td>
                                            <td>${room.meter.created_at}</td>
                                        </tr>
                                        <tr>
                                            <td>Updated At</td>
                                            <td>${room.meter.updated_at}</td>
                                        </tr>

                                         <tr>
                                                <td><span class="label label-primary pull-left">6</span></td>
                                                <td>Power Supply And Power Meter</td>
                                                <input type="hidden" id="meter_id_${room.id_house_room}" name="meter_id_${room.id_house_room}" value="${meter.id}">
                                                <input type="hidden" id="meter_switch_status_${room.id_house_room}" name="meter_switch_status_${room.id_house_room}" value="${meter.is_power_supply_on}">
                                                <td>
                                                    ${isRemoteLive ? 
                                                        `<div onclick="change_switch_status(${room.id_house_room});" class="toggle toggle-light toggle-bg-green toggle3" id="meter_switch_${room.id_house_room}"></div>` 
                                                        : 
                                                        `<small class="badge badge-${(meter.is_power_supply_on ? 'success' : 'danger')} mt-15 mr-10">${(meter.is_power_supply_on ? 'On' : 'Off')}</small><br>
                                                        ${isConfigured === false ? 
                                                            `<small class="badge badge-danger mt-15 mr-10">Remote control is not yet configured.</small>` : ''}
                                                        `
                                                    }
                                                    ${isRemoteReady === false && meter.id ? 
                                                        (meter.remote_status_comment ? 
                                                            `<small class="badge badge-info mt-15 mr-10">${meter.remote_status_comment}</small>` : '') 
                                                        : ''}
                                                </td>
                                            </tr>
                                    </table>
                                </div>
                            </div>
                        ` : `
                            <div class="box box-success box-solid">
                                <div class="hk-pg-header">
                                    <h4 class="hk-pg-title">No Meter Found</h4>
                                </div>
                                <div class="box-body">
                                    <a href="/path-to/register-meter/${room.id_house_room}" class="btn btn-primary">Register New Meter</a>
                                </div>
                            </div>
                        `}
                    </div>
                </div>
            </div>
        </div>
    `;

    container.insertAdjacentHTML('beforeend', roomHTML);
}


function toggleRoomPanel(roomId) {
    const panel = document.getElementById(`panel-${roomId}`);
    panel.style.display = panel.style.display === 'none' || panel.style.display === '' ? 'block' : 'none';
    get_meter_reading_detail(roomId);
}



$(document).ready(function(){
   
  
});



@endsection