<div class="plf">
    <style>
        .plf { max-width: 560px; margin: 0 auto; font-family: Arial, Helvetica, sans-serif; color: #111; }
        .plf h2 { font-size: 20px; margin: 0 0 16px; }
        .plf .card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 24px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
        .plf .field { margin-bottom: 18px; }
        .plf label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
        .plf input, .plf select {
            width: 100%; box-sizing: border-box; padding: 10px 12px;
            border: 1px solid #d1d5db; border-radius: 10px; font-size: 14px; background: #fff;
        }
        .plf input:focus, .plf select:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
        .plf input:disabled { background: #f3f4f6; color: #6b7280; }
        .plf .row { display: flex; gap: 12px; align-items: flex-end; }
        .plf .row > div:first-child { flex: 1; }
        .plf .suffix { padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 10px; background: #f3f4f6; font-size: 14px; min-width: 56px; text-align: center; }
        .plf .err { color: #dc2626; font-size: 12px; margin-top: 4px; }
        .plf .hint { font-size: 12px; color: #6b7280; margin-top: 4px; }
        .plf .preview { margin-top: 10px; }
        .plf .preview img { max-height: 160px; border-radius: 10px; border: 1px solid #e5e7eb; }
        .plf button.simpan {
            width: 100%; margin-top: 8px; padding: 12px; border: 0; border-radius: 10px;
            background: #16a34a; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
        }
        .plf button.simpan:hover { background: #15803d; }
        .plf .uploading { font-size: 12px; color: #16a34a; margin-top: 6px; }
    </style>
    <center>
    <h2>Input Penerimaan Limbah B3</h2>
    </center>
    <div class="card">
        <form wire:submit="save">
            {{-- Tanggal (otomatis, disabled) --}}
            <div class="field">
                <label>Tanggal</label>
                <input type="date" wire:model="tanggal" disabled>
            </div>

            {{-- PIC (otomatis dari user login, disabled) --}}
            <div class="field">
                <label>Nama PIC</label>
                <input type="text" wire:model="pic">
            </div>

            {{-- Jenis limbah (pilih) --}}
            <div class="field">
                <label>Jenis Limbah B3</label>
                <select wire:model.live="limbah_id">
                    <option value="">-- Pilih jenis limbah --</option>
                    @foreach ($daftarLimbah as $limbah)
                        <option value="{{ $limbah->id }}">{{ $limbah->nama }}</option>
                    @endforeach
                </select>
                @error('limbah_id') <div class="err">{{ $message }}</div> @enderror
            </div>

            {{-- Kode limbah (otomatis, disabled) --}}
            <div class="field">
                <label>Kode Limbah</label>
                <input type="text" wire:model="kode" placeholder="otomatis terisi" disabled>
            </div>

            {{-- Sumber limbah (dropdown tetap) --}}
            <div class="field">
                <label>Sumber Limbah B3</label>
                <select wire:model="sumber">
                    <option value="">-- Pilih sumber --</option>
                    @foreach ($this->sumberOptions() as $opsi)
                        <option value="{{ $opsi }}">{{ $opsi }}</option>
                    @endforeach
                </select>
                @error('sumber') <div class="err">{{ $message }}</div> @enderror
            </div>

            {{-- Jumlah (+ satuan otomatis) --}}
            <div class="field">
                <label>Jumlah Limbah B3</label>
                <div class="row">
                    <div>
                        <input type="number" step="any" min="0" wire:model="jumlah" placeholder="0">
                    </div>
                    <div class="suffix">{{ $satuan ?: '—' }}</div>
                </div>
                @error('jumlah') <div class="err">{{ $message }}</div> @enderror
            </div>

            {{-- Upload foto (HP bisa langsung kamera) --}}
            <div class="field">
                <label>Foto Bukti</label>
                <input type="file" wire:model="foto" accept="image/*" capture="environment">
                <div class="hint">Di HP, opsi kamera akan muncul otomatis.</div>

                <div wire:loading wire:target="foto" class="uploading">Mengunggah foto...</div>

                @if ($foto)
                    <div class="preview">
                        <img src="{{ $foto->temporaryUrl() }}" alt="Preview">
                    </div>
                @endif
                @error('foto') <div class="err">{{ $message }}</div> @enderror
            </div>

            <button type="submit" class="simpan">
                <span wire:loading.remove wire:target="save">Simpan Penerimaan</span>
                <span wire:loading wire:target="save">Menyimpan...</span>
            </button>
        </form>
    </div>
</div>