@extends('layouts.app')

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

@section('content')

    <div class="page-header">
        <div>
            <h1 class="page-title">
                Tambah {{ ucfirst($tipe ?? 'transaksi') }}
            </h1>
        </div>
    </div>

    <div class="content-narrow">

        <div class="form-shell">

            <div class="card-body">

                <form method="POST" action="{{ route('transaksi.store') }}" enctype="multipart/form-data">

                    @csrf
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    @php
                        $tipeFixed = $tipe && in_array($tipe, ['pemasukan', 'pengeluaran'], true)
                            ? $tipe
                            : 'pemasukan';
                    @endphp

                    <input type="hidden" name="tipe" value="{{ $tipeFixed }}">

                    {{-- Tanggal --}}
                    <div class="mb-3">
                        <label class="form-label fw-medium">
                            Tanggal
                        </label>

                        <input type="date" name="tanggal" class="form-control" value="{{ old('tanggal', date('Y-m-d')) }}"
                            required>
                    </div>

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

                        <label class="form-label fw-medium">
                            Nama Kategori
                        </label>

                        <select id="produk" name="id_kategori" class="form-select" required>

                            <option value="">- Pilih Nama Kategori -</option>

                            @foreach($categories as $cat)

                                <option value="{{ $cat->id }}" data-harga="{{ $cat->harga }}" {{ old('id_kategori') == $cat->id ? 'selected' : '' }}>

                                    {{ $cat->nama_kategori }}

                                </option>

                            @endforeach

                        </select>

                    </div>

                    {{-- Jumlah --}}
                    <div class="mb-3">

                        <label class="form-label fw-medium">

                            {{ $tipeFixed == 'pemasukan'
        ? 'Jumlah Terjual'
        : 'Jumlah' }}

                        </label>

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

                    {{-- Satuan --}}
                    <div class="mb-3">

                        <label class="form-label fw-medium">
                            Satuan
                        </label>

                        <select name="satuan" class="form-select" required>

                            <option value="">- Pilih Satuan -</option>

                            <option value="box" {{ old('satuan') == 'box' ? 'selected' : '' }}>
                                box
                            </option>

                            <option value="kg" {{ old('satuan') == 'kg' ? 'selected' : '' }}>
                                kg
                            </option>

                            <option value="liter" {{ old('satuan') == 'liter' ? 'selected' : '' }}>
                                liter
                            </option>

                            <option value="pack" {{ old('satuan') == 'pack' ? 'selected' : '' }}>
                                pack
                            </option>

                            <option value="pcs" {{ old('satuan') == 'pcs' ? 'selected' : '' }}>
                                pcs
                            </option>

                        </select>

                    </div>

                    {{-- Harga --}}
                    @if($tipeFixed == 'pemasukan')

                        <div class="mb-3">

                            <label class="form-label fw-medium">
                                Total Harga
                            </label>

                            <input type="text" id="totalHargaView" class="form-control" readonly>

                            <input type="hidden" id="totalNominal" name="nominal">

                        </div>

                    @else

                        <div class="mb-3">

                            <label class="form-label fw-medium">
                                Nominal
                            </label>

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

                    @endif

                    {{-- Upload Bukti --}}
                    @if($tipeFixed == 'pengeluaran')

                        <div class="mb-3">

                            <label class="form-label fw-medium">
                                Upload Bukti Nota
                            </label>

                            <input type="file" name="bukti" class="form-control" accept=".jpg,.jpeg,.png,.pdf">

                        </div>

                    @endif

                    <div class="form-actions">

                        <button type="submit" class="btn btn-primary">

                            Simpan

                        </button>

                        <a href="{{ route('transaksi.index', ['tipe' => $tipeFixed]) }}" class="btn btn-outline-secondary">

                            Batal

                        </a>

                    </div>

                </form>

            </div>

        </div>

    </div>

    @if($tipeFixed == 'pemasukan')

        <script>

            const produk = document.getElementById('produk');
            const kuantitas = document.getElementById('kuantitas');

            const total = document.getElementById('totalNominal');
            const totalView = document.getElementById('totalHargaView');

            function hitungTotal() {

                let harga = parseFloat(
                    produk.options[produk.selectedIndex]?.dataset.harga || 0
                );

                let qty = parseFloat(kuantitas.value || 0);

                let hasil = harga * qty;

                total.value = hasil;

                totalView.value = "Rp " + hasil.toLocaleString('id-ID');

            }

            produk.addEventListener('change', hitungTotal);
            kuantitas.addEventListener('input', hitungTotal);

            window.onload = hitungTotal;

        </script>

    @endif

    @if($tipeFixed == 'pengeluaran')
        <script>
            const nominalInput = document.getElementById('nominalInput');

            function formatRupiah(angka) {
                let numberString = angka.toString().replace(/[^,\d]/g, '');
                let split = numberString.split(',');
                let sisa = split[0].length % 3;
                let rupiah = split[0].substr(0, sisa);
                let ribuan = split[0].substr(sisa).match(/\d{3}/gi);

                if (ribuan) {
                    let separator = sisa ? '.' : '';
                    rupiah += separator + ribuan.join('.');
                }

                rupiah = split[1] !== undefined ? rupiah + ',' + split[1] : rupiah;
                return rupiah;
            }

            nominalInput.addEventListener('input', function(e) {
                this.value = formatRupiah(this.value);
            });

            nominalInput.addEventListener('keydown', function(e) {
                if (['Backspace', 'Delete', 'Tab', 'Escape', 'Enter', 'Home', 'End', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
                    return;
                }
                if (e.ctrlKey || e.metaKey) {
                    return;
                }
                if (!/\d/.test(e.key)) {
                    e.preventDefault();
                }
            });

            window.onload = function() {
                if (nominalInput.value) {
                    nominalInput.value = formatRupiah(nominalInput.value);
                }
            };
        </script>
    @endif

@endsection