@extends('layouts.app')

@section('content')
<div class="nk-block-head nk-block-head-sm">
    <div class="nk-block-between">
        <div class="nk-block-head-content">
            <h3 class="nk-block-title page-title">Tambah Kas Bon</h3>
            <div class="nk-block-des text-soft">
                <p>Form untuk menambah data kas bon baru.</p>
            </div>
        </div>
        <div class="nk-block-head-content">
            <a href="{{ route('yayasan.transaksi.kas-bon.index') }}" class="btn btn-outline-light bg-white d-none d-sm-inline-flex">
                <em class="icon ni ni-arrow-left"></em>
                <span>Kembali</span>
            </a>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form action="{{ route('yayasan.transaksi.kas-bon.store') }}" method="POST" id="kasBonForm">
            @csrf
            
            <div class="row g-3">
                {{-- Tanggal Transaksi --}}
                <div class="col-md-6">
                    <label class="form-label">Tanggal Transaksi <span class="text-danger">*</span></label>
                    <input type="text" class="form-control date-picker" name="tanggal_transaksi" 
                           value="{{ old('tanggal_transaksi', date('d/m/Y')) }}" 
                           placeholder="dd/mm/yyyy" required>
                    @error('tanggal_transaksi')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Kode Transaksi --}}
                <div class="col-md-6">
                    <label class="form-label">Kode Transaksi</label>
                    <input type="text" class="form-control" name="kode_transaksi" 
                           value="{{ old('kode_transaksi', $nextNomorBukti) }}" 
                           placeholder="Kode transaksi (opsional)">
                    @error('kode_transaksi')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>


                {{-- Program Kegiatan - Data dari Program Kegiatan --}}
                <div class="col-md-6">
                    <label class="form-label">Program Kegiatan <span class="text-danger">*</span></label>
                    <select class="form-select select2" name="akun_program_kegiatan" id="akun_program_kegiatan" required>
                        <option value="">Pilih Program Kegiatan</option>
                        @foreach($programKegiatans as $program)
                            @if($program->kode_akun)
                                <option value="{{ $program->kode_akun }}" 
                                        data-program-id="{{ $program->id }}"
                                        {{ old('akun_program_kegiatan') == $program->kode_akun ? 'selected' : '' }}>
                                    {{ $program->kode_akun }} - {{ $program->nama }}
                                </option>
                            @endif
                        @endforeach
                    </select>
                    <input type="hidden" name="program_kegiatan_id" id="program_kegiatan_id" value="{{ old('program_kegiatan_id') }}">
                    @error('akun_program_kegiatan')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                    @error('program_kegiatan_id')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Nominal --}}
                <div class="col-md-6">
                    <label class="form-label">Nominal <span class="text-danger">*</span></label>
                    <input type="text" class="form-control currency-input" name="nominal" 
                           value="{{ old('nominal') }}" 
                           placeholder="Masukkan nominal" required>
                    @error('nominal')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>


                {{-- Deskripsi --}}
                <div class="col-12">
                    <label class="form-label">Deskripsi <span class="text-danger">*</span></label>
                    <textarea class="form-control" name="deskripsi" rows="3" 
                              placeholder="Masukkan deskripsi kas bon" required>{{ old('deskripsi') }}</textarea>
                    @error('deskripsi')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            {{-- Action Buttons --}}
            <div class="row mt-4">
                <div class="col-12">
                    <div class="">
                        <button type="submit" class="btn btn-primary">
                            <em class="icon ni ni-save"></em>
                            <span>Simpan</span>
                        </button>
                        <a href="{{ route('yayasan.transaksi.kas-bon.index') }}" class="btn btn-outline-secondary">
                            <em class="icon ni ni-arrow-left"></em>
                            <span>Batal</span>
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const currencyInputs = document.querySelectorAll('.currency-input');
        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] ? parts[1].slice(0, 2) : '';
            let rgx = /(\d+)(\d{3})/;
            let out = intPart;
            while (rgx.test(out)) {
                out = out.replace(rgx, '$1' + '.' + '$2');
            }
            return decPart ? out + ',' + decPart : out;
        }
        currencyInputs.forEach(input => {
            input.addEventListener('input', function(e) {
                const caretEnd = e.target.selectionEnd;
                e.target.value = formatRupiahValue(e.target.value);
                e.target.setSelectionRange(e.target.value.length, e.target.value.length);
            });
        });

        // Date picker initialization
        if (typeof flatpickr !== 'undefined') {
            flatpickr('.date-picker', {
                dateFormat: 'd/m/Y',
                locale: 'id'
            });
        }

        // Initialize Select2
        $('.select2').select2({
            placeholder: 'Pilih opsi...',
            allowClear: true,
            width: '100%'
        });

        // Handle Akun Program Kegiatan change
        $('#akun_program_kegiatan').on('change', function() {
            const selectedOption = $(this).find('option:selected');
            const programId = selectedOption.data('program-id');
            $('#program_kegiatan_id').val(programId || '');
        });

        // Set initial program_kegiatan_id if there's old value
        const initialAkunProgram = $('#akun_program_kegiatan').val();
        if (initialAkunProgram) {
            const selectedOption = $('#akun_program_kegiatan').find('option:selected');
            const programId = selectedOption.data('program-id');
            $('#program_kegiatan_id').val(programId || '');
        }

        // Form validation
        const form = document.getElementById('kasBonForm');
        form.addEventListener('submit', function(e) {
            const nominalInput = document.querySelector('input[name="nominal"]');
            if (nominalInput.value) {
                let v = nominalInput.value.replace(/\./g, '');
                nominalInput.value = v.split(',')[0];
            }
        });
    });
</script>
@endpush