@extends('layouts.master')

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

@push('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

@section('content')
@include('partials.header')
@include('partials.sidebar')

<main class="app-content">
    <div class="app-title">
        <div>
            <h1><i class="fa fa-edit"></i> Receipt Voucher</h1>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <!-- Receipt Form -->
            <div class="tile">
                <div class="tile-body">
                    <form method="POST" action="{{ route('receipt.store') }}">
                        @csrf

                        <div class="row">
                            <div class="form-group col-md-3">
                                <label>Remarks</label>
                                <input type="text" name="remarks" class="form-control border" placeholder="Enter Remarks">
                            </div>
                            <div class="form-group col-md-3">
                                <label>Date</label>
                                <input name="date" type="date" class="form-control datepicker" value="{{ date('Y-m-d') }}" required>
                            </div>
                        </div>

                        <!-- Voucher Entry Rows -->
                        <div class="col-md-12">
                            <table class="table table-bordered" id="receipt-details">
                                <thead>
                                    <tr>
                                        <th style="width: 300px;">Account</th>
                                        <th style="width: 300px;">Cash/Bank A/c.</th>
                                        <th style="width: 300px;">Entry Narration</th>
                                        <th style="width: 250px;">Amount</th>
                                       <!-- <th style="width: 200px;">Site Name</th>-->
                                        <th><a class="addRow badge badge-success text-white"><i class="fa fa-plus"></i> Add Row</a></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <select name="account_id[]" class="form-control border account-select" style="width: 100%;" required>
                                                <option value="">Select Account</option>
                                                @foreach($accounts as $account)
                                                    <option value="{{ $account->Account_ID }}">{{ $account->Account_Title }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <select name="cash_bank_id[]" class="form-control border cashbank-select" style="width: 100%;" required>
                                                <option value="">Select Cash/Bank</option>
                                                @foreach($cashAccounts 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 style="width: 100%;">
                                        </td>
                                        <td>
                                            <input type="number" name="amount[]" class="form-control border" required style="width: 100%;">
                                        </td>
                                        <td>
                                     @if(false) 
    <select name="site_id[]" class="form-control border site-select" style="width: 100%;">
        <option value="">Select Site</option>
        @foreach($sites as $site)
            <option value="{{ $site->id }}">{{ $site->name }}</option>
        @endforeach
    </select>
@endif
                                        </td>
                                        <td><a href="#" class="btn btn-danger remove"><i class="fa fa-remove"></i></a></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="col-md-12">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>

@push('js')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function () {
        function initSelect2(container) {
            container.find('.account-select').select2({ width: 'style', placeholder: 'Search Account' });
            container.find('.cashbank-select').select2({ width: 'style', placeholder: 'Search Cash/Bank' });
            container.find('.site-select').select2({ width: 'style', placeholder: 'Search Site' });
        }

        // Init on page load
        initSelect2($('#receipt-details'));

        $('.addRow').click(function () {
            var newRow = $('#receipt-details tbody tr:first').clone();
            newRow.find('input, select').val('');
            newRow.find('.select2-container').remove(); 
            newRow.find('select').removeAttr('data-select2-id tabindex aria-hidden');
            $('#receipt-details tbody').append(newRow);
            initSelect2($('#receipt-details')); 
        });

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