@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="power_meter_table" class="table tablesaw table-bordered table-hover mb-0 w-100 pb-30">
            <thead>
                <tr>
                    <th class="text-center">#</th>
                    <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)
                    <!-- Main row -->
                    <tr>
                        <td style="width: 10px;"> {{$house_counter}}</td>
                        <td>
                            <div class="info-box-content">
                                <span class="info-box-number">
                                    <span class="label label-primary pull-left">
                                      
                                    </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>

            
                    @php $house_counter++; @endphp
                @endforeach
            </tbody>
        </table>
    </div>
</section>


<!-- Modal for displaying house room details -->
<div class="modal fade" id="roomDetailsModal" tabindex="-1" aria-labelledby="roomDetailsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="roomDetailsModalLabel">Units Info</h5>
      </div>
      <div class="modal-body">
        <section class="hk-sec-wrapper">
            <div class="table-responsive">
                <table id="room-details-table" class="table tablesaw table-bordered table-hover mb-0 w-100 pb-30">
                    <thead>
                        <tr>
                            <th class="text-center" style='width:150px;'>{{ App\Language::trans('Rooms') }}</th>
                            <th class="text-center">{{ App\Language::trans('Power Supply') }}</th>
                            <th class="text-center" width="100px;">{{ App\Language::trans('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Dynamically generated rows will be inserted here -->
                    </tbody>
                </table>
            </div>
        </section>
      </div>
      <!-- Custom Close Button Below -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>



@endsection
@section('script')


// Function to generate room HTML and append it to the modal content
function generateHiddenInputs(meter, room) {
    //console.log(meter);
    //console.log('Power supply: ' + meter.is_power_supply_on);

    return `
        <input type="hidden" name="ip_address" id="ip_address" value="${meter.ip_address !== undefined ? meter.ip_address : ''}"/>
        <input type="hidden" name="contract_no" id="contract_no" value="${meter.contract_no !== undefined ? meter.contract_no : ''}"/>
        <input type="hidden" id="meter_id_${room.id_house_room}" value="${meter.id !== undefined ? meter.id : ''}"/>
        <input type="hidden" id="meter_switch_status_${room.id_house_room}" value="${meter.is_power_supply_on !== undefined ? meter.is_power_supply_on : ''}"/>
    `;
}


function generateRoomHTML(room, id_house) {
    console.log('Render room HTML', room);

    const tableBody = document.querySelector('#room-details-table tbody');
    if (!tableBody) {
        console.error('Table body not found for id_house:', id_house);
        return;
    }

    const meter = room.meter || {};
    const isRemoteReady = meter.is_remote_ready || false;
    const isRemoteLive = meter.is_remote_live || false;
    const isConfigured = true; // Assuming remote control is always configured for this example

    const hiddenInputsHTML = generateHiddenInputs(meter, room);

    const roomRowHTML = `
        <tr>
            <td class="text-center">
                <span class="label label-primary">Room ${room.house_room_name}</span>
            </td>

            <td class="text-center">
                ${meter.id ? `
                    <form method="GET" class="form-horizontal" id="meter_data_${meter.id}">
                        ${hiddenInputsHTML}
                        <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>
                        ${!isConfigured ? `<small class="badge badge-danger mt-15 mr-10">Remote control is not yet configured.</small>` : ''}
                    </form>
                ` : `
                    <div class="box-body">
                        <a href="${'{{ action("UMeterRegistersController@getNew") }}'}/${room}" class="btn btn-primary" style="font-size:10px;">No power tag, setup now.</a>
                    </div>
                `}
            </td>

            <td class="text-center">
                <button onclick="update_meter_register_on_off(${meter.id});" class="btn btn-primary btn-sm">
                    <span style="font-size:10px;">Save</span>
                </button>
            </td>
        </tr>
    `;

    tableBody.insertAdjacentHTML('beforeend', roomRowHTML);
}




document.addEventListener('DOMContentLoaded', function () {
    const buttons = document.querySelectorAll('.show-details-btn');
    
    buttons.forEach(button => {
        button.addEventListener('click', function () {
            const houseId = this.dataset.houseId;
            const modal = new bootstrap.Modal(document.getElementById('roomDetailsModal'));
            const tableBody = document.querySelector('#room-details-table tbody');
            tableBody.innerHTML = '<tr><td colspan="2" class="text-center">Loading details...</td></tr>';  // Loading state

            // Fetch room data and update modal table
            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;

                        // Clear previous content
                        tableBody.innerHTML = '';

                        rooms.forEach(room => {
                            console.log('Show room:', room);

                            // Generate the room HTML and insert into the table
                            generateRoomHTML(room, data.house.id_house);
                            activate_swith(room.id_house_room);
                        });

                        // Show the modal
                        modal.show();
                    } else {
                        console.error("API call failed:", data.message);
                        tableBody.innerHTML = '<tr><td colspan="2" class="text-center text-danger">Failed to load details.</td></tr>';
                    }
                })
                .catch(error => {
                    console.error('Error fetching house details:', error);
                    tableBody.innerHTML = '<tr><td colspan="2" class="text-center text-danger">Failed to load details.</td></tr>';
                });
        });
    });
});



