@extends('layouts.app')

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

@section('content')

<div class="section-label">
    <i class="bi bi-plus-circle" style="color:var(--primary)"></i> Form Tambah 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.store') }}" method="POST">
        @csrf

        <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') }}"
                   placeholder="Contoh: PH01" maxlength="20" required>
            @error('kode')<div class="invalid-feedback">{{ $message }}</div>@enderror
            <div style="font-size:11px;color:#a0aec0;margin-top:4px;">Kode unik untuk sensor</div>
        </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') }}"
                   placeholder="Contoh: ph_level" 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"
                      placeholder="Deskripsi singkat fungsi sensor...">{{ old('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', 30) }}" 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','menit') === $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', 3) }}" 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>

        {{-- ═══ 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') }}"
                   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', 0) }}" 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', 100) }}" 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> Simpan Sensor
            </button>
        </div>

    </form>
</div>

@endsection