@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => 'Edit Bukti Bank ' . ($header->is_in ? 'Masuk' : 'Keluar')])

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <h6>Edit Bukti Bank {{ $header->is_in ? 'Masuk' : 'Keluar' }}</h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('rptbbk.update', $header->id) }}" method="POST" id="formEdit">
                        @csrf
                        @method('PUT')

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Nama Proyek</label>
                                <input type="text" class="form-control" name="project_name"
                                    value="{{ $header->project_name }}" required>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Kode Mutasi</label>
                                <input type="text" class="form-control" name="kode_mutasi"
                                    value="{{ $header->kode_mutasi }}" required>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Nomor Bukti</label>
                                <input type="text" class="form-control" name="nomor_bukti"
                                    value="{{ $header->nomor_bukti }}" required>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label">Tanggal</label>
                                <input type="date" class="form-control" name="date" value="{{ $header->date }}"
                                    required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">{{ $header->is_in ? 'Diterima dari' : 'Dibayarkan kepada'
                                    }}</label>
                                <input type="text" class="form-control" name="dibayarkan_kepada"
                                    value="{{ $header->dibayarkan_kepada }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Nama Supplier</label>
                                <input type="text" class="form-control" name="supplier_name"
                                    value="{{ $header->supplier_name }}">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label class="form-label">Nama Perusahaan</label>
                                <input type="text" class="form-control" name="company_name"
                                    value="{{ $header->company_name }}">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label class="form-label">Keterangan</label>
                                <textarea class="form-control" name="keterangan"
                                    rows="3">{{ $header->keterangan }}</textarea>
                            </div>
                        </div>

                        <hr>
                        <h6 class="mb-3">Rekening Perusahaan</h6>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Nama Bank</label>
                                <input type="text" class="form-control" name="rekening_nama_bank"
                                    value="{{ $header->rekening_nama_bank }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Nomor Rekening</label>
                                <input type="text" class="form-control" name="rekening_nomor_akun"
                                    value="{{ $header->rekening_nomor_akun }}">
                            </div>
                        </div>

                        @if($header->is_in == 0)
                        <hr>
                        <h6 class="mb-3">Rekening Supplier</h6>
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label">Nama Bank</label>
                                <input type="text" class="form-control" name="supplier_nama_bank"
                                    value="{{ $header->supplier_nama_bank }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Nomor Rekening</label>
                                <input type="text" class="form-control" name="supplier_nomor_akun"
                                    value="{{ $header->supplier_nomor_akun }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Atas Nama</label>
                                <input type="text" class="form-control" name="supplier_nama_akun"
                                    value="{{ $header->supplier_nama_akun }}">
                            </div>
                        </div>
                        @endif

                        <hr>
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="mb-0">Detail Transaksi</h6>
                            <button type="button" class="btn btn-sm btn-primary" onclick="addRow()">
                                <i class="fas fa-plus"></i> Tambah Baris
                            </button>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-bordered" id="detailTable">
                                <thead style="background-color: #d3d3d3;">
                                    <tr>
                                        <th width="5%">No</th>
                                        <th width="35%">Kategori</th>
                                        <th width="35%">Detail Kategori</th>
                                        <th width="20%">Amount</th>
                                        <th width="5%">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="detailBody">
                                    @foreach($details as $index => $detail)
                                    <tr>
                                        <td class="text-center">{{ $index + 1 }}</td>
                                        <td>
                                            <input type="text" class="form-control"
                                                name="details[{{ $index }}][kategori]" value="{{ $detail->kategori }}"
                                                required>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control"
                                                name="details[{{ $index }}][detail_kategori]"
                                                value="{{ $detail->detail_kategori }}" required>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control text-end amount-input"
                                                name="details[{{ $index }}][amount]"
                                                value="{{ number_format($detail->amount, 2, ',', '.') }}" required>
                                        </td>
                                        <td class="text-center">
                                            <button type="button" class="btn btn-sm btn-danger"
                                                onclick="removeRow(this)">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr style="background-color: #f0f0f0;">
                                        <td colspan="3" class="text-end"><strong>TOTAL</strong></td>
                                        <td class="text-end"><strong id="totalAmount">0,00</strong></td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>

                        <hr>
                        <h6 class="mb-3">Tanda Tangan</h6>
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label">Penerima</label>
                                <input type="text" class="form-control" name="penerima_name"
                                    value="{{ $header->penerima_name }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Pembukuan</label>
                                <input type="text" class="form-control" name="pembukuan_name"
                                    value="{{ $header->pembukuan_name }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Mengetahui</label>
                                <input type="text" class="form-control" name="mengetahui_name"
                                    value="{{ $header->mengetahui_name }}">
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-12">
                                <a href="{{ route('rptbbk.show', $header->id) }}" class="btn btn-secondary">
                                    <i class="fas fa-arrow-left"></i> Batal
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> Simpan Perubahan
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
    let rowIndex = {{ count($details) }};

// Calculate total on page load
$(document).ready(function() {
    calculateTotal();
    
    // Format amount on input
    $(document).on('blur', '.amount-input', function() {
        let val = $(this).val();
        val = val.replace(/\./g, '').replace(/,/g, '.');
        if (!isNaN(val) && val !== '') {
            $(this).val(formatNumber(parseFloat(val)));
        }
        calculateTotal();
    });
    
    // Update row numbers when rows are added/removed
    $(document).on('change', '#detailBody', function() {
        updateRowNumbers();
    });
});

function addRow() {
    let newRow = `
        <tr>
            <td class="text-center">${rowIndex + 1}</td>
            <td>
                <input type="text" class="form-control" 
                    name="details[${rowIndex}][kategori]" required>
            </td>
            <td>
                <input type="text" class="form-control" 
                    name="details[${rowIndex}][detail_kategori]" required>
            </td>
            <td>
                <input type="text" class="form-control text-end amount-input" 
                    name="details[${rowIndex}][amount]" value="0,00" required>
            </td>
            <td class="text-center">
                <button type="button" class="btn btn-sm btn-danger" onclick="removeRow(this)">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        </tr>
    `;
    
    $('#detailBody').append(newRow);
    rowIndex++;
    updateRowNumbers();
    calculateTotal();
}

function removeRow(btn) {
    if ($('#detailBody tr').length > 1) {
        $(btn).closest('tr').remove();
        updateRowNumbers();
        calculateTotal();
    } else {
        Swal.fire({
            icon: 'warning',
            title: 'Perhatian',
            text: 'Minimal harus ada 1 baris detail!'
        });
    }
}

function updateRowNumbers() {
    $('#detailBody tr').each(function(index) {
        $(this).find('td:first').text(index + 1);
    });
}

function calculateTotal() {
    let total = 0;
    $('.amount-input').each(function() {
        let val = $(this).val();
        val = val.replace(/\./g, '').replace(/,/g, '.');
        if (!isNaN(val) && val !== '') {
            total += parseFloat(val);
        }
    });
    
    $('#totalAmount').text(formatNumber(total));
}

function formatNumber(num) {
    return num.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, '.');
}
</script>
@endpush