@extends('layouts.master')

@section('title', 'Edit 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> Edit 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="#">Edit</a></li>
            </ul>
        </div>

        <div class="row">
            <div class="clearix"></div>
            <div class="col-md-12">
                <div class="tile">
                    <h3 class="tile-title">Edit Journal Voucher</h3>
                    <div class="tile-body">

                        <form method="POST" action="{{ route('journal.update', $journal->Id) }}">
                            @csrf
                            @method('PUT')

                            <div class="row">
                                    <!-- 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" value="{{ $journal->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="{{ $journal->VoucherDate }}" required>
                                </div>
                            </div>

                            <!-- Debit Entries Table -->
                            <h5>Debit Entries</h5>
<table class="table table-bordered" id="entries">
    <thead>
        <tr>
            <th>Account</th>
            <th>Entry Narration</th>
            <th>Debit Amount</th>
            <th>Credit Amount</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        @foreach($debitRows as $detail)
            <tr>
                <td>
                    <select name="account_id[]" class="form-control border" required>
                        <option value="">Select Account</option>
                        @foreach($accounts as $account)
                            <option value="{{ $account->Account_ID }}" 
                                {{ $detail->Account_ID == $account->Account_ID ? 'selected' : '' }}>
                                {{ $account->Account_Title }}
                            </option>
                        @endforeach
                    </select>
                </td>
                <td>
                    <input type="text" name="entry_narration[]" class="form-control border" value="{{ $detail->Entry_Narration }}" required>
                </td>
                <td>
                    <input type="number" name="debit_amount[]" class="form-control border" value="{{ $detail->Amount }}" required>
                </td>
                <td>
                    <input type="number" name="credit_amount[]" class="form-control border" value="" readonly>
                </td>
                <td>
                    <div class="btn-group" role="group" aria-label="Actions">
                        <a href="#" class="btn btn-danger btn-sm remove"><i class="fa fa-remove"></i> Remove</a>
                        <button type="button" class="btn btn-info btn-sm add-row">Add</button>
                    </div>
                </td>
                <input type="hidden" name="entry_type[]" value="D">
            </tr>
        @endforeach

        @foreach($creditRows as $detail)
            <tr>
                <td>
                    <select name="account_id[]" class="form-control border" required>
                        <option value="">Select Account</option>
                        @foreach($accounts as $account)
                            <option value="{{ $account->Account_ID }}" 
                                {{ $detail->Account_ID == $account->Account_ID ? 'selected' : '' }}>
                                {{ $account->Account_Title }}
                            </option>
                        @endforeach
                    </select>
                </td>
                <td>
                    <input type="text" name="entry_narration[]" class="form-control border" value="{{ $detail->Entry_Narration }}" required>
                </td>
                <td>
                    <input type="number" name="debit_amount[]" class="form-control border" value="" readonly>
                </td>
                <td>
                    <input type="number" name="credit_amount[]" class="form-control border" value="{{ $detail->Amount }}" required>
                </td>
                <td>
                    <div class="btn-group" role="group" aria-label="Actions">
                        <a href="#" class="btn btn-danger btn-sm remove"><i class="fa fa-remove"></i> Remove</a>
                        <button type="button" class="btn btn-info btn-sm add-row">Add</button>
                    </div>
                </td>
                <input type="hidden" name="entry_type[]" value="C">
            </tr>
        @endforeach
    </tbody>
</table>

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

                        </form>

                    </div>
                </div>
            </div>
        </div>
    </main>

    @push('js')
    <script>
$(document).ready(function () {
    // Add new row when Add button clicked
    $(document).on('click', '.add-row', function (e) {
        e.preventDefault();
        // Clone the current row
        var $currentRow = $(this).closest('tr');
        var $newRow = $currentRow.clone();

        // Clear input/select values in the new row
        $newRow.find('input').val('');
        $newRow.find('select').val('');

        // Append the new row after the current row
        $newRow.insertAfter($currentRow);
    });

    // Remove row when Remove button clicked
    $(document).on('click', '.remove', function (e) {
        e.preventDefault();
        var $tbody = $(this).closest('tbody');
        var rowCount = $tbody.find('tr').length;

        if (rowCount > 1) {
            $(this).closest('tr').remove();
        } else {
            alert('You cannot delete the last row.');
        }
    });
});

$(document).on('input', 'input[name^="debit_amount"], input[name^="credit_amount"]', function () {
    var $row = $(this).closest('tr');
    var $debit = $row.find('input[name^="debit_amount"]');
    var $credit = $row.find('input[name^="credit_amount"]');

    if ($(this).is($debit)) {
        if ($(this).val() !== '') {
            $credit.prop('disabled', true);
        } else {
            $credit.prop('disabled', false);
        }
    } else {
        if ($(this).val() !== '') {
            $debit.prop('disabled', true);
        } else {
            $debit.prop('disabled', false);
        }
    }
});
    </script>
    @endpush

@endsection