@extends('dashboard.layouts.main')

@section('container')
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Edit Transaksi</h1>
    </div>

    <div class="col-lg-8">
        <form method="post" action="{{ url('') }}/transaksi_produk/{{ $transaksi_produk->id }}" class="mb-5" enctype="multipart/form-data">
            @method('put')
            @csrf
            <div class="mb-3">
                <label for="produk" class="form-label">Barang</label>
                <select class="form-select @error('produk_id') is-invalid @enderror" name="produk_id" id="produk_id" required>
                    <option selected disabled>-- Pilih barang --</option>
                    @foreach ($produk as $pr)
                        <option value="{{ $pr->id }}" {{ $transaksi_produk->produk_id == $pr->id ? 'selected' : '' }}>
                            {{ $pr->nm_barang }}
                        </option>
                    @endforeach
                </select>
                @error('produk_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="mb-3 col-6">
                <label for="harga_jual" class="form-label">Harga Jual</label>
                <input type="number" class="form-control @error('harga_jual') is-invalid @enderror" id="harga_jual" name="harga_jual" required value="{{ old('harga_jual', $transaksi_produk->harga_jual) }}">
                @error('harga_jual')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
            </div>
            <div class="mb-3 col-6">
                <label for="jml_jual" class="form-label">Jumlah Jual</label>
                <input type="number" class="form-control @error('jml_jual') is-invalid @enderror" id="jml_jual" name="jml_jual" required value="{{ old('jml_jual', $transaksi_produk->jml_jual) }}">
                @error('jml_jual')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
            </div>
            <div class="mb-3 col-6">
                <label for="total" class="form-label">Total</label>
                <input style="background-color:rgb(228, 205, 205)" type="number" class="form-control @error('total') is-invalid @enderror" id="total" name="total" required readonly value="{{ old('total', $transaksi_produk->total) }}">
                @error('total')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
            </div>  
            <button type="submit" class="btn btn-primary">Update</button>
        </form>
    </div>

    
 <script>
    document.addEventListener('DOMContentLoaded', function () {
        const produkSelect = document.getElementById('produk_id');
        const hargaInput = document.getElementById('harga_jual');
        const jumlahInput = document.getElementById('jml_jual');
        const totalInput = document.getElementById('total');

        produkSelect.addEventListener('change', function () {
            const produkId = this.value;
            if (produkId) {
                fetch(`{{ url('') }}/produk-olahan/${produkId}`)

                    .then(response => response.json())
                    .then(data => {
                        console.log('Data dari server:', data);
                        hargaInput.value = data.harga_jual || 0;
                        hitungTotal();
                    })
                    .catch(() => {
                        hargaInput.value = 0;
                        totalInput.value = 0;
                    });
            }
        });

        jumlahInput.addEventListener('input', function () {
            hitungTotal();
        });
        hargaInput.addEventListener('input', function () {
            hitungTotal();
        });

        function hitungTotal() {
            const harga = parseFloat(hargaInput.value) || 0;
            const jumlah = parseFloat(jumlahInput.value) || 0;
            totalInput.value = harga * jumlah;
        }
    });
</script>

@endsection