@extends('layouts.app')

@section('title', 'Bayar Hutang')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">Pembayaran Hutang</h5>
                    <button type="button" class="btn btn-primary btn-sm" onclick="openModal()">
                        <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="me-1">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                        </svg>
                        Tambah Pembayaran
                    </button>
                </div>
                <div class="card-body">
                    <!-- Summary Cards -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card bg-primary text-white">
                                <div class="card-body">
                                    <h6 class="card-title">Total Transaksi</h6>
                                    <h3 class="mb-0">{{ number_format($summary->total_transactions ?? 0) }}</h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card bg-success text-white">
                                <div class="card-body">
                                    <h6 class="card-title">Total Bayar</h6>
                                    <h3 class="mb-0">Rp {{ number_format($summary->total_bayar ?? 0, 0, ',', '.') }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Table -->
                    <table id="bayarHutangTable" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>No. Bukti</th>
                                <th>Tanggal</th>
                                <th>Supplier</th>
                                <th>Akun</th>
                                <th>Jumlah</th>
                                <th>Keterangan</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Form -->
<div class="modal fade" id="bayarHutangModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Tambah Pembayaran Hutang</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="bayarHutangForm">
                <div class="modal-body">
                    <input type="hidden" id="no_bukti" name="no_bukti">

                    <!-- Atas -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="tanggal" class="form-label">Tanggal <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" id="tanggal" name="tanggal" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="supplier" class="form-label">Supplier <span class="text-danger">*</span></label>
                                <select class="form-control select2" id="supplier" name="supplier" required style="width: 100%;">
                                    <option value="">Pilih Supplier</option>
                                    @foreach($suppliers as $supp)
                                        <option value="{{ $supp->nama }}">{{ $supp->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="akun" class="form-label">Akun Bank <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="akun" name="akun" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="keterangan" class="form-label">Keterangan</label>
                                <input type="text" class="form-control" id="keterangan" name="keterangan">
                            </div>
                        </div>
                    </div>

                    <!-- Bawah - Tagihan dari Hutang -->
                    <div class="mt-4">
                        <h6 class="mb-3">Daftar Tagihan</h6>
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm" id="tagihanTable">
                                <thead>
                                    <tr>
                                        <th>No. Transaksi</th>
                                        <th>Tanggal</th>
                                        <th>Tagihan</th>
                                        <th>Jumlah Bayar</th>
                                        <th width="50">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="tagihanTableBody">
                                    <!-- Items will be loaded here -->
                                </tbody>
                                <tfoot>
                                    <tr class="table-primary">
                                        <th colspan="3" class="text-end">Total:</th>
                                        <th><input type="number" class="form-control form-control-sm" id="total_bayar" name="total_bayar" readonly></th>
                                        <th></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- View Modal -->
<div class="modal fade" id="viewModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detail Pembayaran Hutang</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="viewContent">
                <!-- Content will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let tagihanData = [];

$(document).ready(function() {
    // Initialize DataTable
    $('#bayarHutangTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route('bayar-hutang.data') }}',
        columns: [
            { data: 'no_bukti' },
            { data: 'tanggal_format' },
            { data: 'supplier' },
            { data: 'akun' },
            { data: 'jumlah_format' },
            { data: 'keterangan' },
            { data: 'action', orderable: false, searchable: false }
        ],
        order: [[1, 'desc']]
    });

    // Initialize Select2
    $('.select2').select2();

    // Load tagihan when supplier changes
    $('#supplier').on('change', function() {
        const supplier = $(this).val();
        if (supplier) {
            loadTagihanBySupplier(supplier);
        } else {
            $('#tagihanTableBody').empty();
            tagihanData = [];
            updateTotal();
        }
    });

    // Form submit
    $('#bayarHutangForm').on('submit', function(e) {
        e.preventDefault();

        // Build items array
        const items = [];
        $('#tagihanTableBody tr').each(function() {
            const row = $(this);
            items.push({
                no_transaksi: row.find('input[name="no_transaksi"]').val(),
                tanggal: row.find('input[name="tanggal"]').val(),
                tagihan: parseFloat(row.find('input[name="tagihan"]').val()),
                jumlah_bayar: parseFloat(row.find('input[name="jumlah_bayar"]').val()) || 0
            });
        });

        if (items.length === 0) {
            Swal.fire('Error', 'Pilih minimal satu tagihan', 'error');
            return;
        }

        const formData = new FormData();
        formData.append('tanggal', $('#tanggal').val());
        formData.append('supplier', $('#supplier').val());
        formData.append('akun', $('#akun').val());
        formData.append('keterangan', $('#keterangan').val());

        // Add items as JSON string
        items.forEach((item, index) => {
            formData.append(`items[${index}][no_transaksi]`, item.no_transaksi);
            formData.append(`items[${index}][tanggal]`, item.tanggal);
            formData.append(`items[${index}][tagihan]`, item.tagihan);
            formData.append(`items[${index}][jumlah_bayar]`, item.jumlah_bayar);
        });

        const noBukti = $('#no_bukti').val();
        const url = noBukti ? `{{ route('bayar-hutang.update', ':no_bukti') }}`.replace(':no_bukti', noBukti) : '{{ route('bayar-hutang.store') }}';

        // Add _method for PUT
        if (noBukti) {
            formData.append('_method', 'PUT');
        }

        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                Swal.fire('Success', response.message, 'success');
                $('#bayarHutangModal').modal('hide');
                $('#bayarHutangTable').DataTable().ajax.reload();
            },
            error: function(xhr) {
                let message = xhr.responseJSON?.message || 'Terjadi kesalahan';
                Swal.fire('Error', message, 'error');
            }
        });
    });

    // Update total when jumlah_bayar changes
    $(document).on('change', 'input[name="jumlah_bayar"]', function() {
        updateTotal();
    });
});

