@extends('layouts.app')

@section('title', 'Dashboard Monitoring Pemancar')

@section('page_header')
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
    <div>
        <h4 class="mb-0 fw-bold text-dark d-flex align-items-center gap-2">
            <i class="fa-solid fa-gauge-high text-primary"></i> Pusat Kontrol & Monitoring Pemancar
        </h4>
        <small class="text-muted">Status siaran langsung, pembacaan parameter telemetri, dan log jaga harian</small>
    </div>
    <div class="d-flex gap-2">
        <button type="button" class="btn btn-primary d-flex align-items-center gap-2 shadow-sm" data-bs-toggle="modal" data-bs-target="#quickLogModal">
            <i class="fa-solid fa-plus-circle"></i> <span>Input Log Shift Baru</span>
        </button>
        <a href="{{ route('logs.index') }}" class="btn btn-outline-secondary">
            <i class="fa-solid fa-table-list me-1"></i> Buka Logbook
        </a>
    </div>
</div>
@endsection

@section('content')
<!-- Active Incident / Off-Air Alert (if any) -->
@if($activeIncidents->count() > 0)
<div class="alert alert-danger border-danger shadow-sm d-flex align-items-center justify-content-between p-3 mb-4">
    <div class="d-flex align-items-center gap-3">
        <i class="fa-solid fa-triangle-exclamation fa-2x text-danger animate-pulse"></i>
        <div>
            <h6 class="alert-heading fw-bold mb-1">PERINGATAN GANGGUAN / SIARAN OFF-AIR AKTIF!</h6>
            <div class="small">
                Terdapat <strong>{{ $activeIncidents->count() }}</strong> insiden siaran belum selesai:
                @foreach($activeIncidents as $inc)
                    <span class="badge bg-danger ms-1 font-mono">[{{ $inc->transmitter->name }} - {{ $inc->category }} (Off: {{ $inc->off_air_at->format('H:i') }} WIB)]</span>
                @endforeach
            </div>
        </div>
    </div>
    <a href="{{ route('incidents.index') }}" class="btn btn-danger btn-sm">Lihat Detail Gangguan</a>
</div>
@endif

<!-- Top KPI Metric Counters -->
<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="card card-engineering h-100 mb-0">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <div class="text-muted small fw-semibold text-uppercase">PEMANCAR AKTIF</div>
                        <div class="fs-3 fw-bold text-dark font-mono mt-1">
                            {{ $transmitters->where('status', 'active')->count() }} <span class="fs-6 text-muted fw-normal">/ {{ $transmitters->count() }}</span>
                        </div>
                    </div>
                    <div class="p-2 bg-success bg-opacity-10 text-success rounded">
                        <i class="fa-solid fa-tower-broadcast fa-lg"></i>
                    </div>
                </div>
                <div class="small text-muted mt-2">
                    <span class="live-dot me-1"></span> Semua sistem on-air normal
                </div>
            </div>
        </div>
    </div>

    <div class="col-6 col-lg-3">
        <div class="card card-engineering h-100 mb-0">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <div class="text-muted small fw-semibold text-uppercase">LOG HARI INI</div>
                        <div class="fs-3 fw-bold text-dark font-mono mt-1">
                            {{ $totalLogsToday }} <span class="fs-6 text-muted fw-normal">entri</span>
                        </div>
                    </div>
                    <div class="p-2 bg-primary bg-opacity-10 text-primary rounded">
                        <i class="fa-solid fa-clipboard-check fa-lg"></i>
                    </div>
                </div>
                <div class="small text-muted mt-2">
                    <i class="fa-solid fa-clock me-1"></i> Shift Pagi, Siang & Malam
                </div>
            </div>
        </div>
    </div>

    <div class="col-6 col-lg-3">
        <div class="card card-engineering h-100 mb-0">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <div class="text-muted small fw-semibold text-uppercase">STATUS GANGGUAN</div>
                        <div class="fs-3 fw-bold font-mono mt-1 {{ $activeIncidents->count() > 0 ? 'text-danger' : 'text-success' }}">
                            {{ $activeIncidents->count() }} <span class="fs-6 text-muted fw-normal">kasus aktif</span>
                        </div>
                    </div>
                    <div class="p-2 {{ $activeIncidents->count() > 0 ? 'bg-danger text-danger' : 'bg-success text-success' }} bg-opacity-10 rounded">
                        <i class="fa-solid fa-triangle-exclamation fa-lg"></i>
                    </div>
                </div>
                <div class="small text-muted mt-2">
                    <i class="fa-solid fa-shield-halved me-1"></i> {{ $activeIncidents->count() > 0 ? 'Perlu tindakan teknisi' : 'Transmisi bersih/normal' }}
                </div>
            </div>
        </div>
    </div>

    <div class="col-6 col-lg-3">
        <div class="card card-engineering h-100 mb-0">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <div class="text-muted small fw-semibold text-uppercase">TOTAL STANDBY</div>
                        <div class="fs-3 fw-bold text-dark font-mono mt-1">
                            {{ $transmitters->where('status', 'standby')->count() }} <span class="fs-6 text-muted fw-normal">unit TX</span>
                        </div>
                    </div>
                    <div class="p-2 bg-secondary bg-opacity-10 text-secondary rounded">
                        <i class="fa-solid fa-server fa-lg"></i>
                    </div>
                </div>
                <div class="small text-muted mt-2">
                    <i class="fa-solid fa-circle-check text-success me-1"></i> Siap dialihkan (backup)
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Telemetry Cards for Each Transmitter -->
<h5 class="fw-bold text-dark mb-3"><i class="fa-solid fa-bolt me-2 text-warning"></i> Telemetri Pemancar Terkini</h5>

