@extends('admin.layout.main')
@section('title', 'Realtime Monitoring')
@section('content')
    <div class="container-fluid dashboard-content">
        <div class="row mb-0">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="page-header d-flex justify-content-between">
                    <h2 class="pageheader-title">Realtime Monitoring</h2>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#" class="breadcrumb-link">Dashboard</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Realtime Monitoring</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row mt-0">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="card shadow-sm">
                    <div class="card-body">

                        <form id="filterForm" class="">
                            <div class="row justify-content-between">
                                <div class="col-lg-3">
                                    <label for="id_device">PILIH DEVICE :</label>
                                    <select name="id_device" id="id_device" class="form-control">
                                        <option value="">-- Semua Device --</option>
                                    </select>
                                    <br>

                                </div>

                                <div class="col-lg-3">
                                    <label for="id_sensor">PILIH SENSOR :</label>
                                    <select name="id_sensor" id="id_sensor" class="form-control">
                                        <option value="">-- Semua Sensor --</option>
                                    </select>
                                    <br>

                                </div>
                                <div class="col-lg-3">
                                    <label for="date_range">PILIH RANGE TANGGAL :</label>
                                    <input type="text" id="date_range" name="date_range" class="form-control"
                                        placeholder="Pilih Tanggal & Waktu">
                                    <br>

                                </div>
                                <div class="col-lg-2">
                                    <br>
                                    <div class="row justify-content-end mr-1">
                                        {{-- <button type="submit" class="btn btn-primary mr-1">
                                            <i class="fa fa-search"></i> Cari
                                        </button> --}}
                                        <button type="button" onclick="resetFilter()"
                                            class="btn btn-secondary btn-sm d-flex align-items-center gap-2">
                                            Reset
                                        </button>
                                    </div>
                                </div>
                            </div>

                        </form>

                        <div class="table-responsive">
                            <table id="sensorTable" class="table table-striped table-bordered" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Device ID</th>
                                        <th>Sensor ID</th>
                                        <th>Nama Sensor</th>
                                        <th>Value</th>
                                        <th>Status</th>
                                        <th>Update at</th>
                                    </tr>
                                </thead>
                                <tbody id="sensorTableBody">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @push('scripts')
        <script>
            let sensorTable;

            async function loadDevices() {
                try {
                    const response = await fetch('/api/devices');
                    const result = await response.json();

                    const deviceSelect = document.getElementById('id_device');
                    deviceSelect.innerHTML = '<option value="">-- Semua Device --</option>';

                    if (result.success && result.data.length > 0) {
                        result.data.forEach(device => {
                            const option = document.createElement('option');
                            option.value = device.id_device;
                            option.textContent = `${device.name} (${device.id_device})`;
                            deviceSelect.appendChild(option);
                        });
                    }
                } catch (error) {
                    console.error("Gagal memuat daftar device:", error);
                }
            }

            async function loadSensors() {
                try {
                    const response = await fetch('/api/list-sensors');
                    const result = await response.json();

                    const sensorSelect = document.getElementById('id_sensor');
                    sensorSelect.innerHTML = '<option value="">-- Semua Sensor --</option>';

                    if (result.success && result.data.length > 0) {
                        result.data.forEach(sensor => {
                            const option = document.createElement('option');
                            option.value = sensor.id_sensor;
                            option.textContent = `${sensor.name} (${sensor.id_sensor})`;
                            sensorSelect.appendChild(option);
                        });
                    }
                } catch (error) {
                    console.error("Gagal memuat daftar sensor:", error);
                }
            }



            function initializeDataTable() {
                sensorTable = $('#sensorTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: '/api/sensor-values',
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        data: function(d) {
                            const form = document.getElementById('filterForm');
                            const formData = new FormData(form);

                            var dateRange = $('#date_range').val();
                            let [startDate, endDate] = ['', ''];
                            if (dateRange && dateRange.includes(' - ')) {
                                const parts = dateRange.split(' - ');
                                startDate = parts[0].trim();
                                endDate = parts[1].trim();
                            }

                            // d.id_device = formData.get('id_device');
                            // d.id_sensor = formData.get('id_sensor');

                            d.id_device = document.getElementById('id_device').value;
                            d.id_sensor = document.getElementById('id_sensor').value;

                            d.start_date = startDate;
                            d.end_date = endDate;
                            d.per_page = formData.get('per_page') || 10;
                        }
                    },
                    pageLength: 10,
                    columns: [{
                            data: null,
                            render: function(data, type, row, meta) {
                                return meta.row + meta.settings._iDisplayStart + 1;
                            }
                        },
                        {
                            data: 'id_device'
                        },
                        {
                            data: 'id_sensor'
                        },
                        {
                            data: 'sensor_name'
                        },
                        {
                            data: 'sensor_value',
                            render: function(data, type, row) {
                                const idSensor = row.id_sensor;
                                const isPercentage = ['S-MOIS', 'S-AIR1', 'S-AIR2'].includes(idSensor);
                                return isPercentage ? data + ' %' : data;
                            }
                        },
                        {
                            data: 'status'
                        },
                        {
                            data: 'created_at',
                            render: function(data, type, row) {
                                return data + ' WIB';
                            }
                        }
                    ],
                    columnDefs: [{
                        targets: 4, // Kolom Values
                        className: 'dt-body-center'
                    }],
                    language: {
                        paginate: {
                            previous: '&laquo;',
                            next: '&raquo;'
                        },
                        search: "Cari:",
                        lengthMenu: "_MENU_ data",
                        info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                        infoEmpty: "Tidak ada data tersedia",
                        loadingRecords: "Memuat...",
                        zeroRecords: "Tidak ada data ditemukan"
                    }
                });
            }

            function reloadDataTable() {
                if (sensorTable) {
                    sensorTable.ajax.reload();
                }
            }

            function resetFilter() {
                document.getElementById('filterForm').reset();
                reloadDataTable();
            }

            // Submit form filter
            document.getElementById('filterForm').addEventListener('submit', function(e) {
                e.preventDefault();
                reloadDataTable();
            });

            // Inisialisasi DataTables saat DOM siap
            $(document).ready(function() {
                loadDevices();
                loadSensors();
                initializeDataTable();

                document.getElementById('id_device').addEventListener('change', reloadDataTable);
                document.getElementById('id_sensor').addEventListener('change', reloadDataTable);

                $('#date_range').daterangepicker({
                    autoUpdateInput: true,
                    locale: {
                        cancelLabel: 'Clear',
                        format: 'DD/MM/YYYY HH:mm',
                        applyLabel: "Terapkan",
                        cancelLabel: "Batal",
                        fromLabel: "Dari",
                        toLabel: "Sampai",
                        customRangeLabel: "Tanggal Kustom",
                        daysOfWeek: ["Mg", "Sn", "Sl", "Rb", "Km", "Jm", "Sa"],
                        monthNames: [
                            "Januari", "Februari", "Maret", "April", "Mei", "Juni",
                            "Juli", "Agustus", "September", "Oktober", "November", "Desember"
                        ]
                    },
                    timePicker: true,
                    timePicker24Hour: true,
                    timePickerIncrement: 15,
                    drops: "auto"
                });

                $('#date_range').on('apply.daterangepicker', function(ev, picker) {
                    $(this).val(
                        picker.startDate.format('DD/MM/YYYY HH:mm') +
                        ' - ' +
                        picker.endDate.format('DD/MM/YYYY HH:mm')
                    );
                    reloadDataTable();
                });

                $('#date_range').on('cancel.daterangepicker', function(ev, picker) {
                    $(this).val('');
                    reloadDataTable();
                });
            });
        </script>
    @endpush
@endsection