@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> 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="col-md-12">

            <!-- Show Form Button -->
            <div class="mb-3">
                <button type="button" class="btn btn-success" id="show-receipt-form">
                    <i class="fa fa-plus"></i> New Receipt
                </button>
            </div>

            <!-- Receipt Form -->
            <div class="tile" id="receipt-form" style="display: none;">
                <h3 class="tile-title">Receipt Voucher</h3>
                <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>
                                            <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>
                                        </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>

            <!-- Search Form -->
            <form method="GET" action="{{ route('receipt.create') }}" class="form-inline mb-3">
                <div class="form-group mr-2">
                    <input type="text" name="search" class="form-control" placeholder="Search by Remarks or ID" value="{{ request('search') }}">
                </div>
    <div class="form-group mr-2">
        <input type="text" name="voucher_id" class="form-control" placeholder="Voucher ID (Exact)" value="{{ request('voucher_id') }}">
    </div>
                <button type="submit" class="btn btn-primary">Search</button>
            </form>

            <!-- Receipt List -->
            <hr>
            <h4>Today's Receipt Vouchers</h4>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Remarks</th>
                        <th>ID</th>
                        <th>Total Amount</th>
                        <th>Show</th>
                        <th>Edit</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($previousReceipts as $receipt)
                        <tr>
                            <td>{{ \Carbon\Carbon::parse($receipt->VoucherDate)->format('d-M-Y') }}</td>
                            <td>{{ $receipt->Remarks }}</td>
                            <td>{{ $receipt->Id }}</td>
                            <td>{{ number_format($receipt->totalAmount) }}</td>
                            <td><a href="{{ route('receipt.show', $receipt->Id) }}" class="btn btn-info btn-sm"><i class="fa fa-eye"></i></a></td>
                            <td><a href="{{ route('receipt.edit', $receipt->Id) }}" class="btn btn-warning btn-sm"><i class="fa fa-edit"></i></a></td>
                            <td>
                                <form method="POST" action="{{ route('receipt.destroy', $receipt->Id) }}" onsubmit="return confirm('Are you sure you want to delete this receipt?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="7">No receipt vouchers found for today.</td></tr>
                    @endforelse
                </tbody>
            </table>

            <div class="d-flex justify-content-center">
                {{ $previousReceipts->links() }}
            </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'));

        $('#show-receipt-form').click(function () {
            $('#receipt-form').slideDown();
            $(this).hide();
        });

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

        $(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