<div class="row g-3 mb-4">
    @foreach($transmitters as $tx)
    @php
        $latest = $tx->latestLog;
        $statusBadge = match($tx->status) {
            'active' => '<span class="badge bg-success"><span class="live-dot me-1"></span>ON AIR</span>',
            'standby' => '<span class="badge bg-warning text-dark"><i class="fa-solid fa-pause me-1"></i>STANDBY</span>',
            'maintenance' => '<span class="badge bg-info text-dark"><i class="fa-solid fa-wrench me-1"></i>MAINTENANCE</span>',
            default => '<span class="badge bg-danger"><i class="fa-solid fa-power-off me-1"></i>OFF AIR</span>',
        };
    @endphp
    <div class="col-12 col-md-6 col-xl-4">
        <div class="card card-engineering h-100 mb-0">
            <div class="card-header">
                <div>
                    <span class="badge bg-secondary me-1 font-mono">{{ $tx->type }}</span>
                    <strong class="text-dark">{{ $tx->name }}</strong>
                    <div class="small font-mono text-primary fw-semibold">{{ $tx->frequency }} | Target: {{ $tx->formatted_power }}</div>
                </div>
                <div>
                    {!! $statusBadge !!}
                </div>
            </div>

            <div class="card-body p-3">
                @if($latest)
                <!-- Metric Dials Grid -->
                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <div class="metric-box">
                            <div class="metric-label">FORWARD POWER</div>
                            <div class="metric-val text-primary">
                                {{ number_format($latest->forward_power, 0) }}<span class="metric-unit">Watt</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="metric-box">
                            <div class="metric-label">REFLECTED (PREFL)</div>
                            <div class="metric-val text-secondary">
                                {{ number_format($latest->reflected_power, 1) }}<span class="metric-unit">Watt</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="metric-box">
                            <div class="metric-label">VSWR ANTENNA</div>
                            <div class="metric-val {{ $latest->vswr > 1.3 ? 'text-danger' : 'text-success' }}">
                                {{ number_format($latest->vswr, 2) }}
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="metric-box">
                            <div class="metric-label">SUHU MODUL PA</div>
                            <div class="metric-val {{ $latest->temperature_pa > 60 ? 'text-danger' : 'text-dark' }}">
                                {{ $latest->temperature_pa ?? '-' }}<span class="metric-unit">°C</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="small text-muted d-flex justify-content-between border-top pt-2">
                    <div>
                        <i class="fa-solid fa-user me-1"></i> {{ $latest->user->name }}
                        <span class="badge bg-light text-dark border ms-1 font-mono">{{ $latest->shift }}</span>
                    </div>
                    <div class="font-mono">
                        {{ $latest->recorded_at->format('d/m H:i') }} WIB
                    </div>
                </div>
                @else
                <div class="text-center py-4 text-muted">
                    <i class="fa-solid fa-triangle-exclamation text-warning mb-2 fa-2x"></i>
                    <p class="small mb-0">Belum ada pencatatan parameter untuk pemancar ini.</p>
                </div>
                @endif
            </div>

            <div class="card-footer bg-light px-3 py-2 d-flex justify-content-between align-items-center">
                <small class="text-muted font-mono"><i class="fa-solid fa-location-dot me-1"></i>{{ $tx->site_location ?? 'TX Site' }}</small>
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-outline-primary btn-sm quick-log-btn" data-tx-id="{{ $tx->id }}" data-tx-name="{{ $tx->name }}" data-tx-power="{{ $tx->nominal_power }}">
                        <i class="fa-solid fa-pen-to-square me-1"></i> Catat
                    </button>
                    <a href="{{ route('transmitters.show', $tx->id) }}" class="btn btn-outline-secondary btn-sm">
                        <i class="fa-solid fa-chart-line me-1"></i> Riwayat
                    </a>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

