@extends('layouts.master')

@section('title', 'Add J.V. | ')

@section('content')
    @include('partials.header')
    @include('partials.sidebar')

    <main class="app-content">
        <div class="app-title">
            <div>
                <h1><i class="fa fa-edit"></i> Add J.V.</h1>
            </div>
            <ul class="app-breadcrumb breadcrumb">
                <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
                <li class="breadcrumb-item">J.V.</li>
                <li class="breadcrumb-item"><a href="#">Create</a></li>
            </ul>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="tile">
                    <h3 class="tile-title">J.V. Voucher</h3>
                    <div class="tile-body">
                        <form method="POST" action="{{ route('journal.store') }}" id="jvForm">
                            @csrf

                            <!-- Remarks Input Field -->
                            <div class="form-group col-md-3">
                                <label class="control-label">Remarks</label>
                                <input type="text" name="remarks" class="form-control border" placeholder="Enter Remarks" required>
                            </div>

                            <!-- Date Selection -->
                            <div class="form-group col-md-3">
                                <label class="control-label">Date</label>
                                <input name="date" class="form-control datepicker" type="date" value="{{ date('Y-m-d') }}" required>
                            </div>

                            <!-- Payment Details Table -->
                            <div class="col-md-12">
                                <table class="table table-bordered" id="journal-details">
                                    <thead>
                                        <tr>
                                            <th>Account</th>
                                            <th>Entry Narration</th>
                                            <th>Debit</th>
                                            <th>Credit</th>
  <th>Customer</th>
                                            <th>Action</th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <select name="account_id[]" class="form-control border account-dropdown" required>
                                                    <option value="">Select Account</option>
                                                    @foreach($accounts as $account)
                                                        <option value="{{ $account->Account_ID }}" data-id="{{ $account->Account_ID }}">
                                                            {{ $account->Account_Title }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td><input type="text" name="entry_narration[]" class="form-control border" required></td>
                                            <td><input type="number" name="debit[]" value="0" class="form-control border debit" step="0.01" min="0"></td>
                                            <td><input type="number" name="credit[]" value="0" class="form-control border credit" step="0.01" min="0"></td>
<td>
    <select name="customer_id[]" class="form-control border">
        <option value="">Select Site</option>
        @foreach($customers as $cust)
            <option value="{{ $cust->id }}">{{ $cust->name }}</option>
        @endforeach
    </select>
</td>
                                            <th scope="col"><a class="addRow badge badge-success text-white"><i class="fa fa-plus"></i> Add Row</a></th>
                                            <td><a href="#" class="btn btn-danger remove"><i class="fa fa-remove"></i></a></td>
                                            <td><input type="hidden" name="account_id_display[]" class="form-control border account-id-display" readonly></td>
                                            <td><input type="hidden" name="type[]" class="form-control border type" readonly></td> <!-- New Column -->
<td>
    <input type="hidden" name="amount[]" class="form-control amount" readonly>
</td>

                                        </tr>
                                    </tbody>
                                    <!-- Total Row -->
                                    <tfoot>
                                        <tr>
                                            <td colspan="2" class="text-right"><strong>Total:</strong></td>
                                            <td><input type="text" id="total-debit" class="form-control border" readonly></td>
                                            <td><input type="text" id="total-credit" class="form-control border" readonly></td>
                                            <td colspan="3"></td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>

                            <!-- Submit Button -->
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>

    @push('js')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            function bindEvents() {
                // Account dropdown change event
                $('.account-dropdown').off().on('change', function () {
                    var selectedId = $(this).find(':selected').data('id');
                    $(this).closest('tr').find('.account-id-display').val(selectedId);
                });

                // Debit input event
                $('.debit').off().on('input', function () {
                    var debitVal = $(this).val();
                    var row = $(this).closest('tr');
                    var creditField = row.find('.credit');
                    var typeField = row.find('.type');

                    if (debitVal > 0) {
                        creditField.val(0).prop('disabled', true);
                        typeField.val('D');
                    } else {
                        creditField.prop('disabled', false);
                        if (parseFloat(creditField.val()) === 0) typeField.val('');
                    }
                    calculateTotals();
                });

                // Credit input event
                $('.credit').off().on('input', function () {
                    var creditVal = $(this).val();
                    var row = $(this).closest('tr');
                    var debitField = row.find('.debit');
                    var typeField = row.find('.type');

                    if (creditVal > 0) {
                        debitField.val(0).prop('disabled', true);
                        typeField.val('C');
                    } else {
                        debitField.prop('disabled', false);
                        if (parseFloat(debitField.val()) === 0) typeField.val('');
                    }
                    calculateTotals();
                });
            }

            // Add new row
            $('.addRow').click(function () {
                var newRow = $('#journal-details tbody tr:first').clone();
                newRow.find('input').val('');
                newRow.find('.debit, .credit').val(0).prop('disabled', false);
                newRow.find('.type').val('');
                newRow.find('.account-id-display').val('');
                $('#journal-details tbody').append(newRow);
                bindEvents();
            });

            // Remove row
            $(document).on('click', '.remove', function () {
                if ($('#journal-details tbody tr').length > 1) {
                    $(this).closest('tr').remove();
                    calculateTotals();
                } else {
                    alert('You cannot delete the last row.');
                }
            });

            // Calculate debit/credit totals
            function calculateTotals() {
                var totalDebit = 0, totalCredit = 0;
                $('.debit').each(function () {
                    totalDebit += parseFloat($(this).val()) || 0;
                });
                $('.credit').each(function () {
                    totalCredit += parseFloat($(this).val()) || 0;
                });
                $('#total-debit').val(totalDebit.toFixed(2));
                $('#total-credit').val(totalCredit.toFixed(2));
            }

            // Form submit validation
            $('#jvForm').submit(function (e) {
                var totalDebit = parseFloat($('#total-debit').val()) || 0;
                var totalCredit = parseFloat($('#total-credit').val()) || 0;

                if (totalDebit !== totalCredit) {
                    e.preventDefault();
                    alert('Error: Debit and Credit totals must be equal!');
                }
            });

            bindEvents(); // Initial bind
        });

    $(document).on('input change', '.type, .debit, .credit', function () {
        let row = $(this).closest('tr');
        let type = row.find('.type').val();
        let debit = parseFloat(row.find('.debit').val()) || 0;
        let credit = parseFloat(row.find('.credit').val()) || 0;

        let amountField = row.find('.amount');

        if (type === 'D') {
            amountField.val(debit.toFixed(2));
        } else if (type === 'C') {
            amountField.val(credit.toFixed(2));
        } else {
            amountField.val('');
        }
    });

    </script>
    @endpush
@endsection