@extends('layouts.app')

@section('title', 'Satuan Sensor - Hidroponik')
@section('page-title', 'Satuan Sensor')

@section('content')

<div id="pageAlert" class="alert alert-dismissible fade show rounded-3 border mb-4 d-none" role="alert">
    <i class="bi bi-check-circle me-2"></i><span id="pageAlertMsg"></span>
    <button type="button" class="btn-close" onclick="document.getElementById('pageAlert').classList.add('d-none')"></button>
</div>

<div class="section-label">
    <i class="bi bi-rulers" style="color:var(--primary)"></i> Data Master Satuan Sensor
</div>

<div class="card-clean mb-4">
    <div class="card-header d-flex align-items-center justify-content-between">
        <span><i class="bi bi-list-ul me-2"></i>Daftar Satuan Sensor</span>
        <button type="button" class="btn-primary-clean" onclick="openCreateModal()">
            <i class="bi bi-plus-lg me-1"></i> Tambah Satuan Sensor
        </button>
    </div>

    <div class="table-responsive">
        <table class="table table-clean mb-0">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Nama Satuan</th>
                    <th>Jenis Sensor</th>
                    <th class="text-end">Aksi</th>
                </tr>
            </thead>
            <tbody id="tabelSatuanBody">
                <tr>
                    <td colspan="4" class="text-center py-4" style="color:var(--text-muted);">
                        <span class="spinner-border spinner-border-sm me-2"></span>Memuat data...
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

{{-- ═══ MODAL TAMBAH / EDIT SATUAN ═══ --}}
<div class="modal fade" id="satuanModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="satuanModalTitle">
                    <i class="bi bi-rulers me-2"></i>Tambah Satuan Sensor
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="satuanForm">
                <div class="modal-body">
                    <input type="hidden" id="f_id">

                    <label class="form-label">Jenis Sensor</label>
                    <select class="form-select mb-3" id="f_id_jenis_sensor" required>
                        <option value="">Pilih Jenis Sensor...</option>
                        @foreach($jenisSensors as $js)
                        <option value="{{ $js->id_jenis_sensor }}">
                            {{ $js->nama_sensor }} ({{ $js->kode ?? '-' }})
                        </option>
                        @endforeach
                    </select>

                    <label class="form-label">Nama Satuan Sensor</label>
                    <input type="text" class="form-control" id="f_nama_satuan_sensor"
                           placeholder="Contoh: pH, ppm, °C, NTU" required maxlength="50">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm" data-bs-dismiss="modal"
                            style="border:1px solid var(--border-color); color:var(--text-muted); border-radius:8px; padding:8px 18px; font-size:13px;">
                        Batal
                    </button>
                    <button type="submit" class="btn-primary-clean" id="satuanSubmitBtn">
                        <i class="bi bi-save me-1"></i> Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
const API_SATUAN = '/api/satuan-sensor';
const csrfToken  = document.querySelector('meta[name="csrf-token"]')?.content;

const satuanModalEl = document.getElementById('satuanModal');
const satuanModal   = new bootstrap.Modal(satuanModalEl);

function showPageAlert(msg, type = 'success') {
    const el = document.getElementById('pageAlert');
    el.className = `alert alert-${type} alert-dismissible fade show rounded-3 border mb-4`;
    document.getElementById('pageAlertMsg').textContent = msg;
    window.scrollTo({ top: 0, behavior: 'smooth' });
    setTimeout(() => el.classList.add('d-none'), 4000);
}

async function loadData() {
    const tbody = document.getElementById('tabelSatuanBody');
    try {
        const res  = await fetch(API_SATUAN, { headers: { 'Accept': 'application/json' } });
        const json = await res.json();
        const data = json.data || [];

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

        tbody.innerHTML = data.map((row, i) => `
            <tr>
                <td>${i + 1}</td>
                <td><strong>${row.nama_satuan_sensor}</strong></td>
                <td>
                    ${row.jenis_sensor?.nama_sensor ?? '-'}
                    <span style="color:var(--text-muted);font-size:12px;">
                        (${row.jenis_sensor?.kode ?? '-'})
                    </span>
                </td>
                <td class="text-end">
                    <button class="btn btn-sm btn-light border" onclick='openEditModal(${JSON.stringify(row)})' title="Edit">
                        <i class="bi bi-pencil"></i>
                    </button>
                    <button class="btn btn-sm btn-light border text-danger" onclick="hapusSatuan(${row.id_satuan_sensor})" title="Hapus">
                        <i class="bi bi-trash"></i>
                    </button>
                </td>
            </tr>
        `).join('');
    } catch (err) {
        console.error(err);
        tbody.innerHTML = `<tr><td colspan="4" class="text-center py-4 text-danger">Gagal memuat data.</td></tr>`;
    }
}

function openCreateModal() {
    document.getElementById('satuanForm').reset();
    document.getElementById('f_id').value = '';
    document.getElementById('satuanModalTitle').innerHTML = '<i class="bi bi-rulers me-2"></i>Tambah Satuan Sensor';
    satuanModal.show();
}

function openEditModal(row) {
    document.getElementById('f_id').value = row.id_satuan_sensor;
    document.getElementById('f_id_jenis_sensor').value = row.id_jenis_sensor;
    document.getElementById('f_nama_satuan_sensor').value = row.nama_satuan_sensor;
    document.getElementById('satuanModalTitle').innerHTML = '<i class="bi bi-pencil-square me-2"></i>Edit Satuan Sensor';
    satuanModal.show();
}

document.getElementById('satuanForm').addEventListener('submit', async function (e) {
    e.preventDefault();
    const id = document.getElementById('f_id').value;
    const payload = {
        id_jenis_sensor:    document.getElementById('f_id_jenis_sensor').value,
        nama_satuan_sensor: document.getElementById('f_nama_satuan_sensor').value,
    };
    const url    = id ? `${API_SATUAN}/${id}` : API_SATUAN;
    const method = id ? 'PUT' : 'POST';

    const btn = document.getElementById('satuanSubmitBtn');
    const originalText = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Menyimpan...';

    try {
        const res  = await fetch(url, {
            method,
            headers: {
                'Content-Type': 'application/json',
                'Accept':       'application/json',
                'X-CSRF-TOKEN': csrfToken,
            },
            body: JSON.stringify(payload),
        });
        const json = await res.json();
        if (!res.ok) {
            const firstError = json.errors
                ? Object.values(json.errors)[0][0]
                : (json.message || 'Gagal menyimpan.');
            throw new Error(firstError);
        }
        satuanModal.hide();
        showPageAlert(json.message || 'Data berhasil disimpan.');
        await loadData();
    } catch (err) {
        showPageAlert(err.message || 'Terjadi kesalahan.', 'danger');
    } finally {
        btn.disabled = false;
        btn.innerHTML = originalText;
    }
});

async function hapusSatuan(id) {
    if (!confirm('Yakin ingin menghapus satuan sensor ini?')) return;
    try {
        const res  = await fetch(`${API_SATUAN}/${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 menghapus.');
        showPageAlert(json.message || 'Data berhasil dihapus.');
        await loadData();
    } catch (err) {
        showPageAlert(err.message || 'Terjadi kesalahan.', 'danger');
    }
}

loadData();
</script>
@endsection