<!-- Chart & Recent Activity -->
<div class="row g-4">
    <!-- Telemetry Trend Chart -->
    <div class="col-12 col-xl-7">
        <div class="card card-engineering h-100">
            <div class="card-header flex-wrap gap-2 py-2">
                <div class="d-flex align-items-center gap-2">
                    <i class="fa-solid fa-chart-line text-primary fs-5"></i>
                    <div>
                        <strong class="text-dark">Grafik Telemetri Pemancar</strong>
                        <div class="small text-muted font-mono" id="chartTxSubinfo">{{ $mainTx ? $mainTx->name . ' (' . $mainTx->frequency . ')' : 'Pilih Pemancar' }}</div>
                    </div>
                </div>

                <!-- Selectors in Header -->
                <div class="d-flex align-items-center gap-2">
                    <select id="chartTxSelect" class="form-select form-select-sm font-mono" style="min-width: 175px;">
                        @foreach($transmitters as $t)
                            <option value="{{ $t->id }}" {{ ($mainTx && $mainTx->id == $t->id) ? 'selected' : '' }}>
                                [{{ $t->type }}] {{ $t->code }} ({{ $t->frequency }})
                            </option>
                        @endforeach
                    </select>

                    <select id="chartDaysSelect" class="form-select form-select-sm font-mono" style="width: 105px;">
                        <option value="7" selected>7 Hari</option>
                        <option value="14">14 Hari</option>
                        <option value="30">30 Hari</option>
                    </select>
                </div>
            </div>

            <!-- Metric Mode Tabs & Quick Stats -->
            <div class="px-3 pt-2 pb-2 bg-light border-bottom d-flex flex-wrap justify-content-between align-items-center gap-2">
                <div class="btn-group btn-group-sm" role="group" id="chartMetricTabs">
                    <button type="button" class="btn btn-outline-primary active" data-mode="power">
                        <i class="fa-solid fa-bolt me-1"></i> Daya RF (Pfwd/Prefl)
                    </button>
                    <button type="button" class="btn btn-outline-primary" data-mode="vswr">
                        <i class="fa-solid fa-satellite-dish me-1"></i> VSWR Antena
                    </button>
                    <button type="button" class="btn btn-outline-primary" data-mode="temp">
                        <i class="fa-solid fa-temperature-three-quarters me-1"></i> Suhu PA & Ruang
                    </button>
                </div>

                <!-- KPI Summary Chips -->
                <div class="d-flex align-items-center gap-2 font-mono small" id="chartStatsChips">
                    <span class="badge bg-white text-dark border p-1 px-2">
                        <span class="text-muted">Rata-rata:</span> <strong class="text-primary" id="chipAvgPower">-</strong>
                    </span>
                    <span class="badge bg-white text-dark border p-1 px-2">
                        <span class="text-muted">VSWR:</span> <strong class="text-success" id="chipAvgVswr">-</strong>
                    </span>
                    <span class="badge bg-white text-dark border p-1 px-2 d-none d-md-inline-block">
                        <span class="text-muted">Suhu:</span> <strong class="text-danger" id="chipAvgTemp">-</strong>
                    </span>
                </div>
            </div>

            <div class="card-body p-3">
                <div style="position: relative; height: 280px; width: 100%;">
                    <canvas id="telemetryChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Logs Table -->
    <div class="col-12 col-xl-5">
        <div class="card card-engineering h-100">
            <div class="card-header">
                <div>
                    <i class="fa-solid fa-clock-rotate-left me-2 text-primary"></i>
                    <strong>Pencatatan Shift Terbaru</strong>
                </div>
                <a href="{{ route('logs.index') }}" class="btn btn-sm btn-link text-decoration-none">Semua Log &raquo;</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Waktu</th>
                                <th>Pemancar</th>
                                <th class="text-end">Pfwd</th>
                                <th class="text-center">VSWR</th>
                                <th>Petugas</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentLogs as $log)
                            <tr>
                                <td class="font-mono small">
                                    {{ $log->recorded_at->format('d/m H:i') }}
                                    <span class="badge bg-light text-dark border">{{ $log->shift[0] }}</span>
                                </td>
                                <td>
                                    <span class="small fw-semibold">{{ $log->transmitter->code }}</span>
                                </td>
                                <td class="text-end font-mono fw-bold">
                                    {{ number_format($log->forward_power, 0) }} W
                                </td>
                                <td class="text-center">
                                    <span class="badge {{ $log->vswr > 1.3 ? 'bg-danger' : 'bg-success' }} font-mono">
                                        {{ number_format($log->vswr, 2) }}
                                    </span>
                                </td>
                                <td class="small text-truncate" style="max-width: 100px;">
                                    {{ $log->user->name }}
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center py-3 text-muted small">Belum ada riwayat log.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Quick Log Input -->
<div class="modal fade" id="quickLogModal" tabindex="-1" aria-labelledby="quickLogModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable" style="max-width: 980px;">
        <form action="{{ route('logs.store') }}" method="POST" id="quickLogForm" class="modal-content border-0 shadow-lg">
            @csrf
            <div class="modal-header text-white px-4 py-3" style="background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); border-bottom: 2px solid #3b82f6 !important;">
                <div class="d-flex align-items-center">
                    <div class="rounded-3 p-2 bg-primary bg-opacity-25 text-info me-3 d-flex align-items-center justify-content-center" style="width: 44px; height: 44px;">
                        <i class="fa-solid fa-tower-broadcast fa-lg"></i>
                    </div>
                    <div>
                        <h5 class="modal-title fw-bold text-white mb-0" id="quickLogModalLabel">
                            Input Parameter Operasional Pemancar
                        </h5>
                        <p class="text-white-50 small mb-0">Catat telemetri parameter transmisi RF, kelistrikan PA, dan status operasional</p>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4 bg-light bg-opacity-50">
                    
                    <!-- Section 1: Informasi Pemancar & Jadwal Shift -->
                    <div class="card border border-light-subtle shadow-sm mb-3">
                        <div class="card-header bg-white py-2 px-3 d-flex align-items-center justify-content-between">
                            <span class="fw-bold small text-primary text-uppercase">
                                <i class="fa-solid fa-clock me-1"></i> 1. Informasi Pemancar & Jadwal Shift
                            </span>
                            <span class="badge bg-primary-subtle text-primary border border-primary-subtle font-mono small">Wajib Diisi</span>
                        </div>
                        <div class="card-body p-3">
                            <div class="row g-3">
                                <div class="col-md-7 col-lg-8">
                                    <label class="form-label small fw-semibold text-secondary mb-1">PILIH PEMANCAR *</label>
                                    <select name="transmitter_id" id="modal_transmitter_id" class="form-select font-mono" required>
                                        <option value="">-- Pilih Pemancar --</option>
                                        @foreach($transmitters as $tx)
                                        <option value="{{ $tx->id }}" data-power="{{ $tx->nominal_power }}">
                                            [{{ $tx->type }}] {{ $tx->name }} - {{ $tx->frequency }} (Nominal: {{ $tx->nominal_power >= 1000 ? ($tx->nominal_power/1000).' kW' : $tx->nominal_power.' W' }})
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-5 col-lg-4">
                                    <label class="form-label small fw-semibold text-secondary mb-1">SHIFT JAGA *</label>
                                    <select name="shift" class="form-select" required>
                                        <option value="">-- Pilih Shift Jaga --</option>
                                        @foreach($shifts as $sh)
                                        <option value="{{ $sh->name }}" {{ ($currentShift && $currentShift->id == $sh->id) ? 'selected' : '' }}>
                                            {{ $sh->name }} ({{ substr($sh->start_time, 0, 5) }} - {{ substr($sh->end_time, 0, 5) }})
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small fw-semibold text-secondary mb-1">PETUGAS ON-DUTY *</label>
                                    @if(Auth::check() && Auth::user()->role === 'technician')
                                    <input type="text" class="form-control font-mono bg-light text-dark fw-semibold" value="{{ Auth::user()->name }}" readonly>
                                    <input type="hidden" name="user_id" value="{{ Auth::id() }}">
                                    @else
                                    <select name="user_id" class="form-select" required>
                                        <option value="">-- Pilih Petugas --</option>
                                        @foreach($technicians as $t)
                                        <option value="{{ $t->id }}" {{ Auth::id() == $t->id ? 'selected' : '' }}>
                                            {{ $t->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @endif
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small fw-semibold text-secondary mb-1">TANGGAL CATAT *</label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-white text-muted"><i class="fa-regular fa-calendar"></i></span>
                                        <input type="date" name="recorded_date" id="modal_recorded_date" class="form-control font-mono" value="{{ date('Y-m-d') }}" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small fw-semibold text-secondary mb-1">JAM CATAT *</label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-white text-muted"><i class="fa-regular fa-clock"></i></span>
                                        <input type="time" name="recorded_time" id="modal_recorded_time" class="form-control font-mono" value="{{ date('H:i') }}" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Section 2: Parameter RF & VSWR -->
                    <div class="card border border-light-subtle shadow-sm mb-3">
                        <div class="card-header bg-white py-2 px-3 d-flex align-items-center justify-content-between">
                            <span class="fw-bold small text-info text-uppercase">
                                <i class="fa-solid fa-satellite-dish me-1"></i> 2. Parameter Daya Frekuensi Radio (RF) & Antena
                            </span>
                            <span class="text-muted font-mono small">
                                <i class="fa-solid fa-calculator me-1"></i> Otomatis menghitung VSWR
                            </span>
                        </div>
                        <div class="card-body p-3">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label small fw-semibold text-secondary mb-1">FORWARD POWER (PFWD) *</label>
                                    <div class="input-group">
                                        <input type="number" step="0.1" name="forward_power" id="input_fwd" class="form-control font-mono fs-6" placeholder="--" required>
                                        <span class="input-group-text font-mono bg-light">Watt</span>
                                    </div>
                                    <div class="form-text small text-muted">Daya pancar maju di coupler</div>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label small fw-semibold text-secondary mb-1">REFLECTED POWER (PREFL) *</label>
                                    <div class="input-group">
                                        <input type="number" step="0.1" name="reflected_power" id="input_refl" class="form-control font-mono fs-6" placeholder="--" required>
                                        <span class="input-group-text font-mono bg-light">Watt</span>
                                    </div>
                                    <div class="form-text small text-muted">Daya pantul dari antena / feeder</div>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label small fw-semibold text-secondary mb-1">VSWR (VOLTAGE STANDING WAVE RATIO)</label>
                                    <div class="input-group">
                                        <input type="number" step="0.01" name="vswr" id="input_vswr" class="form-control font-mono fs-6 fw-bold" placeholder="--">
                                        <span class="input-group-text font-mono text-secondary bg-light fw-bold" id="vswrBadgePreview" style="min-width: 80px; justify-content: center;">--</span>
                                    </div>
                                    <div class="form-text small text-muted">Ideal &lt; 1.20 | Warning &gt; 1.30 | Bahaya &gt; 1.50</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Section 3: PA Electrical & Temperatures -->
                    <div class="card border border-light-subtle shadow-sm mb-3">
                        <div class="card-header bg-white py-2 px-3">
                            <span class="fw-bold small text-danger text-uppercase">
                                <i class="fa-solid fa-temperature-three-quarters me-1"></i> 3. Kelistrikan Power Amplifier (PA) & Temperatur
                            </span>
                        </div>
                        <div class="card-body p-3">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label class="form-label small fw-semibold text-secondary mb-1">TEGANGAN PA</label>
                                    <div class="input-group">
                                        <input type="number" step="0.1" name="pa_voltage" class="form-control font-mono" placeholder="--">
                                        <span class="input-group-text bg-light font-mono">V</span>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label small fw-semibold text-secondary mb-1">ARUS PA</label>
                                    <div class="input-group">
                                        <input type="number" step="0.1" name="pa_current" class="form-control font-mono" placeholder="--">
                                        <span class="input-group-text bg-light font-mono">A</span>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label small fw-semibold text-secondary mb-1">SUHU HEATSINK PA</label>
                                    <div class="input-group">
                                        <input type="number" step="0.1" name="temperature_pa" class="form-control font-mono" placeholder="--">
                                        <span class="input-group-text bg-light font-mono">°C</span>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label small fw-semibold text-secondary mb-1">SUHU RUANG TX</label>
                                    <div class="input-group">
                                        <input type="number" step="0.1" name="temperature_room" class="form-control font-mono" placeholder="--">
                                        <span class="input-group-text bg-light font-mono">°C</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Section 4: Catu Daya, STL & Kondisi Akhir -->
                    <div class="card border border-light-subtle shadow-sm mb-2">
                        <div class="card-header bg-white py-2 px-3">
                            <span class="fw-bold small text-warning text-uppercase">
                                <i class="fa-solid fa-plug-circle-bolt me-1"></i> 4. Sumber Daya, Audio STL & Catatan Jaga
                            </span>
                        </div>
                        <div class="card-body p-3">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label small fw-semibold text-secondary mb-1">SUMBER CATU DAYA *</label>
                                    <select name="power_source" class="form-select" required>
                                        <option value="">-- Pilih Sumber Catu Daya --</option>
                                        <option value="PLN">PLN (Utama)</option>
                                        <option value="Genset">Genset Darurat</option>
                                        <option value="UPS">UPS Online</option>
                                        <option value="Solar/Battery">Baterai / Solar</option>
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label small fw-semibold text-secondary mb-1">STATUS AUDIO STL *</label>
                                    <select name="stl_status" class="form-select" required>
                                        <option value="">-- Pilih Status Audio STL --</option>
                                        <option value="Normal">Normal (Jernih)</option>
                                        <option value="Degraded">Degraded (Ada Noise)</option>
                                        <option value="Loss">Loss / Terputus</option>
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label small fw-semibold text-secondary mb-1">STATUS KONDISI AKHIR *</label>
                                    <select name="status" class="form-select" required>
                                        <option value="">-- Pilih Status Kondisi --</option>
                                        <option value="Normal">Normal</option>
                                        <option value="Warning">Warning (Perhatian)</option>
                                        <option value="Critical">Critical (Bahaya)</option>
                                    </select>
                                </div>

                                <div class="col-12">
                                    <label class="form-label small fw-semibold text-secondary mb-1">CATATAN TEKNISI ON-DUTY</label>
                                    <textarea name="notes" rows="2" class="form-control" placeholder="-- Tulis catatan operasional jika ada (opsional) --"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer bg-white px-4 py-3 border-top">
                    <button type="button" class="btn btn-outline-secondary px-4 fw-medium" data-bs-dismiss="modal">
                        <i class="fa-solid fa-xmark me-1"></i> Tutup
                    </button>
                    <button type="submit" class="btn btn-primary px-4 fw-semibold shadow-sm">
                        <i class="fa-solid fa-floppy-disk me-1"></i> Simpan Logbook
                    </button>
                </div>
        </form>
    </div>
</div>
@endsection

@push('styles')
<style>
    #quickLogModal .modal-dialog-scrollable .modal-content {
        max-height: 90vh;
        overflow: hidden;
    }
    #quickLogModal .modal-body {
        max-height: calc(90vh - 145px);
        overflow-y: auto !important;
    }
    #quickLogModal .modal-body::-webkit-scrollbar {
        width: 8px;
    }
    #quickLogModal .modal-body::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }
    #quickLogModal .modal-body::-webkit-scrollbar-thumb {
        background: #94a3b8;
        border-radius: 4px;
    }
    #quickLogModal .modal-body::-webkit-scrollbar-thumb:hover {
        background: #64748b;
    }
