@push('scripts')
    <script>
      //if jenis_transaksi == "non anggaran" hide pilihan-pagu-anggaran
      const jenis_transaksi_input = document.querySelectorAll('input[name="jenis_transaksi"]');
      const pilihan_pagu_anggaran = document.querySelector('#pilihan-pagu-anggaran');
      jenis_transaksi_input.forEach((input) => {
          input.addEventListener('change', (e) => {
              if (e.target.value == 'non anggaran') {
                  pilihan_pagu_anggaran.style.display = 'none';
              } else {
                  if(e.target.value == "pendapatan"){
                      const pagu_pendapatan = document.querySelectorAll('.pagu-pendapatan');
                      pagu_pendapatan.forEach((option) => {
                          option.style.display = 'block';
                      });
                      const pagu_pengeluaran = document.querySelectorAll('.pagu-pengeluaran');
                      pagu_pengeluaran.forEach((option) => {
                          option.style.display = 'none';
                      });
                  } else {
                      const pagu_pendapatan = document.querySelectorAll('.pagu-pendapatan');
                      pagu_pendapatan.forEach((option) => {
                          option.style.display = 'none';
                      });
                      const pagu_pengeluaran = document.querySelectorAll('.pagu-pengeluaran');
                      pagu_pengeluaran.forEach((option) => {
                          option.style.display = 'block';
                      });
                  }
                  pilihan_pagu_anggaran.style.display = 'block';
              }
          });
      });

    </script>
@endpush

<div class="w-full flex gap-4">
    <div class="w-full md:w-1/2">
        <div class="field">
            <label class="label">Tanggal Transaksi</label>
            <div class="field-body">
                <div class="control">
                    <input class="input" name="tanggal_transaksi" type="date" placeholder="Tanggal Transaksi"
                        value="{{ old('tanggal_transaksi', @$data->tanggal_transaksi) }}">

                </div>
                @error('tanggal_transaksi')
                    <p class="help is-danger text-red-500">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="field">
          <label class="label">Nominal</label>
          <div class="field-body">
              <div class="control">
                  <input class="input" name="nominal_transaksi" type="number" placeholder="Nominal..."
                      value="{{ old('nominal_transaksi', @$data->nominal_transaksi) }}">

              </div>
              @error('nominal_transaksi')
                  <p class="help is-danger text-red-500">{{ $message }}</p>
              @enderror
          </div>
      </div>

        <div class="field">
            <label class="label">Jenis Transaksi</label>
            <div class="field-body">
                <div class="field grouped multiline">
                    <div class="control">
                        <label class="radio">
                            <input type="radio" name="jenis_transaksi" value="pendapatan" @checked(old('jenis_transaksi',@$data->jenis_transaksi) == 'pendapatan') >
                            <span class="check"></span>
                            <span class="control-label">Pendapatan</span>
                        </label>
                    </div>
                    <div class="control">
                        <label class="radio">
                            <input type="radio" name="jenis_transaksi" @checked(old('jenis_transaksi',@$data->jenis_transaksi) == 'pengeluaran') value="pengeluaran">
                            <span class="check"></span>
                            <span class="control-label">Pengeluaran</span>
                        </label>
                    </div>
                    <div class="control">
                        <label class="radio">
                            <input type="radio" name="jenis_transaksi" @checked(old('jenis_transaksi',@$data->jenis_transaksi) == 'non anggaran') value="non anggaran">
                            <span class="check"></span>
                            <span class="control-label">Non Anggaran</span>
                        </label>
                    </div>
                </div>
            </div>
            @error('jenis_transaksi')
                <p class="help is-danger text-red-500">{{ $message }}</p>
            @enderror
        </div>

        <div class="field" id="pilihan-pagu-anggaran">
          <label class="label">Pagu Anggaran</label>
          <div class="field-body">
              <div class="control">
                  <div class="select">
                      <select name="komponen_akun_detail_id" id="komponen_akun_detail_id">
                          <option value="">Pilih Pagu Anggaran</option>
                          @foreach ($paguPendapatans as $item)
                              <option value="{{ $item->id }}" class="pagu-pendapatan" @selected(old('komponen_akun_detail_id',@$data->komponen_akun_detail_id) == $item->id) @if(old('jenis_transaksi',@$data->jenis_transaksi) == 'pengeluaran') style="display: none;" @endif>{{$item->komponen_akun->akun->kode_akun}} - {{$item->keterangan}} : {{number_format($item->jumlah)}}</option>
                          @endforeach
                          @foreach ($paguPengeluarans as $item)
                              <option value="{{ $item->id }}" class="pagu-pengeluaran" @selected(old('komponen_akun_detail_id',@$data->komponen_akun_detail_id) == $item->id) @if(old('jenis_transaksi',@$data->jenis_transaksi) == 'pendapatan') style="display: none;" @endif>{{$item->komponen_akun->akun->kode_akun}} - {{$item->keterangan}} : {{number_format($item->jumlah)}}</option>
                          @endforeach
                      </select>
                  </div>
              </div>
              @error('komponen_akun_detail_id')
                  <p class="help is-danger text-red-500">{{ $message }}</p>
              @enderror
          </div>
      </div>
        <div class="field">
            <label class="label">Metode Transaksi</label>
            <div class="field-body">
                <div class="field grouped multiline">
                    <div class="control">
                        <label class="radio">
                            <input type="radio" name="metode_transaksi" @checked(old('metode_transaksi',@$data->metode_transaksi) == 'tunai') value="tunai" checked>
                            <span class="check"></span>
                            <span class="control-label">Tunai</span>
                        </label>
                    </div>
                    <div class="control">
                        <label class="radio">
                            <input type="radio" name="metode_transaksi" @checked(old('metode_transaksi',@$data->metode_transaksi) == 'transfer') value="transfer">
                            <span class="check"></span>
                            <span class="control-label">Transfer</span>
                        </label>
                    </div>

                </div>
            </div>
            @error('metode_transaksi')
                <p class="help is-danger text-red-500">{{ $message }}</p>
            @enderror
        </div>
    </div>

    <div class="w-full md:w-1/2">
      <div class="field">
        <label class="label">Keterangan</label>
        <div class="field-body">
            <div class="control">
                <input class="input" name="keterangan" type="text" placeholder="Keterangan..."
                    value="{{ old('keterangan', @$data->keterangan) }}">

            </div>
            @error('keterangan')
                <p class="help is-danger text-red-500">{{ $message }}</p>
            @enderror
        </div>
    </div>
    </div>



</div>