function activate_swith(room_id)
{
     switch_status = $('#meter_switch_status_'+room_id).val() == 0 ||  $('#meter_switch_status_'+room_id).val() == false ? false : true;
      $('#meter_switch_'+room_id).toggles({
            drag: true, // allow dragging the toggle between positions
            click: true, // allow clicking on the toggle
            text: {
            on: 'ON', // text for the ON position
            off: 'OFF' // and off
            },
            on: switch_status, // is the toggle ON on init
            animate: 250, // animation time (ms)
            easing: 'swing', // animation transition easing function
            checkbox: null, // the checkbox to toggle (for use in forms)
            clicker: null, // element that can be clicked on to toggle. removes binding from the toggle itself (use nesting)
            
            type: 'select' // if this is set to 'select' then the select style toggle will be used
    });
    console.log('Activate switch : ' + room_id);
}



function toggleHouse(houseId) {
    const panel = document.getElementById(`accordion-${houseId}`);
    if (!panel) {
        console.error(`Panel with id panel-${houseId} not found.`);
        return;
    }

    const isPanelOpen = panel.style.display === 'block';

    if (isPanelOpen) {
        // If the panel is open, hide it and remove dynamically generated content
        panel.style.display = 'none';

        // Remove dynamically generated elements
        const generatedElements = panel.querySelectorAll('[id^="room-button-"], [id^="meter_switch_"], [id^="meter_id_"], [id^="meter_switch_status_"]');
        generatedElements.forEach(element => {
            element.remove();
        });

        console.log(`Closed panel and removed dynamically generated elements for houseId: ${houseId}`);
    } else {
        // If the panel is closed, show it
        panel.style.display = 'block';

        console.log(`Opened panel for houseId: ${houseId}`);
    }
}

document.addEventListener('DOMContentLoaded', function () {
  const closeButton = document.querySelector('[data-bs-dismiss="modal"]');
  closeButton.addEventListener('click', function () {
    const modal = document.getElementById('roomDetailsModal');
    modal.classList.remove('show');
    modal.setAttribute('aria-hidden', 'true');
    modal.style.display = 'none';

    // Reset the body's padding to avoid screen content shifting
    document.body.classList.remove('modal-open');
    document.body.style.paddingRight = '';

    // Remove the modal backdrop
    const backdrop = document.querySelector('.modal-backdrop');
    if (backdrop) backdrop.remove();
  });
});

$(document).ready(function () {
    // Initialize DataTable on page load
    var table = $('#power_meter_table').DataTable({
        "order": [[0, 'asc']], // Order by the first column
        "paging": true, // Enable pagination
        "pageLength": 50, // Set the default number of rows per page
        "searching": true, // Enable search functionality
        "ordering": true, // Enable column ordering
        "info": true, // Display table information (e.g., showing 1 to 10 of 100 entries)
        "autoWidth": false, // Disable auto-width for columns
        "fixedHeader": true, // Keep the table header fixed on scroll
        "bProcessing": true, // Enable processing indicator during AJAX load
        "lengthChange": false, // Disable "Show entries" dropdown
    });


    // Handle show-details button click to toggle details row
    $('.show-details-btn').on('click', function () {
        const houseId = $(this).data('house-id');
        const detailsRow = $(`#details-row-${houseId}`);
        const accordionBody = $(`#collapse-${houseId} .accordion-body`);

        // Toggle the details row visibility
        detailsRow.toggle();

        // Fetch data only if the accordion is empty
        if (accordionBody.text().trim() === 'Loading details...') {
            const url = `${getHouseMeterDataByHouseIdUrl}?house_id=${houseId}`;

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (data.status_code) {
                        accordionBody.empty(); // Clear the loading message
                        const rooms = data.rooms;

                        rooms.forEach(room => {
                            const roomHtml = `
                                <div>
                                    <p>Room ID: ${room.id_house_room}</p>
                                    <p>Details: ${room.details}</p>
                                </div>`;
                            accordionBody.append(roomHtml);
                        });

                        // Remove the loading image after loading content
                        detailsRow.find('img').remove();

                        // Redraw the DataTable to handle dynamic rows
                        table.draw();
                    } else {
                        console.error('Error:', data.message);
                        accordionBody.html('<p class="text-danger">Failed to load details.</p>');
                    }
                })
                .catch(error => {
                    console.error('Error fetching house details:', error);
                    accordionBody.html('<p class="text-danger">Failed to load details.</p>');
                });
        }
    });

    // Optional: Redraw DataTable if dynamic content is added after initialization
    $(window).on('resize', function () {
        table.columns.adjust().responsive.recalc();
    });
});

function update_meter_register_on_off(element_id)
{
   console.log('Initiate update :' + element_id);
  //$("#" +element_id+ ").removeAttr("selected");
  init_loading_overlay();
  var formElements = new Array();
  $("#meter_data_" + element_id +" :input").each(function(){
      /*var key = $(this).attr('id') +'';
      var temp = { key : $(this).val() };
      formElements.push(temp);*/


      formElements.push($(this).val());
  });
  console.log('Load data :');
console.log(formElements);

const encodedInput = encodeURIComponent(JSON.stringify(formElements));

$.get(getUpdateMeterRegisterReviseUrl, { input: encodedInput}, function(data) {
    console.log('Return update:');
      console.log(data);
          if(data['status_code'] == true){
            alert(data['status_msg']);
            //$('#meter_update_msg_' + $data['leaf_room_id'])
          }
           init_hide_loading_overlay();
    }, "json");

  
}


@endsection