@extends('layouts.master')

@section('title', 'Edit 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> Edit 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="#">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 Payment Voucher</h3>
                    <div class="tile-body">

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

                            <div class="row">
                                <!-- Cash Account Selection -->
                                <div class="form-group col-md-3">
                                    <label class="control-label">Cash Account</label>
                                    <select name="cash_account" class="form-control">
    @foreach ($cashAccountId as $cashAccount)
        <option value="{{ $cashAccount->Account_ID }}" {{ $cashAccount->Account_ID == $cashAccountId ? 'selected' : '' }}>
            {{ $cashAccount->Account_Title }}
        </option>
    @endforeach
</select>
                                </div>

                                <!-- 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="{{ $payment->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="{{ $payment->VoucherDate }}" 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>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>
                                        @foreach($details 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="amount[]" class="form-control border" value="{{ $detail->Amount }}" required></td>
                                                <!--<td>
                                                    <select name="entry_type[]" class="form-control border" required>
                                                        <option value="D" {{ $detail->entryType == 'D' ? 'selected' : '' }}>Debit</option>
                                                        <option value="C" {{ $detail->entryType == 'C' ? 'selected' : '' }}>Credit</option>
                                                    </select>
                                                </td>-->
                                                <td><a href="#" class="btn btn-danger remove"><i class="fa fa-remove"></i></a></td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <!-- 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 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