@extends('layouts.app')

@section('title', 'Settings - Hidroponik')
@section('page-title', 'Settings')

@section('content')

{{-- Alert --}}
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show rounded-3 border mb-4" role="alert">
    <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif
@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show rounded-3 border mb-4" role="alert">
    <i class="bi bi-exclamation-triangle me-2"></i>{{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="section-label">
    <i class="bi bi-sliders" style="color:var(--primary)"></i> Pengaturan Batas Sensor (Threshold)
</div>

<div class="card-clean mb-4">
    <div class="card-header">
        <i class="bi bi-info-circle me-2"></i>
        Informasi
    </div>
    <div class="p-4" style="font-size:13px; color:#718096;">
        Atur batas <strong>Minimum</strong> dan <strong>Maksimum</strong> untuk setiap parameter sensor.
        Jika nilai sensor berada di luar rentang ini, sistem akan menampilkan status
        <span class="badge-bahayakurang">Bahaya Kurang</span> atau
        <span class="badge-bahayalebih">Bahaya Lebih</span> pada dashboard dan halaman peringatan.
    </div>
</div>

<form action="{{ route('settings.update') }}" method="POST">
    @csrf
    @method('PUT')

    <div class="row g-3 mb-4">

        {{-- ═══ pH Level ═══ --}}
@php  $batasPh        = $batas['ph_level']  ?? null; @endphp
        <div class="col-md-4">
            <div class="card-clean p-4 h-100">
                <div class="d-flex align-items-center gap-2 mb-3">
                    <div class="stat-icon" style="width:42px; height:42px; font-size:18px; background:linear-gradient(135deg,#1a9eb5,#0e7da3);">
                        <i class="bi bi-droplet-half"></i>
                    </div>
                    <div>
                        <div style="font-weight:700; font-size:14px; color:#2d3748;">pH Level</div>
                        <div style="font-size:11px; color:#a0aec0;">Tingkat keasaman air</div>
                    </div>
                </div>

                <input type="hidden" name="batas[ph_level][id]" value="{{ $batasPh->id_batas_peringatan ?? '' }}">

                <label class="form-label">Batas Minimum</label>
                <input type="number" step="0.01" class="form-control mb-3"
                       name="batas[ph_level][min]"
                       value="{{ old('batas.ph_level.min', $batasPh->nilai_min ?? '') }}"
                       placeholder="" required>

                <label class="form-label">Batas Maksimum</label>
                <input type="number" step="0.01" class="form-control mb-3"
                       name="batas[ph_level][max]"
                       value="{{ old('batas.ph_level.max', $batasPh->nilai_max ?? '') }}"
                       placeholder="" required>

                <label class="form-label">Keterangan</label>
                <input type="text" class="form-control"
                       name="batas[ph_level][keterangan]"
                       value="{{ old('batas.ph_level.keterangan', $batasPh->keterangan ?? '') }}"
                       placeholder="Contoh: pH normal untuk melon hidroponik">
            </div>
        </div>



{{-- ═══ TDS (ppm) ═══ --}}
@php  $batasTds       = $batas['tds']       ?? null; @endphp

        <div class="col-md-4">
            <div class="card-clean p-4 h-100">
                <div class="d-flex align-items-center gap-2 mb-3">
                    <div class="stat-icon" style="width:42px; height:42px; font-size:18px; background:linear-gradient(135deg,#10b981,#059669);">
                        <i class="bi bi-water"></i>
                    </div>
                    <div>
                        <div style="font-weight:700; font-size:14px; color:#2d3748;">TDS (ppm)</div>
                        <div style="font-size:11px; color:#a0aec0;">Kepekatan nutrisi air</div>
                    </div>
                </div>

                <input type="hidden" name="batas[TDS][id]" value="{{ $batasTds->id_batas_peringatan ?? '' }}">

                <label class="form-label">Batas Minimum</label>
                <input type="number" step="1" class="form-control mb-3"
                       name="batas[TDS][min]"
                       value="{{ old('batas.TDS.min', $batasTds->nilai_min ?? '') }}"
                       placeholder="" required>

                <label class="form-label">Batas Maksimum</label>
                <input type="number" step="1" class="form-control mb-3"
                       name="batas[TDS][max]"
                       value="{{ old('batas.TDS.max', $batasTds->nilai_max ?? '') }}"
                       placeholder="" required>

                <label class="form-label">Keterangan</label>
                <input type="text" class="form-control"
                       name="batas[TDS][keterangan]"
                       value="{{ old('batas.TDS.keterangan', $batasTds->keterangan ?? '') }}"
                       placeholder="Contoh: TDS normal untuk melon hidroponik">
            </div>
        </div>

        {{-- ═══ Suhu Air ═══ --}}
@php $batasSuhu      = $batas['suhu_air']  ?? null; @endphp
        <div class="col-md-4">
            <div class="card-clean p-4 h-100">
                <div class="d-flex align-items-center gap-2 mb-3">
                    <div class="stat-icon" style="width:42px; height:42px; font-size:18px; background:linear-gradient(135deg,#ef4444,#dc2626);">
                        <i class="bi bi-thermometer-half"></i>
                    </div>
                    <div>
                        <div style="font-weight:700; font-size:14px; color:#2d3748;">Suhu Air (°C)</div>
                        <div style="font-size:11px; color:#a0aec0;">Suhu larutan nutrisi</div>
                    </div>
                </div>

                <input type="hidden" name="batas[suhu_air][id]" value="{{ $batasSuhu->id_batas_peringatan ?? '' }}">

                <label class="form-label">Batas Minimum</label>
                <input type="number" step="0.1" class="form-control mb-3"
                       name="batas[suhu_air][min]"
                       value="{{ old('batas.suhu_air.min', $batasSuhu->nilai_min ?? '') }}"
                       placeholder="" required>

                <label class="form-label">Batas Maksimum</label>
                <input type="number" step="0.1" class="form-control mb-3"
                       name="batas[suhu_air][max]"
                       value="{{ old('batas.suhu_air.max', $batasSuhu->nilai_max ?? '') }}"
                       placeholder="" required>

                <label class="form-label">Keterangan</label>
                <input type="text" class="form-control"
                       name="batas[suhu_air][keterangan]"
                       value="{{ old('batas.suhu_air.keterangan', $batasSuhu->keterangan ?? '') }}"
                       placeholder="Contoh: Suhu normal untuk melon hidroponik">
            </div>
        </div>

    </div>

  {{-- ═══ Turbidity ═══ --}}
@php  $batasTurbidity = $batas['turbidity'] ?? null; @endphp

    <div class="col-md-4">
        <div class="card-clean p-4 h-100">
            <div class="d-flex align-items-center gap-2 mb-3">
                <div class="stat-icon" style="width:42px; height:42px; font-size:18px; background:linear-gradient(135deg,#f59e0b,#d97706);">
                    <i class="bi bi-droplet"></i>
                </div>
                <div>
                    <div style="font-weight:700; font-size:14px; color:#2d3748;">Turbidity (NTU)</div>
                    <div style="font-size:11px; color:#a0aec0;">Kekeruhan air</div>
                </div>
            </div>

            <input type="hidden" name="batas[turbidity][id]" value="{{ $batasTurbidity->id_batas_peringatan ?? '' }}">

            <label class="form-label">Batas Minimum</label>
            <input type="number" step="0.1" class="form-control mb-3"
                   name="batas[turbidity][min]"
                   value="{{ old('batas.turbidity.min', $batasTurbidity->nilai_min ?? '') }}"
                   placeholder="" required>

            <label class="form-label">Batas Maksimum</label>
            <input type="number" step="0.1" class="form-control mb-3"
                   name="batas[turbidity][max]"
                   value="{{ old('batas.turbidity.max', $batasTurbidity->nilai_max ?? '') }}"
                   placeholder="" required>

            <label class="form-label">Keterangan</label>
            <input type="text" class="form-control"
                   name="batas[turbidity][keterangan]"
                   value="{{ old('batas.turbidity.keterangan', $batasTurbidity->keterangan ?? '') }}"
                   placeholder="Contoh: Kekeruhan normal air hidroponik">
        </div>
    </div>

    <div class="d-flex justify-content-end gap-2">
        <a href="{{ route('dashboard') }}" class="btn btn-sm" style="border:1px solid var(--border-color); color:var(--text-muted); border-radius:8px; padding:9px 20px; font-size:13px; text-decoration:none;">
            Batal
        </a>
        <button type="submit" class="btn-primary-clean">
            <i class="bi bi-save me-1"></i> Simpan Pengaturan
        </button>
    </div>
</form>

@endsection