@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>ID</th> <!-- New Column -->
                                            <th scope="col"><a class="addRow badge badge-success text-white"><i class="fa fa-plus"></i> Add Row</a></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><input type="text" name="account_id_display[]" class="form-control border account-id-display" readonly></td> <!-- New Column -->
                                            <td><a href="#" class="btn btn-danger remove"><i class="fa fa-remove"></i></a></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></td>
                                            <td></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() {
                // Update Account ID field when dropdown changes
                $('.account-dropdown').off().on('change', function () {
                    var selectedId = $(this).find(':selected').data('id');
                    $(this).closest('tr').find('.account-id-display').val(selectedId);
                });

                // Restrict Debit & Credit input fields
                $('.debit').off().on('input', function () {
                    var debitVal = $(this).val();
                    var creditField = $(this).closest('tr').find('.credit');

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

                $('.credit').off().on('input', function () {
                    var creditVal = $(this).val();
                    var debitField = $(this).closest('tr').find('.debit');

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

            // Function to add a new row
            $('.addRow').click(function () {
                var newRow = $('#journal-details tbody tr:first').clone();

                // Reset input values
                newRow.find('input').val(0);
                newRow.find('.credit, .debit').prop('disabled', false);
                newRow.find('.account-id-display').val('');

                // Append new row
                $('#journal-details tbody').append(newRow);

                // Re-bind event listeners
                bindEvents();
            });

            // Function to remove a 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.');
                }
            });

            // Function to calculate 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 validation before submission
            $('#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!');
                }
            });

            // Run once on page load
            bindEvents();
        });
    </script>
    @endpush
@endsection