@extends('layouts.app')

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5>Input Nota Pengeluaran Kas</h5> 

        <div class="justify-content-between align-items-right">
            <a href="{{ route('nota.index') }}" class="btn btn-secondary btn-sm"><em class="icon ni ni-arrow-left"></em>Kembali</a>

        </div>
    </div>

    <div class="card-body">

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

            <div class="mb-2">
                <label>Tanggal</label>
                <input type="date" class="form-control" name="tanggal" required>
            </div>

            <div class="mb-2">
                <label>Keterangan</label>
                <input type="text" class="form-control" name="keterangan" required>
            </div>

            <div class="mb-2">
                <label>Volume</label>
                <input type="text" class="form-control" name="vol" id="vol" required>
            </div>

            <div class="mb-2">
                <label>Satuan</label>
                <input type="text" class="form-control" name="satuan" id="satuan" required>
            </div>

            <div class="mb-2">
                <label>Harga Satuan</label>
                <input type="text" class="form-control rupiah-input" name="harga_satuan" id="harga_satuan" required>
            </div>

            <div class="mb-2">
                <label>Nominal</label>
                <input type="text" class="form-control rupiah-input" name="nominal" id="nominal" readonly>
            </div>

            <div class="mb-2">
                <label>Akun Pengeluaran (Beban)</label>
                <select name="akun_pengeluaran" class="form-control select2" required>
                    @foreach($akun_pengeluaran as $a)
                    <option value="{{ $a->id }}">{{ $a->kode_akun }} - {{ $a->nama_akun }}</option>
                    @endforeach
                </select>
            </div>

            <div class="mb-2">
                <label>Sumber Dana (Kas/Bank)</label>
                <select name="akun_sumber_dana" class="form-control select2" required>
                    @foreach($akun_kas as $a)
                    <option value="{{ $a->id }}">{{ $a->kode_akun }} - {{ $a->nama_akun }}</option>
                    @endforeach
                </select>
            </div>

            <div class="mb-2">
                <label>Upload Bukti (boleh lebih dari 1)</label>
                <input type="file" class="form-control" name="file[]" multiple accept=".jpg,.jpeg,.png,.pdf">
                <small class="text-muted">Format: JPG, JPEG, PNG, PDF. Maksimal 20MB per file.</small>
            </div>

            <button class="btn btn-primary mt-3">Simpan Nota</button>
        </form>

    </div>
</div>
@endsection

@push('scripts')
<!-- -->

<script>
    $(document).ready(function() {
        $('.select2').select2({ placeholder: "Pilih akun", allowClear: true, width: '100%' });

        const vol = $('#vol');
        const harga = $('#harga_satuan');
        const nominal = $('#nominal');

        function parseNumber(str) {
            if (!str) return 0;
            let s = String(str).trim();
            s = s.replace(/[^0-9,\.\-]/g, '');
            if (!s) return 0;

            const hasComma = s.includes(',');
            const hasDot = s.includes('.');

            if (hasComma && hasDot) {
                const lastDot = s.lastIndexOf('.');
                const lastComma = s.lastIndexOf(',');
                if (lastComma > lastDot) {
                    s = s.replace(/\./g, '').replace(',', '.');
                } else {
                    s = s.replace(/,/g, '');
                }
            } else if (hasDot && !hasComma) {
                if ((s.match(/\./g) || []).length > 1 || /^\d{1,3}(\.\d{3})+$/.test(s)) {
                    s = s.replace(/\./g, '');
                }
            } else if (hasComma && !hasDot) {
                if ((s.match(/,/g) || []).length > 1 || /^\d{1,3}(,\d{3})+$/.test(s)) {
                    s = s.replace(/,/g, '');
                } else {
                    s = s.replace(',', '.');
                }
            }

            const n = parseFloat(s);
            return isNaN(n) ? 0 : n;
        }

        function formatRupiah(num) {
            if (num === '' || isNaN(num) || num === null) return '';
            const parts = num.toString().split('.');
            let intPart = parts[0];
            let decPart = parts.length > 1 ? parts[1] : '';
            intPart = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
            return decPart ? intPart + ',' + decPart : intPart;
        }

        function formatRupiahValue(str) {
            if (!str) return '';
            let s = String(str).replace(/[^\d,]/g, '');
            const parts = s.split(',');
            let intPart = parts[0].replace(/^0+/, '') || '0';
            let decPart = parts[1] !== undefined ? parts[1].slice(0, 2) : '';
            let rgx = /(\d+)(\d{3})/;
            let out = intPart;
            while (rgx.test(out)) {
                out = out.replace(rgx, '$1' + '.' + '$2');
            }
            return parts.length > 1 ? out + ',' + decPart : out;
        }

        function updateNominal() {
            const v = parseNumber(vol.val());
            const h = parseNumber(harga.val());
            const product = v * h;
            if (vol.val() === '' || harga.val() === '' || isNaN(product) || product === 0) {
                nominal.val('');
            } else {
                nominal.val(formatRupiah(Math.round(product * 100) / 100));
            }
        }

        harga.on('input', function(e) {
            $(this).val(formatRupiahValue($(this).val()));
            updateNominal();
        });

        vol.on('input', updateNominal);

        // Validasi file upload
        $('input[name="file[]"]').on('change', function() {
            const files = this.files;
            const maxSize = 20 * 1024 * 1024; // 20MB in bytes
            const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'application/pdf'];
            
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                
                // Check file size
                if (file.size > maxSize) {
                    alert(`File "${file.name}" terlalu besar. Maksimal 20MB per file.`);
                    this.value = ''; // Clear the input
                    return false;
                }
                
                // Check file type
                if (!allowedTypes.includes(file.type)) {
                    alert(`File "${file.name}" tidak didukung. Hanya JPG, JPEG, PNG, dan PDF yang diperbolehkan.`);
                    this.value = ''; // Clear the input
                    return false;
                }
            }
        });
    });
</script>
@endpush