@extends('layouts.app')

@section('title', 'Tambah Kategori')

@section('content')

    <div class="page-header">
        <div>
            <h1 class="page-title">Tambah Kategori</h1>
        </div>
    </div>

    <div class="content-narrow">
        <div class="form-shell">
            <div class="card-body">

                <form method="POST" action="{{ route('kategori.store') }}">
                    @csrf

                    {{-- Nama Kategori --}}
                    <div class="mb-3">
                        <label class="form-label">Nama Kategori</label>

                        <input type="text" name="nama_kategori" class="form-control" value="{{ old('nama_kategori') }}"
                            required>
                    </div>

                    {{-- Kategori --}}
                    <div class="mb-3">
                        <label class="form-label">Kategori</label>

                        <select name="kategori" id="kategori" class="form-select" required>
                            <option value="">-- Pilih Kategori --</option>

                            <option value="pemasukan" {{ old('kategori') == 'pemasukan' ? 'selected' : '' }}>
                                Pemasukan
                            </option>

                            <option value="pengeluaran" {{ old('kategori') == 'pengeluaran' ? 'selected' : '' }}>
                                Pengeluaran
                            </option>
                        </select>
                    </div>

                    {{-- Harga (hanya untuk pemasukan) --}}
                    <div class="mb-3" id="hargaField">
                        <label class="form-label">Harga</label>
                        <input type="number" name="harga" class="form-control" value="{{ old('harga') }}"
                            placeholder="Masukkan harga produk">
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">
                            Simpan
                        </button>

                        <a href="{{ route('kategori.index') }}" class="btn btn-outline-secondary">
                            Batal
                        </a>
                    </div>

                </form>

            </div>
        </div>
    </div>

    <script>
        const kategori = document.getElementById('kategori');
        const hargaField = document.getElementById('hargaField');

        function toggleHarga() {
            if (kategori.value === 'pemasukan') {
                hargaField.style.display = 'block';
            } else {
                hargaField.style.display = 'none';
            }
        }

        toggleHarga();
        kategori.addEventListener('change', toggleHarga);
    </script>

@endsection