function loadTagihanBySupplier(supplier) {
    $.get(`{{ route('bayar-hutang.get-tagihan-by-supplier', ':supplier') }}`.replace(':supplier', supplier))
        .done(function(response) {
            if (response.success) {
                tagihanData = response.data;
                renderTagihanTable(tagihanData);
            }
        })
        .fail(function(xhr) {
            Swal.fire('Error', xhr.responseJSON?.message || 'Gagal memuat data tagihan', 'error');
        });
}

function renderTagihanTable(data) {
    const tbody = $('#tagihanTableBody');
    tbody.empty();

    data.forEach(function(item, index) {
        const row = `
            <tr data-index="${index}">
                <td>
                    <input type="hidden" name="no_transaksi" value="${item.no_transaksi}">
                    ${item.no_transaksi}
                </td>
                <td>
                    <input type="hidden" name="tanggal" value="${item.tanggal}">
                    ${formatDate(item.tanggal)}
                </td>
                <td>
                    <input type="hidden" name="tagihan" value="${item.tagihan}">
                    Rp ${formatNumber(item.tagihan)}
                </td>
                <td>
                    <input type="number" class="form-control form-control-sm" name="jumlah_bayar"
                           value="${item.tagihan}" min="0" step="0.01" max="${item.tagihan}">
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger" onclick="removeTagihanRow(this)">
                        <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </td>
            </tr>
        `;
        tbody.append(row);
    });

    updateTotal();
}

function removeTagihanRow(btn) {
    $(btn).closest('tr').remove();
    updateTotal();
}

function updateTotal() {
    let total = 0;
    $('input[name="jumlah_bayar"]').each(function() {
        total += parseFloat($(this).val()) || 0;
    });
    $('#total_bayar').val(total);
}

function openModal() {
    $('#modalTitle').text('Tambah Pembayaran Hutang');
    $('#bayarHutangForm')[0].reset();
    $('#no_bukti').val('');
    $('#supplier').val(null).trigger('change');
    $('#tagihanTableBody').empty();
    tagihanData = [];
    updateTotal();
    $('#bayarHutangModal').modal('show');
}

function viewBayarHutang(noBukti) {
    $.get(`{{ route('bayar-hutang.show', ':no_bukti') }}`.replace(':no_bukti', noBukti))
        .done(function(response) {
            if (response.success) {
                const data = response.data.bayar_hutang;
                const html = `
                    <table class="table table-bordered">
                        <tr><th>No. Bukti</th><td>${data.no_bukti}</td></tr>
                        <tr><th>Tanggal</th><td>${formatDate(data.tanggal)}</td></tr>
                        <tr><th>Supplier</th><td>${data.supplier}</td></tr>
                        <tr><th>Akun Bank</th><td>${data.akun}</td></tr>
                        <tr><th>Jumlah</th><td>Rp ${formatNumber(data.jumlah)}</td></tr>
                        <tr><th>Keterangan</th><td>${data.keterangan || '-'}</td></tr>
                    </table>
                `;
                $('#viewContent').html(html);
                $('#viewModal').modal('show');
            }
        });
}

function editBayarHutang(noBukti) {
    Swal.fire('Info', 'Fitur edit belum tersedia untuk modul ini', 'info');
}

function deleteBayarHutang(noBukti) {
    Swal.fire({
        title: 'Hapus Data?',
        text: 'Data yang dihapus tidak dapat dikembalikan!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Ya, hapus!',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: `{{ route('bayar-hutang.destroy', ':no_bukti') }}`.replace(':no_bukti', noBukti),
                type: 'DELETE',
                success: function(response) {
                    Swal.fire('Terhapus!', response.message, 'success');
                    $('#bayarHutangTable').DataTable().ajax.reload();
                },
                error: function(xhr) {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal menghapus data', 'error');
                }
            });
        }
    });
}

function formatDate(dateString) {
    if (!dateString) return '-';
    const date = new Date(dateString);
    return date.toLocaleDateString('id-ID');
}

function formatNumber(num) {
    return new Intl.NumberFormat('id-ID').format(num);
}
</script>
@endpush