@extends('layouts.master')

@section('title', 'Add Payment | ')

@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 Payment</h1>
            </div>
        
            <ul class="app-breadcrumb breadcrumb">
                <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
                <li class="breadcrumb-item">Payments</li>
                <li class="breadcrumb-item"><a href="#">Create</a></li>
            </ul>
        </div>

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

                        <form method="POST" action="{{ route('payment.store') }}">
                            @csrf
                            <div class="row">
                                

                                <!-- Remarks Input Field (Placed Below Cash Account Dropdown) -->
                                <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">
                                </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>
                            </div>

                            <!-- Payment Details Table -->
                            <div class="col-md-12">
                                <table class="table table-bordered" id="payment-details">
                                    <thead>
                                        <tr>
                                            <th>Account</th>
<th>Cash/Bank A/c.</th>
                                            <th>Entry Narration</th>
                                            <th>Amount</th>
                                            <!--<th>Entry Type</th>-->
                                            <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>
        <!-- Account Selection -->
        <td>
            <select name="account_id[]" class="form-control border" required>
                <option value="">Select Account</option>
                @foreach($accounts as $account)
                    <option value="{{ $account->Account_ID }}">{{ $account->Account_Title }}</option>
                @endforeach
            </select>
        </td>

        <!-- Cash/Bank Dropdown (New) -->
        <td>
            <select name="cash_bank_id[]" class="form-control border" required>
                <option value="">Select Cash/Bank</option>
                @foreach($cashAccounts as $account)
                    <option value="{{ $account->Account_ID }}">{{ $account->Account_Title }}</option>
                @endforeach
            </select>
        </td>

        <!-- Entry Narration (Visible & Required) -->
        <td><input type="text" name="entry_narration[]" class="form-control border" required></td>

        <!-- Amount -->
        <td><input type="number" name="amount[]" class="form-control border" required></td>

        <!-- Remove Button -->
        <td><a href="#" class="btn btn-danger remove"><i class="fa fa-remove"></i></a></td>
    </tr>
</tbody>
                      </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>
        $(document).ready(function () {
            // Add new row to the payment details table
            $('.addRow').click(function () {
                var newRow = $('#payment-details tbody tr:first').clone();
                newRow.find('input').val('');
                $('#payment-details tbody').append(newRow);
            });

            // Remove a row from the payment details table
            $(document).on('click', '.remove', function () {
                var rowCount = $('#payment-details tbody tr').length;
                if (rowCount > 1) {
                    $(this).closest('tr').remove();
                } else {
                    alert('You cannot delete the last row.');
                }
            });
        });
    </script>
    @endpush
@endsection