@extends('backend.layouts.app')
@section('content')
    <h3 class="mb-2">Generate Invoice</h3>
    <div class="p-4 rounded bg-white mb-2">
        <div class="row">
            <div class="col-md-12">
                <label for="billing_period" class="form-label fw-semibold">Select Billing Period</label>
                <select id="billing_period" class="form-select">
                    <option value="">-- Choose Period --</option>
                    @foreach (bill_period() as $period)
                        <option value="{{ $period }}">
                            {{ ucfirst($period) }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>

    <div id="members-container" style="display:none;">
        <div class="card">
            <div class="card-header bg-primary text-white fw-bold" id="members-title">
                Members
            </div>
            <form action="{{ route('invoice.store') }}" method="POST" id="ajax_form_data">
                @csrf
                <input type="hidden" name="billing_period" id="hidden_billing_period" value="">
                <div class="table-responsive">
                    <table class="table table-bordered mb-0" id="members-table">
                        <thead class="table-light text-center">
                            <tr>
                                <th><input type="checkbox" id="select-all"></th>
                                <th>#</th>
                                <th>Member ID</th>
                                <th>Full Name</th>
                                <th>Amount</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <div class="row" style="padding:10px;">
                    <div class="col-md-2">
                        <label for="">Invoice Date</label>
                        <input type="date" name="invoice_date" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <label for="">Due Date</label>
                        <input type="date" name="last_due_date" class="form-control">
                    </div>
                    <div class="col-md-8">
                        <label for="">Remark</label>
                        <input type="text" name="reamrk" class="form-control">
                    </div>
                </div>

                <button type="submit" class="btn btn-success w-100 fw-semibold mt-3">
                    Generate Invoices for Selected Members
                </button>
            </form>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            $('#billing_period').change(function() {
                let period = $(this).val();

                if (!period) {
                    $('#members-container').hide();
                    return;
                }

                $('#members-title').text('Members with billing period: ' + period.charAt(0).toUpperCase() +
                    period.slice(1));
                $('#hidden_billing_period').val(period);

                $('#members-table tbody').empty();

                $.ajax({
                    url: "{{ route('invoice.fetch_members') }}",
                    method: 'GET',
                    data: {
                        billing_period: period
                    },
                    beforeSend: function() {
                        $('#members-table tbody').html(
                            '<tr><td colspan="7" class="text-center">Loading...</td></tr>');
                        $('#members-container').show();
                    },
                    success: function(response) {
                        $('#members-table tbody').empty();

                        if (response.members && response.members.length > 0) {
                            $.each(response.members, function(index, member) {
                                let row = `
<tr class="text-center">
    <td><input type="checkbox" name="member_ids[]" value="${member.id}" class="member-checkbox"></td>
    <td>${index + 1}</td>
    <td>${member.member_id ?? '-'}</td>
    <td>${member.full_name}</td>
    <td>
        <input type="hidden" name="amounts[${member.id}]" value="${member.bill_amount}">
         <input type="hidden" name="bill_type_id[${member.id}]" value="${member.bill_type_id}">
        ${member.bill_amount.toFixed(2)}
    </td>
    <td>
        <input type="date" name="bill_period_start[${member.id}]" value="${member.start_billing_date}" class="form-control" readonly>
    </td>
    <td>
        <input type="date" name="bill_period_end[${member.id}]" value="${member.end_billing_date}" class="form-control" readonly>
    </td>
</tr>
`;
                                $('#members-table tbody').append(row);
                            });
                        } else {
                            $('#members-table tbody').html(
                                '<tr><td colspan="7" class="text-center">No members found.</td></tr>'
                            );
                        }
                    },
                    error: function() {
                        $('#members-table tbody').html(
                            '<tr><td colspan="7" class="text-center text-danger">Error fetching members.</td></tr>'
                        );
                    }
                });
            });

            // Select/Deselect all checkboxes
            $('#select-all').on('change', function() {
                $('.member-checkbox').prop('checked', $(this).prop('checked'));
            });
        });
    </script>
@endpush