</style>
@endpush

@push('scripts')
<script>
    // Live Auto VSWR Calculation
    function calculateVSWR() {
        const fwdStr = (document.getElementById('input_fwd').value || '').trim();
        const reflStr = (document.getElementById('input_refl').value || '').trim();
        const vswrInput = document.getElementById('input_vswr');
        const badge = document.getElementById('vswrBadgePreview');

        if (!fwdStr || isNaN(parseFloat(fwdStr)) || parseFloat(fwdStr) <= 0) {
            vswrInput.value = '';
            badge.className = 'input-group-text font-mono text-secondary bg-light fw-bold';
            badge.textContent = '--';
            return;
        }

        const fwd = parseFloat(fwdStr);
        const refl = (reflStr && !isNaN(parseFloat(reflStr))) ? parseFloat(reflStr) : 0;

        if (refl === 0) {
            vswrInput.value = "1.00";
            vswrInput.className = "form-control font-mono fs-6 fw-bold text-success";
            badge.className = "input-group-text font-mono text-bg-success fw-bold";
            badge.textContent = "IDEAL";
            return;
        }

        const gamma = Math.sqrt(refl / fwd);
        if (gamma >= 1.0) {
            vswrInput.value = "9.99";
            vswrInput.className = "form-control font-mono fs-6 fw-bold text-danger";
            badge.className = "input-group-text font-mono text-bg-danger fw-bold";
            badge.textContent = "ALARM";
            return;
        }

        let vswr = (1 + gamma) / (1 - gamma);
        vswr = Math.min(vswr, 9.99);
        vswrInput.value = vswr.toFixed(2);

        if (vswr <= 1.20) {
            vswrInput.className = "form-control font-mono fs-6 fw-bold text-success";
            badge.className = "input-group-text font-mono text-bg-success fw-bold";
            badge.textContent = "NORMAL";
        } else if (vswr <= 1.35) {
            vswrInput.className = "form-control font-mono fs-6 fw-bold text-warning";
            badge.className = "input-group-text font-mono text-bg-warning fw-bold";
            badge.textContent = "WARNING";
        } else {
            vswrInput.className = "form-control font-mono fs-6 fw-bold text-danger";
            badge.className = "input-group-text font-mono text-bg-danger fw-bold";
            badge.textContent = "HIGH";
        }
    }

    document.getElementById('input_fwd').addEventListener('input', calculateVSWR);
    document.getElementById('input_refl').addEventListener('input', calculateVSWR);

    // Quick Log Button Click from Card: default tetap kosong / --
    document.querySelectorAll('.quick-log-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const txId = this.dataset.txId;
            const select = document.getElementById('modal_transmitter_id');
            if (select && txId) select.value = txId;

            // Pastikan isian default kosong / --
            document.getElementById('input_fwd').value = '';
            document.getElementById('input_refl').value = '';
            document.getElementById('input_vswr').value = '';
            const badge = document.getElementById('vswrBadgePreview');
            if (badge) {
                badge.className = 'input-group-text font-mono text-secondary bg-light fw-bold';
                badge.textContent = '--';
            }
            const modal = new bootstrap.Modal(document.getElementById('quickLogModal'));
            modal.show();
        });
    });

    // Reset fields saat modal ditutup
    const quickLogModalEl = document.getElementById('quickLogModal');
    if (quickLogModalEl) {
        quickLogModalEl.addEventListener('hidden.bs.modal', function () {
            document.getElementById('quickLogForm').reset();
            const badge = document.getElementById('vswrBadgePreview');
            if (badge) {
                badge.className = 'input-group-text font-mono text-secondary bg-light fw-bold';
                badge.textContent = '--';
            }
        });
    }

    // Interactive Clean Telemetry Chart
    let telemetryChart = null;
    let currentChartMode = 'power'; // 'power' | 'vswr' | 'temp'
    let currentData = null;

    function renderTelemetryChart(data) {
        currentData = data;

        // Update Header & Summary Chips
        $('#chipAvgPower').text(Math.round(data.avg_fwd || 0) + ' W');
        $('#chipAvgVswr').text(data.avg_vswr || '1.00');
        $('#chipAvgTemp').text(data.avg_temp + ' °C');

        const txNominal = data.transmitter.nominal_power >= 1000
            ? (data.transmitter.nominal_power / 1000) + ' kW'
            : data.transmitter.nominal_power + ' W';
        $('#chartTxSubinfo').text(`${data.transmitter.name} (${data.transmitter.frequency}) - Target: ${txNominal}`);

        const ctx = document.getElementById('telemetryChart').getContext('2d');
        if (telemetryChart) {
            telemetryChart.destroy();
        }

        let datasets = [];
        let yScales = {};

        if (currentChartMode === 'power') {
            datasets = [
                {
                    label: 'Forward Power (Pfwd)',
                    data: data.fwd_power,
                    borderColor: '#2563eb',
                    backgroundColor: 'rgba(37, 99, 235, 0.08)',
                    fill: true,
                    tension: 0.3,
                    borderWidth: 2,
                    pointRadius: 3,
                    pointHoverRadius: 6,
                    pointBackgroundColor: '#2563eb',
                },
                {
                    label: 'Reflected Power (Prefl)',
                    data: data.refl_power,
                    borderColor: '#e11d48',
                    backgroundColor: 'transparent',
                    borderWidth: 1.5,
                    pointRadius: 2,
                    pointHoverRadius: 5,
                    borderDash: [3, 3],
                }
            ];

            yScales = {
                y: {
                    title: { display: true, text: 'Daya Pancar (Watt)', font: { size: 11, weight: 'bold' } },
                    grid: { color: 'rgba(0, 0, 0, 0.05)' },
                    ticks: {
                        font: { family: "'JetBrains Mono', monospace", size: 10 },
                        callback: val => val + ' W'
                    }
                }
            };
        } else if (currentChartMode === 'vswr') {
            datasets = [
                {
                    label: 'VSWR Antena',
                    data: data.vswr,
                    borderColor: '#059669',
                    backgroundColor: 'rgba(5, 150, 105, 0.08)',
                    fill: true,
                    tension: 0.25,
                    borderWidth: 2.2,
                    pointRadius: 4,
                    pointHoverRadius: 6,
                    pointBackgroundColor: data.vswr.map(v => v > 1.35 ? '#dc2626' : (v > 1.20 ? '#d97706' : '#059669')),
                }
            ];

            const maxVswr = Math.max(1.6, ...data.vswr.map(v => Number(v) || 1));
            yScales = {
                y: {
                    min: 1.0,
                    max: parseFloat((maxVswr + 0.1).toFixed(1)),
                    title: { display: true, text: 'Rasio Standing Wave (VSWR)', font: { size: 11, weight: 'bold' } },
                    grid: { color: 'rgba(0, 0, 0, 0.05)' },
                    ticks: {
                        font: { family: "'JetBrains Mono', monospace", size: 10 },
                        stepSize: 0.1,
                        callback: val => Number(val).toFixed(2)
                    }
                }
            };
        } else if (currentChartMode === 'temp') {
            datasets = [
                {
                    label: 'Suhu Modul PA (°C)',
                    data: data.temp_pa,
                    borderColor: '#dc2626',
                    backgroundColor: 'rgba(220, 38, 38, 0.08)',
                    fill: true,
                    tension: 0.3,
                    borderWidth: 2,
                    pointRadius: 3,
                    pointHoverRadius: 6,
                },
                {
                    label: 'Suhu Ruang TX (°C)',
                    data: data.temp_room,
                    borderColor: '#0284c7',
                    backgroundColor: 'transparent',
                    borderDash: [4, 4],
                    tension: 0.25,
                    borderWidth: 1.8,
                    pointRadius: 3,
                }
            ];

            yScales = {
                y: {
                    min: 15,
                    title: { display: true, text: 'Temperatur (°C)', font: { size: 11, weight: 'bold' } },
                    grid: { color: 'rgba(0, 0, 0, 0.05)' },
                    ticks: {
                        font: { family: "'JetBrains Mono', monospace", size: 10 },
                        callback: val => val + '°C'
                    }
                }
            };
        }

        telemetryChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: data.labels,
                datasets: datasets
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    mode: 'index',
                    intersect: false,
                },
                plugins: {
                    legend: {
                        position: 'top',
                        align: 'end',
                        labels: {
                            boxWidth: 12,
                            boxHeight: 12,
                            usePointStyle: true,
                            font: { size: 11, family: 'Inter, sans-serif', weight: '500' },
                            padding: 14
                        }
                    },
                    tooltip: {
                        backgroundColor: '#0f172a',
                        titleFont: { family: "'JetBrains Mono', monospace", size: 11 },
                        bodyFont: { family: "'JetBrains Mono', monospace", size: 11 },
                        padding: 10,
                        cornerRadius: 6,
                        callbacks: {
                            label: function(context) {
                                let label = context.dataset.label || '';
                                if (label) label += ': ';
                                if (context.parsed.y !== null) {
                                    if (currentChartMode === 'power') {
                                        label += context.parsed.y + ' W';
                                    } else if (currentChartMode === 'vswr') {
                                        const v = context.parsed.y;
                                        label += v + (v <= 1.20 ? ' [Normal]' : (v <= 1.35 ? ' [Warning]' : ' [Bahaya]'));
                                    } else {
                                        label += context.parsed.y + ' °C';
                                    }
                                }
                                return label;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        grid: { display: false },
                        ticks: {
                            maxTicksLimit: 7,
                            font: { family: "'JetBrains Mono', monospace", size: 10 },
                            maxRotation: 0,
                        }
                    },
                    ...yScales
                }
            }
        });
    }

    function loadChartData() {
        const txId = $('#chartTxSelect').val();
        const days = $('#chartDaysSelect').val();

        $.get(`/dashboard/chart-data?transmitter_id=${txId}&days=${days}`, function(res) {
            if (res.success) {
                renderTelemetryChart(res);
            }
        });
    }

    // Chart Mode Tabs (Daya, VSWR, Suhu)
    $('#chartMetricTabs button').on('click', function() {
        $('#chartMetricTabs button').removeClass('active');
        $(this).addClass('active');
        currentChartMode = $(this).data('mode');
        if (currentData) {
            renderTelemetryChart(currentData);
        } else {
            loadChartData();
        }
    });

    // Dropdown filters
    $('#chartTxSelect, #chartDaysSelect').on('change', function() {
        loadChartData();
    });

    // Initial Load
    $(document).ready(function() {
        loadChartData();
    });
</script>
@endpush