@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="card mb-4">
                            <div class="card-header py-2 text-white d-flex justify-content-between align-items-center" style="background-color:#8ac7e4;">
                                <h6 class="mb-0">Informasi Transaksi (Read-Only)</h6>
                                
                            </div>
                            <div class="card-body">
                                <div class="text-muted mb-3 fst-italic">
                                    <i class="fas fa-info-circle me-1"></i>
                                    Field di bawah ini <strong>tidak dapat diubah</strong> di halaman ini. Perbaharui melalui menu <strong>Transaksi</strong>, lalu klik <strong>Generate Ulang</strong> di Report Bukti Bank.
                                </div>
                                <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 }}" readonly>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Kode Mutasi</label>
                                        <input type="text" class="form-control" name="kode_mutasi"
                                            value="{{ $header->kode_mutasi }}" required readonly>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Tanggal</label>
                                        <input type="date" class="form-control" name="date" value="{{ $header->date }}" required readonly>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Nomor Bukti</label>
                                        <input type="text" class="form-control" name="nomor_bukti"
                                            value="{{ $header->nomor_bukti }}" required readonly>
                                    </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 }}" readonly>
                                    </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 }}" readonly>
                                    </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 }}" readonly>
                                    </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 }}" readonly>
                                    </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 }}" readonly>
                                    </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 }}" readonly>
                                    </div>
                                </div>
                                @endif

                                <hr>
                                <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>
                                            </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 readonly>
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control"
                                                        name="details[{{ $index }}][detail_kategori]"
                                                        value="{{ $detail->detail_kategori }}" readonly>
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control text-end amount-input"
                                                        name="details[{{ $index }}][amount]"
                                                        value="{{ number_format($detail->amount, 2, ',', '.') }}" required readonly>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                        <tfoot>
                                            <tr style="background-color: #f0f0f0;">
                                                <td colspan="3" class="text-center"><strong>TOTAL</strong></td>
                                                <td class="text-end"><strong id="totalAmount">0,00</strong></td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-3">
                                        <label class="form-label">PPN (Rp)</label>
                                        <input type="text" class="form-control text-end amount-input" name="ppn_amount"
                                            value="{{ number_format($header->ppn_amount ?? 0, 2, ',', '.') }}" readonly>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">PPH (Rp)</label>
                                        <input type="text" class="form-control text-end amount-input" name="pph_amount"
                                            value="{{ number_format($header->pph_amount ?? 0, 2, ',', '.') }}" readonly>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Persentase DP / Termin (%)</label>
                                        <input type="text" class="form-control text-end" name="dp_percentage"
                                            value="{{ $header->dp_percentage }}" readonly>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Urutan DP / Termin</label>
                                        <input type="text" class="form-control" name="dp_seq"
                                            value="{{ $header->dp_seq }}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card mb-4">
                            <div class="card-header py-2" style="background-color:#8ac7e4;">
                                <h6 class="mb-0">Informasi yang Dapat Diedit</h6>
                            </div>
                            <div class="card-body">
                                <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">Tanda Tangan</h6>
                                <div class="row mb-3">
                                    <div class="col-md-3">
                                        <label class="form-label">Penerima</label>
                                        <input type="text" class="form-control" name="penerima_name"
                                            value="{{ $header->penerima_name }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Pembukuan</label>
                                        <input type="text" class="form-control" name="pembukuan_name"
                                            value="{{ $header->pembukuan_name }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Kasir</label>
                                        <input type="text" class="form-control" name="kasir_name"
                                            value="{{ $header->kasir_name ?? '' }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Mengetahui</label>
                                        <input type="text" class="form-control" name="mengetahui_name"
                                            value="{{ $header->mengetahui_name }}">
                                    </div>
                                </div>
                            </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