@extends('layouts.app')

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

@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 Piutang</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="bayarPiutangTable" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>No. Bukti</th>
                                <th>Tanggal</th>
                                <th>Customer</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="bayarPiutangModal" 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 Piutang</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="bayarPiutangForm">
                <div class="modal-body">
                    <input type="hidden" id="no_bukti" name="no_bukti">

                    <!-- Atas -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label 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="form-group">
                                <label class="form-label">Customer <span class="text-danger">*</span></label>
                                <select name="customer" id="customer" class="form-control form-select select2-customer" required>
                                    <option value="">Pilih Customer</option>
                                    @foreach($customers as $cust)
                                        <option value="{{ $cust->nama }}">{{ $cust->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label 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="form-group">
                                <label class="form-label">Keterangan</label>
                                <input type="text" class="form-control" id="keterangan" name="keterangan">
                            </div>
                        </div>
                    </div>

                    <!-- Bawah - Tagihan dari Taktivitas -->
                    <div class="mt-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="mb-0">Daftar Tagihan</h6>
                            <button type="button" class="btn btn-sm btn-success" onclick="addTagihanRow()">
                                <svg width="12" height="12" 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 Tagihan
                            </button>
                        </div>
                        <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>Sudah Dibayar</th>
                                        <th>Sisa</th>
                                        <th>Jumlah Bayar</th>
                                        <th width="50">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="tagihanTableBody">
                                    <!-- Items will be added here -->
                                </tbody>
                                <tfoot>
                                    <tr class="table-primary">
                                        <th colspan="5" 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 Piutang</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 = [];
let selectedNoTransaksi = [];

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

    // Initialize Select2
    $('.select2, .select2-customer').select2({
        dropdownParent: $('#bayarPiutangModal')
    });

    // Load tagihan when customer changes
    $('#customer').on('change', function() {
        const customer = $(this).val();
        console.log('Customer changed to:', customer);

        if (customer) {
            loadTagihanByCustomer(customer);
        } else {
            $('#tagihanTableBody .no-transaksi-select').each(function() {
                $(this).select2('destroy');
            });
            $('#tagihanTableBody').empty();
            tagihanData = [];
            selectedNoTransaksi = [];
            updateTotal();
        }
    });

    // Form submit
    $('#bayarPiutangForm').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('customer', $('#customer').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-piutang.update', ':no_bukti') }}`.replace(':no_bukti', noBukti) : '{{ route('bayar-piutang.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');
                $('#bayarPiutangModal').modal('hide');
                $('#bayarPiutangTable').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 loadTagihanByCustomer(customer) {
    console.log('Loading tagihan for customer:', customer);

    $.get(`{{ route('bayar-piutang.get-tagihan-by-customer', ':customer') }}`.replace(':customer', customer))
        .done(function(response) {
            console.log('Response:', response);
            if (response.success) {
                tagihanData = response.data;
                console.log('Tagihan data loaded:', tagihanData);
                // Clear existing rows and destroy select2 instances
                $('#tagihanTableBody .no-transaksi-select').each(function() {
                    $(this).select2('destroy');
                });
                $('#tagihanTableBody').empty();
                selectedNoTransaksi = [];
                updateTotal();
            } else {
                console.error('Response not success:', response);
                Swal.fire('Error', response.message || 'Gagal memuat data tagihan', 'error');
            }
        })
        .fail(function(xhr) {
            console.error('AJAX failed:', xhr);
            Swal.fire('Error', xhr.responseJSON?.message || 'Gagal memuat data tagihan', 'error');
        });
}

function addTagihanRow() {
    console.log('addTagihanRow called');

    const customer = $('#customer').val();
    console.log('Selected customer:', customer);

    if (!customer) {
        Swal.fire('Error', 'Pilih customer terlebih dahulu', 'error');
        return;
    }

    const rowIndex = $('#tagihanTableBody tr').length;
    console.log('Row index:', rowIndex);

    const row = `
        <tr data-row-index="${rowIndex}">
            <td>
                <select class="form-control form-control-sm no-transaksi-select" style="width: 100%;">
                    <option value="">Pilih No. Transaksi</option>
                </select>
                <input type="hidden" name="no_transaksi" value="">
                <input type="hidden" name="tanggal" value="">
                <input type="hidden" name="tagihan" value="">
            </td>
            <td class="tanggal-cell">-</td>
            <td class="tagihan-cell">-</td>
            <td class="sudah-dibayar-cell">-</td>
            <td class="sisa-cell">-</td>
            <td>
                <input type="number" class="form-control form-control-sm" name="jumlah_bayar"
                       value="0" min="0" step="0.01">
            </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>
    `;

    $('#tagihanTableBody').append(row);
    console.log('Row appended');

    // Initialize select2 for the new dropdown
    const $select = $('#tagihanTableBody tr:last .no-transaksi-select');

    $select.select2({
        ajax: {
            url: `{{ route('bayar-piutang.get-tagihan-by-customer', ':customer') }}`.replace(':customer', customer),
            dataType: 'json',
            delay: 250,
            data: function (params) {
                console.log('Select2 searching for:', params.term);
                return {
                    search: params.term
                };
            },
            processResults: function (data) {
                console.log('Select2 processResults:', data);
                // Filter out already selected transactions
                const availableData = data.data.filter(item => !selectedNoTransaksi.includes(item.no_transaksi));

                console.log('Available data after filter:', availableData);

                return {
                    results: availableData.map(item => ({
                        id: item.no_transaksi,
                        text: `${item.no_transaksi} - ${formatDate(item.tanggal)} - Tagihan: Rp ${formatNumber(item.tagihan)} - Sisa: Rp ${formatNumber(item.sisa)}`,
                        data: item
                    }))
                };
            }
        },
        placeholder: 'Pilih No. Transaksi',
        allowClear: true,
        minimumInputLength: 0,
        dropdownParent: $('#bayarPiutangModal')
    });

    console.log('Select2 initialized for row', rowIndex);

    // Handle select event
    $select.on('select2:select', function (e) {
        console.log('Select2:select event fired');
        const data = e.params.data.data;
        const row = $(this).closest('tr');

        console.log('Selected data:', data);

        // Remove previous selection from selectedNoTransaksi if exists
        const prevNoTransaksi = row.find('input[name="no_transaksi"]').val();
        if (prevNoTransaksi) {
            selectedNoTransaksi = selectedNoTransaksi.filter(nt => nt !== prevNoTransaksi);
        }

        // Fill hidden inputs
        row.find('input[name="no_transaksi"]').val(data.no_transaksi);
        row.find('input[name="tanggal"]').val(data.tanggal);
        row.find('input[name="tagihan"]').val(data.tagihan);

        // Display values
        row.find('.tanggal-cell').text(formatDate(data.tanggal));
        row.find('.tagihan-cell').text('Rp ' + formatNumber(data.tagihan));
        row.find('.sudah-dibayar-cell').text('Rp ' + formatNumber(data.sudah_dibayar || 0));
        row.find('.sisa-cell').text('Rp ' + formatNumber(data.sisa));

        // Auto-fill jumlah bayar with sisa
        row.find('input[name="jumlah_bayar"]').val(data.sisa).attr('max', data.sisa);

        // Add to selected
        selectedNoTransaksi.push(data.no_transaksi);

        console.log('Updated selectedNoTransaksi:', selectedNoTransaksi);

        updateTotal();
    });

    // Handle unselect event (when clearing selection)
    $select.on('select2:unselect', function (e) {
        const row = $(this).closest('tr');
        const prevNoTransaksi = row.find('input[name="no_transaksi"]').val();

        // Remove from selected
        if (prevNoTransaksi) {
            selectedNoTransaksi = selectedNoTransaksi.filter(nt => nt !== prevNoTransaksi);
        }

        // Clear fields
        row.find('input[name="no_transaksi"]').val('');
        row.find('input[name="tanggal"]').val('');
        row.find('input[name="tagihan"]').val('');
        row.find('.tanggal-cell').text('-');
        row.find('.tagihan-cell').text('-');
        row.find('.sudah-dibayar-cell').text('-');
        row.find('.sisa-cell').text('-');
        row.find('input[name="jumlah_bayar"]').val(0);

        updateTotal();
    });
}

function removeTagihanRow(btn) {
    const row = $(btn).closest('tr');
    const noTransaksi = row.find('input[name="no_transaksi"]').val();

    // Destroy select2 before removing row
    row.find('.no-transaksi-select').select2('destroy');

    // Remove from selected
    if (noTransaksi) {
        selectedNoTransaksi = selectedNoTransaksi.filter(nt => nt !== noTransaksi);
    }

    row.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 Piutang');
    $('#bayarPiutangForm')[0].reset();
    $('#no_bukti').val('');
    $('#customer').val(null).trigger('change');
    $('#tagihanTableBody').empty();
    tagihanData = [];
    selectedNoTransaksi = [];
    updateTotal();
    $('#bayarPiutangModal').modal('show');
}

function viewBayarPiutang(noBukti) {
    $.get(`{{ route('bayar-piutang.show', ':no_bukti') }}`.replace(':no_bukti', noBukti))
        .done(function(response) {
            if (response.success) {
                const data = response.data.bayar_piutang;
                const html = `
                    <table class="table table-bordered">
                        <tr><th>No. Bukti</th><td>${data.no_bukti}</td></tr>
                        <tr><th>No. Transaksi</th><td>${data.no_transaksi || '-'}</td></tr>
                        <tr><th>Tanggal</th><td>${formatDate(data.tanggal)}</td></tr>
                        <tr><th>Customer</th><td>${data.customer}</td></tr>
                        <tr><th>Akun Bank</th><td>${data.akun}</td></tr>
                        <tr><th>Jumlah</th><td>Rp ${formatNumber(data.jumlah)}</td></tr>
                        ${data.jumlah_tagihan ? `<tr><th>Tagihan</th><td>Rp ${formatNumber(data.jumlah_tagihan)}</td></tr>` : ''}
                        ${data.jumlah_sudah_dibayar ? `<tr><th>Sudah Dibayar</th><td>Rp ${formatNumber(data.jumlah_sudah_dibayar)}</td></tr>` : ''}
                        ${data.sisa_bayar !== null ? `<tr><th>Sisa</th><td>${data.sisa_bayar <= 0 ? 'Lunas' : 'Rp ' + formatNumber(data.sisa_bayar)}</td></tr>` : ''}
                        <tr><th>Keterangan</th><td>${data.keterangan || '-'}</td></tr>
                    </table>
                `;
                $('#viewContent').html(html);
                $('#viewModal').modal('show');
            }
        });
}

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

function deleteBayarPiutang(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-piutang.destroy', ':no_bukti') }}`.replace(':no_bukti', noBukti),
                type: 'DELETE',
                success: function(response) {
                    Swal.fire('Terhapus!', response.message, 'success');
                    $('#bayarPiutangTable').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