@extends('layouts.master')

@section('title', 'Input Jurnal Umum')

@section('content')
<div class="row">
    <x-page-title title="{{__('Pencairan')}}" pagetitle="{{__('Pencairan')}} Input" />
    <hr>
    <div class="container content">
        <h2>{{__('Pencairan')}} Input</h2>


        <form id="general-journal-form" action="{{ isset($generalJournal) ? route('transaction.pencairan.update', $generalJournal->id) : route('transaction.pencairan.store') }}" method="POST">
            @csrf
            @if(isset($generalJournal)) @method('PUT') @endif

            <div class="card mb-3">
                <div class="card-header">{{__('Pencairan')}} Information</div>
                <div class="card-body">
                    <input type="hidden" name="token" id="token" value="{{$token??''}}">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="pencairan_date">Tanggal {{__('Pencairan')}}</label>
                                <input type="date" id="pencairan_date" name="pencairan_date" class="form-control date-picker" required value="{{ date('Y-m-d')}}" id="document_date">
                            </div>
                            <br>
                            <div class="form-group">
                                <label for="pencairan_date">Metode Pembayaran</label>
                                <select class="form-select" id="payment_method" name="payment_method" required>
                                    @foreach ($paymentMethods as $pay)
                                        <option value="{{$pay->payment_method_code}}">{{$pay->payment_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="note">{{__('Notes')}}</label>
                                <textarea name="note" class="form-control" rows="5">{{ old('note', $generalJournal->note ?? '') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card for {{__('Pencairan')}} Details -->
            <div class="card mb-3">
                <div class="card-header">{{__('Pencairan')}} Details</div>
                <div class="card-body">
                    <h5 class="text-end">Total pencairan: <span id="total-value">0</span></h5>
                    <table class="table" id="cash-out-details-table">
                        <thead>
                            <tr>
                                <th>Nama Pemasok</th>
                                <th>Nomor Nota</th>
                                <th>Tanggal Nota</th>
                                <th>Tanggal Pelunasan</th>
                                <th>Nominal</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="parentTbody">

                        </tbody>
                    </table>
                    <button type="button" id="addRow" class="btn btn-primary">Cari</button>

                </div>
            </div>

            <div class="modal fade" id="selectInvoiceModal" tabindex="-1" aria-labelledby="selectInvoiceModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="selectInvoiceModalLabel">Pilih Pelunasan</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group mb-3">
                                <input type="text" id="invoiceSearch" class="form-control" placeholder="Search by Invoice Number or Document Date">
                            </div>
                            <table class="table table-bordered" id="invoiceTable">
                                <thead>
                                    <tr>
                                        <th>Pilih</th>
                                        <th>Nomor Pelunasan</th>
                                        <th>Tanggal Pelunasan</th>
                                        <th>Tanggal Pencairan</th>
                                        <th>Nominal</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($payDetails as $pd)
                                    <tr data-supplier="">
                                        <td style="text-align: center; vertical-align: middle;">
                                            <input type="checkbox" class="invoice-checkbox" data-payment="{{ $pd }}" value="{{ $pd->id }}">
                                        </td>
                                        <td>{{ $pd->payable_payment_number }}</td>
                                        <td>{{ \Carbon\Carbon::parse($pd->payable_payment_date)->format('d M Y') }}</td>
                                        <td>{{ \Carbon\Carbon::parse($pd->tgl_pencairan)->format('d M Y') }}</td>
                                        <td>Rp {{ number_format($pd->payment_nominal, 0, '.', ',') }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" id="selectInvoicesButton">Pilih</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group submit-btn mb-3">
                <button type="submit" class="btn btn-success" @if(!in_array('create', $privileges)) disabled @endif>Submit {{__('Pencairan')}}</button>
            </div>
        </form>


    </div>



    @if (session('error'))
        <script>
            Swal.fire({
                title: 'Error!',
                text: "{{ session('error') }}",
                icon: 'error',
                confirmButtonText: 'OK'
            });
        </script>
    @endif
</div>

@section('scripts')
<script>
    let payDetails = @json($payDetails);
    let rowCount = 0;
    document.addEventListener('DOMContentLoaded', function () {
        // Check if the success message is present
        @if(session('success'))
            // Show SweetAlert confirmation modal
            Swal.fire({
                title: '{{__('Bank Cash In')}} Created',
                text: 'Do you want to print it?',
                icon: 'success',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No',
            }).then((result) => {
                if (result.isConfirmed) {
                    // User clicked "Yes"
                    var id = "{{ session('id') }}"; // Get the id from the session
                    if (id) {
                        // Navigate to the edit route with the id
                        window.location.href = "{{ route('transaction.pencairan.print', ['id' => ':id']) }}".replace(':id', id);
                    }
                }
            });
        @endif
    });

    // Function to calculate totals
    function calculateTotals() {
        let total = 0;

        document.querySelectorAll('.nominal').forEach(function (input) {
            total += parseFloat(input.value.replace(/,/g, '')) || 0;
        });

        document.getElementById('total-value').innerText = total.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');

        return { total }; // Return totals for validation
    }

    // Initial calculation
    calculateTotals();

    $('#addRow').click(function() {
        const selectedorder = [];
        let selectedPaymentMethod = document.getElementById('payment_method').value;
        let selectedDate = document.getElementById('pencairan_date').value;

        let filteredDetails = payDetails.filter(element =>
            element.payment_method==selectedPaymentMethod &&
            element.tgl_pencairan==selectedDate
        );


        $('#parentTbody').empty();
        filteredDetails.forEach(requisit => {
            const newRow = `
            <tr>
                <td>
                    <input type="text" name="" class="form-control" value="${requisit.payment_detail.suppliers.supplier_name}" readonly />
                    <input type="hidden" name="details[${rowCount}][payment_number]" class="form-control" value="${requisit.payable_payment_number}" readonly />
                </td>
                <td>
                    <input type="hidden" name="details[${rowCount}][id_pay_detail]" class="form-control" value="${requisit.id}" readonly />
                    <input type="text" name="details[${rowCount}][document_number]" class="form-control" value="${requisit.payment_detail.document_number}" readonly />
                </td>
                <td>
                    <input type="date" name="details[${rowCount}][document_date]" class="form-control" value="${requisit.payment_detail.document_date.substring(0,10)}" readonly />
                </td>
                <td>
                    <input type="date" name="details[${rowCount}][payment_date]" class="form-control" value="${requisit.payable_payment_date.substring(0,10)}" readonly/>
                </td>
                <td>
                    <input type="text" name="details[${rowCount}][nominal]" class="form-control text-end nominal" value="${parseFloat(requisit.payment_nominal).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}" readonly>
                    <input type="hidden" name="details[${rowCount}][tgl_pencairan]" class="form-control " value="${requisit.tgl_pencairan}" readonly>
                </td>
                <td id="pay-row-${rowCount}">
                    <button type="button" class="btn btn-danger deleteRow"><i class="material-icons-outlined remove-row">remove</i></button>
                </td>
            </tr>
            `;
            // console.log(newRow);

            $('#parentTbody').append(newRow);
            rowCount++;
        });
        calculateTotals();
        $('#selectInvoiceModal').modal('hide');

    });

    var now = new Date(),
    maxDate = now.toISOString().substring(0,10);
    $('#document_date').prop('max', maxDate);

    function formatNumber(input) {
        // `Get the cursor position
        const cursorPosition = input.selectionStart;
        input.value = input.value.replace(/[^0-9]/g, '');
        // Remove any existing thousand separators
        let value = input.value.replace(/,/g, '');

        // Format the number with thousand separators
        let formattedValue = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

        // Set the new value
        input.value = formattedValue;

        // Adjust the cursor position
        const newCursorPosition = formattedValue.length - (value.length - cursorPosition);
        input.setSelectionRange(newCursorPosition, newCursorPosition);
    }

    document.getElementById('general-journal-form').addEventListener('submit', function (event) {
        const { totalDebit, totalCredit } = calculateTotals();
        let isValid = true;

        // Check if totals are equal
        if (totalDebit !== totalCredit) {
            isValid = false; // Prevent form submission
            Swal.fire({
                title: 'Warning!',
                html: `<ul>
                    The total debits and credits do not match!
                </ul>`,
                icon: 'warning',
                confirmButtonText: 'OK'
            });
        }

        $('#cash-out-details-table tbody tr').each(function(index) {
            const debet = $(this).find(`input[name="details[${index}][nominal_debet]"]`).val().replace(/,/g, '');
            const credit = $(this).find(`input[name="details[${index}][nominal_credit]"]`).val().replace(/,/g, '');

            if (debet>0 && credit>0) {
                Swal.fire({
                title: 'Warning!',
                html: `<ul>
                    Only one of Nominal Debet or Nominal Credit can be filled for row ${index+1}.
                </ul>`,
                icon: 'warning',
                confirmButtonText: 'OK'
            });
                isValid = false;
            }
        });
        if (!isValid) event.preventDefault();
    });



    // Remove row functionality
    document.querySelector('#cash-out-details-table tbody').addEventListener('click', function (event) {
        if (event.target.classList.contains('remove-row')) {
            event.target.closest('tr').remove();
            calculateTotals(); // Recalculate totals after removing a row
        }
    });
</script>

@endsection
@endsection