@extends('layouts.app')

@section('title', 'Edit Jenis Sensor')
@section('page-title', 'Edit Jenis Sensor')

@section('content')

<div class="section-label">
    <i class="bi bi-pencil-square" style="color:var(--primary)"></i> Form Edit Jenis Sensor
</div>

<div class="card-clean p-4 mb-4" style="max-width:640px;">

    @if($errors->any())
    <div class="alert alert-danger mb-3">
        <ul class="mb-0" style="font-size:13px;">
            @foreach($errors->all() as $e)
                <li>{{ $e }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form action="{{ route('jenis-sensor.update', $sensor->id_jenis_sensor) }}" method="POST">
        @csrf
        @method('PUT')

        <div class="mb-3">
            <label class="form-label fw-semibold">Kode Sensor <span class="text-danger">*</span></label>
            <input type="text" name="kode"
                   class="form-control @error('kode') is-invalid @enderror"
                   value="{{ old('kode', $sensor->kode) }}"
                   maxlength="20" required>
            @error('kode')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="mb-3">
            <label class="form-label fw-semibold">Nama Sensor <span class="text-danger">*</span></label>
            <input type="text" name="nama_sensor"
                   class="form-control @error('nama_sensor') is-invalid @enderror"
                   value="{{ old('nama_sensor', $sensor->nama_sensor) }}"
                   maxlength="50" required>
            @error('nama_sensor')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="mb-3">
            <label class="form-label fw-semibold">Keterangan</label>
            <textarea name="keterangan" rows="3"
                      class="form-control @error('keterangan') is-invalid @enderror">{{ old('keterangan', $sensor->keterangan) }}</textarea>
            @error('keterangan')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="mb-3">
            <label class="form-label fw-semibold">Waktu Kirim Data <span class="text-danger">*</span></label>
            <div class="input-group">
                <input type="number" name="waktu_kirim" min="1"
                       class="form-control @error('waktu_kirim') is-invalid @enderror"
                       value="{{ old('waktu_kirim', $sensor->waktu_kirim) }}" required>
                <select name="kategori" class="form-select @error('kategori') is-invalid @enderror">
                    @foreach(['detik','menit','jam','hari','minggu'] as $k)
                        <option value="{{ $k }}"
                            {{ old('kategori', $sensor->kategori) === $k ? 'selected' : '' }}>
                            {{ ucfirst($k) }}
                        </option>
                    @endforeach
                </select>
            </div>
            @error('waktu_kirim')<div class="text-danger" style="font-size:12px;margin-top:4px;">{{ $message }}</div>@enderror
        </div>

        <div class="mb-3">
            <label class="form-label fw-semibold">Jumlah Pengecekan <span class="text-danger">*</span></label>
            <input type="number" name="pengecekan_sensor" min="1"
                   class="form-control @error('pengecekan_sensor') is-invalid @enderror"
                   value="{{ old('pengecekan_sensor', $sensor->pengecekan_sensor) }}" required>
            <div style="font-size:11px;color:#a0aec0;margin-top:4px;">Berapa kali sensor dicek sebelum alert dikirim</div>
            @error('pengecekan_sensor')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="mb-3">
            <label class="form-label fw-semibold">Status <span class="text-danger">*</span></label>
            <select name="status" class="form-select @error('status') is-invalid @enderror">
                <option value="Y" {{ old('status', $sensor->status) === 'Y' ? 'selected' : '' }}>Aktif</option>
                <option value="T" {{ old('status', $sensor->status) === 'T' ? 'selected' : '' }}>Tidak Aktif</option>
            </select>
            @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        {{-- ═══ SATUAN & RENTANG GAUGE ═══ --}}
        <div class="mb-3">
            <label class="form-label fw-semibold">Satuan <span class="text-danger">*</span></label>
            <input type="text" name="satuan"
                   class="form-control @error('satuan') is-invalid @enderror"
                   value="{{ old('satuan', $sensor->satuan) }}"
                   placeholder="Contoh: pH, ppm, °C, NTU" maxlength="20" required>
            @error('satuan')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="row g-2 mb-4">
            <div class="col-6">
                <label class="form-label fw-semibold">Nilai Minimum <span class="text-danger">*</span></label>
                <input type="number" step="0.01" name="nilai_min"
                       class="form-control @error('nilai_min') is-invalid @enderror"
                       value="{{ old('nilai_min', $sensor->nilai_min) }}" required>
                <div style="font-size:11px;color:#a0aec0;margin-top:4px;">Batas bawah gauge grafik</div>
                @error('nilai_min')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-6">
                <label class="form-label fw-semibold">Nilai Maksimum <span class="text-danger">*</span></label>
                <input type="number" step="0.01" name="nilai_max"
                       class="form-control @error('nilai_max') is-invalid @enderror"
                       value="{{ old('nilai_max', $sensor->nilai_max) }}" required>
                <div style="font-size:11px;color:#a0aec0;margin-top:4px;">Batas atas gauge grafik</div>
                @error('nilai_max')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="d-flex gap-2">
            <a href="{{ route('jenis-sensor.index') }}"
               style="border:1px solid var(--border-color);color:var(--text-muted);border-radius:8px;
                      padding:9px 20px;font-size:13px;text-decoration:none;display:inline-flex;align-items:center;">
                <i class="bi bi-arrow-left me-1"></i> Batal
            </a>
            <button type="submit" class="btn-primary-clean">
                <i class="bi bi-save me-1"></i> Update Sensor
            </button>
        </div>

    </form>
</div>

{{-- ═══ KELOLA ANGKA DISKRIT ═══ --}}
<div class="section-label" style="max-width:640px;">
    <i class="bi bi-123" style="color:var(--primary)"></i> Angka Satuan (Sumbu Grafik)
</div>

<div class="card-clean mb-4" style="max-width:640px;">
    <div class="card-header">
        <i class="bi bi-list-ol me-2"></i>Daftar Angka Satuan — {{ $sensor->nama_sensor }} ({{ $sensor->satuan }})
    </div>
    <div class="p-4">

        {{-- Form tambah angka --}}
        <div class="d-flex gap-2 mb-3">
            <input type="number" step="0.01" class="form-control" id="inputAngka"
                   placeholder="Masukkan angka, contoh: 400">
            <button type="button" class="btn-primary-clean" style="white-space:nowrap;" onclick="tambahAngka()">
                <i class="bi bi-plus-lg me-1"></i> Tambah
            </button>
        </div>

        {{-- Tabel angka --}}
        <div class="table-responsive">
            <table class="table table-clean mb-0">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Angka</th>
                        <th class="text-end">Aksi</th>
                    </tr>
                </thead>
                <tbody id="tabelAngkaBody">
                    <tr>
                        <td colspan="3" class="text-center py-3" style="color:var(--text-muted);">
                            <span class="spinner-border spinner-border-sm me-2"></span>Memuat...
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
const ID_SENSOR  = {{ $sensor->id_jenis_sensor }};
const API_ANGKA  = '/api/angka-satuan';
const csrfToken  = document.querySelector('meta[name="csrf-token"]')?.content;

async function loadAngka() {
    const tbody = document.getElementById('tabelAngkaBody');
    try {
        const res  = await fetch(`${API_ANGKA}/${ID_SENSOR}`, { headers: { 'Accept': 'application/json' } });
        const json = await res.json();
        const data = json.data || [];

        if (data.length === 0) {
            tbody.innerHTML = `<tr><td colspan="3" class="text-center py-3" style="color:var(--text-muted);">Belum ada angka satuan.</td></tr>`;
            return;
        }

        tbody.innerHTML = data.map((row, i) => `
            <tr id="baris-${row.id_angka_satuan}">
                <td>${i + 1}</td>
                <td>
                    <span id="label-${row.id_angka_satuan}">${row.angka}</span>
                    <input type="number" step="0.01" class="form-control form-control-sm d-none"
                           id="input-${row.id_angka_satuan}" value="${row.angka}" style="width:120px;">
                </td>
                <td class="text-end d-flex gap-1 justify-content-end">
                    <button class="btn btn-sm btn-light border" id="btn-edit-${row.id_angka_satuan}"
                            onclick="editAngka(${row.id_angka_satuan})">
                        <i class="bi bi-pencil"></i>
                    </button>
                    <button class="btn btn-sm btn-primary-clean d-none" id="btn-save-${row.id_angka_satuan}"
                            onclick="simpanAngka(${row.id_angka_satuan})">
                        <i class="bi bi-check-lg"></i>
                    </button>
                    <button class="btn btn-sm btn-light border text-danger"
                            onclick="hapusAngka(${row.id_angka_satuan})">
                        <i class="bi bi-trash"></i>
                    </button>
                </td>
            </tr>
        `).join('');
    } catch (err) {
        tbody.innerHTML = `<tr><td colspan="3" class="text-center py-3 text-danger">Gagal memuat angka.</td></tr>`;
    }
}

async function tambahAngka() {
    const angka = document.getElementById('inputAngka').value;
    if (!angka) { alert('Masukkan angka terlebih dahulu.'); return; }
    try {
        const res  = await fetch(API_ANGKA, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify({ id_jenis_sensor: ID_SENSOR, angka }),
        });
        const json = await res.json();
        if (!res.ok) throw new Error(json.message || 'Gagal menambah.');
        document.getElementById('inputAngka').value = '';
        await loadAngka();
    } catch (err) {
        alert(err.message);
    }
}

function editAngka(id) {
    document.getElementById(`label-${id}`).classList.add('d-none');
    document.getElementById(`input-${id}`).classList.remove('d-none');
    document.getElementById(`btn-edit-${id}`).classList.add('d-none');
    document.getElementById(`btn-save-${id}`).classList.remove('d-none');
}

async function simpanAngka(id) {
    const angka = document.getElementById(`input-${id}`).value;
    try {
        const res  = await fetch(`${API_ANGKA}/${id}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify({ angka }),
        });
        const json = await res.json();
        if (!res.ok) throw new Error(json.message || 'Gagal update.');
        await loadAngka();
    } catch (err) {
        alert(err.message);
    }
}

async function hapusAngka(id) {
    if (!confirm('Yakin hapus angka ini?')) return;
    try {
        const res  = await fetch(`${API_ANGKA}/${id}`, {
            method: 'DELETE',
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken },
        });
        const json = await res.json();
        if (!res.ok) throw new Error(json.message || 'Gagal hapus.');
        await loadAngka();
    } catch (err) {
        alert(err.message);
    }
}

loadAngka();
</script>
@endsection