@extends('layouts.master')

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

@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 Receipt</h1>
            </div>
        
            <ul class="app-breadcrumb breadcrumb">
                <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
                <li class="breadcrumb-item">Receipts</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 bg-dark text-white p-2">Receipt Voucher</h3>
                    <div class="tile-body">
                        <form method="POST" action="{{ route('receipt.store') }}">
                            @csrf
                            <div class="row mb-3">
                                <!-- Cash Account Selection -->
                                <div class="col-md-4">
                                    <label class="control-label">Cash Account</label>
                                    <select name="cash_account" id="cash_account" class="form-control border" required>
                                        <option value="">Select Cash Account</option>
                                        @foreach($cashAccounts as $account)
                                            <option value="{{ $account->Account_ID }}">{{ $account->Account_Title }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- Remarks Input Field -->
                                <div class="col-md-4">
                                    <label class="control-label">Remarks</label>
                                    <input type="text" name="remarks" class="form-control border" placeholder="Enter Remarks">
                                </div>

                                <!-- Date Selection -->
                                <div class="col-md-4">
                                    <label class="control-label">Date</label>
                                    <input name="date" class="form-control datepicker" type="date" value="{{ date('Y-m-d') }}" required>
                                </div>
                            </div>

                            <!-- Receipt Details Table -->
                            <div class="table-responsive">
                                <table class="table table-bordered" id="receipt-details">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>Account</th>
                                            <th>Entry Narration</th>
                                            <th>Amount</th>
                                            <th><button type="button" id="addRow" class="btn btn-success"><i class="fa fa-plus"></i> Add</button></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <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 }}">{{ $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="amount[]" class="form-control border" required></td>
                                            <td><button type="button" class="btn btn-danger removeRow"><i class="fa fa-trash"></i></button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- Submit Button -->
                            <div class="text-end mt-3">
                                <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 receipt details table
            $('#addRow').click(function () {
                var newRow = `<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 }}">{{ $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="amount[]" class="form-control border" required></td>
                    <td><button type="button" class="btn btn-danger removeRow"><i class="fa fa-trash"></i></button></td>
                </tr>`;
                $('#receipt-details tbody').append(newRow);
            });

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