@extends('layouts.master')

@section('title', 'Edit Payment Voucher | ')
@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 Voucher</h1>
                <p>Edit your Payment Voucher details</p>
            </div>
            <ul class="app-breadcrumb breadcrumb">
                <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
                <li class="breadcrumb-item"><a href="#">Payment</a></li>
            </ul>
        </div>

        <form action="{{ route('payment.update', $payment->Id) }}" method="POST">
            @csrf
            @method('PUT')
            <div class="row">
                <div class="col-md-12">
                    <div class="tile">
                        <div class="tile-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <label>Voucher #: <strong>{{ $payment->Id }}</strong></label><br>
                                    <label>Payment Mode: Cash / Bank</label>
                                </div>
                            </div>

                            <div class="row mt-4">
                                <div class="col-md-6">
                                    <label for="voucher_date">Voucher Date:</label>
                                    <input type="date" class="form-control" name="voucher_date" value="{{ \Carbon\Carbon::parse($payment->VoucherDate)->format('Y-m-d') }}">
                                </div>
                                <div class="col-md-6">
                                    <label for="remarks">Remarks:</label>
                                    <input type="text" class="form-control" name="remarks" value="{{ $payment->Remarks }}">
                                </div>
                                <div class="col-md-6">
                                    <label for="site">Site:</label>
                                    <input type="text" class="form-control" name="site" value="{{ $payment->Paid_To }}">
                                </div>
                            </div>

                            <div class="table-responsive mt-4">
                                <table class="table table-bordered" id="voucherTable">
                                    <thead>
                                        <tr>
                                            <th>Payee Account</th>
                                            <th>Payer Account</th>
                                            <th>Entry Narration</th>
                                            <th>Amount</th>
                                          <!--  <th>Action</th>-->
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($details as $index => $detail)
                                            <tr>
                                                <td>
                                                    <select name="details[{{ $index }}][payee_id]" class="form-control">
                                                        @foreach($accounts as $acc)
                                                            <option value="{{ $acc->Account_ID }}" {{ $acc->Account_ID == $detail->Payee_ID ? 'selected' : '' }}>
                                                                {{ $acc->Account_Title }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </td>
                                                <td>
                                                    <select name="details[{{ $index }}][payer_id]" class="form-control">
                                                        @foreach($payerAccounts as $payer)
                                                            <option value="{{ $payer->Account_ID }}" {{ $payer->Account_ID == $detail->Payer_ID ? 'selected' : '' }}>
                                                                {{ $payer->Account_Title }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </td>
                                                <td>
                                                    <input type="text" name="details[{{ $index }}][narration]" class="form-control" value="{{ $detail->Entry_Narration }}">
                                                </td>
                                                <td>
                                                    <input type="number" step="0.01" name="details[{{ $index }}][amount]" class="form-control" value="{{ $detail->Amount }}">
                                                </td>
                                        <!--        <td>
                                                    <button type="button" class="btn btn-danger btn-sm remove-row">−</button>
                                                </td>-->
                                            </tr>
                                        @endforeach

                                        <!-- Hidden template row for cloning -->
                                        <tr id="templateRow" style="display: none;">
                                            <td>
                                                <select class="form-control payee-select">
                                                    @foreach($accounts as $acc)
                                                        <option value="{{ $acc->Account_ID }}">{{ $acc->Account_Title }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <select class="form-control payer-select">
                                                    @foreach($payerAccounts as $payer)
                                                        <option value="{{ $payer->Account_ID }}">{{ $payer->Account_Title }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control narration-input">
                                            </td>
                                            <td>
                                                <input type="number" step="0.01" class="form-control amount-input">
                                            </td>
                                     <!--       <td>
                                                <button type="button" class="btn btn-danger btn-sm remove-row">−</button>
                                            </td>-->
                                        </tr>

                                    </tbody>
                                </table>
                             <!--   <button type="button" class="btn btn-success btn-sm" id="addRow">Add Row</button>-->
                            </div>

                            <div class="text-right mt-4">
                                <button type="submit" class="btn btn-success">
                                    <i class="fa fa-save"></i> Update Voucher
                                </button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </form>
    </main>
@endsection

@section('scripts')
<script>
    document.getElementById('addRow').addEventListener('click', function () {
        let rowCount = document.querySelectorAll('#voucherTable tbody tr:not(#templateRow)').length;
        let template = document.getElementById('templateRow');
        let clone = template.cloneNode(true);
        clone.style.display = '';
        clone.removeAttribute('id');

        // Set input names dynamically
        clone.querySelector('.payee-select').setAttribute('name', `details[${rowCount}][payee_id]`);
        clone.querySelector('.payer-select').setAttribute('name', `details[${rowCount}][payer_id]`);
        clone.querySelector('.narration-input').setAttribute('name', `details[${rowCount}][narration]`);
        clone.querySelector('.amount-input').setAttribute('name', `details[${rowCount}][amount]`);

        document.querySelector('#voucherTable tbody').appendChild(clone);
    });

    // Remove row functionality
    document.addEventListener('click', function (e) {
        if (e.target.classList.contains('remove-row')) {
            e.target.closest('tr').remove();
        }
    });
</script>
@endsection