@extends('layouts.admin')
@section('content')
@can('invoice_create')
<div style="margin-bottom: 10px;" class="row">
    <div class="col-lg-12">
        <a class="btn btn-success" href="{{ route('admin.invoices.create') }}">
            {{ trans('global.add') }} {{ trans('cruds.invoice.title_singular') }}
        </a>
        <a class="btn btn-success" data-bs-toggle="modal" data-bs-target="#massInvoiceModal">
   		 Generate Invoices for All Owners
		</a>
    </div>
</div>
@endcan
<div class="card">
    <div class="card-header">
        {{ trans('cruds.invoice.title_singular') }} {{ trans('global.list') }}
    </div>

    <div class="card-body">
        <div class="row" style="margin-bottom: 10px;">
            <div class="col-md-3">
                <label for="invoiceFilterStartDate" class="form-label">From date</label>
                <input type="date" id="invoiceFilterStartDate" class="form-control" />
            </div>
            <div class="col-md-3">
                <label for="invoiceFilterEndDate" class="form-label">To date</label>
                <input type="date" id="invoiceFilterEndDate" class="form-control" />
            </div>
            <div class="col-md-3" style="display:flex; align-items:flex-end; gap:8px;">
                <button id="applyInvoiceDateFilter" class="btn btn-primary">Apply</button>
                <button id="resetInvoiceDateFilter" class="btn btn-secondary">Reset</button>
            </div>
        </div>
        <table class="table table-bordered table-striped table-hover ajaxTable datatable datatable-Invoice">
            <thead>
                <tr>
                    <th width="10">Select</th>
                    <th>{{ trans('cruds.invoice.fields.user') }}</th>
                    <th>Tower</th>
                    <th>Unit</th>
                    <th>{{ trans('cruds.invoice.fields.billing_for') }}</th>
                    <th>{{ trans('cruds.invoice.fields.amount') }}</th>
                    <th>Remainder</th>
                    <th>{{ trans('cruds.invoice.fields.due') }}</th>
                    <th>Last Payment</th>
                    <th>{{ trans('cruds.invoice.fields.status') }}</th>
                    <th>Add Payment</th>
                    <th>Email Invoice</th>
                    <th>Actions</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<!-- Add Payment Modal -->
<div class="modal fade" id="addPaymentModal" tabindex="-1" aria-labelledby="addPaymentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="addPaymentForm">
                <div class="modal-header">
                    <h5 class="modal-title" id="addPaymentModalLabel">Add Payment</h5>
                    <button type="button" class="fa fa-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="invoiceId" name="invoiceId">
                    <div class="mb-3">
                        <label for="paymentAmount" class="form-label">Payment Amount</label>
                        <input type="number" step="0.01" class="form-control" id="paymentAmount" name="paymentAmount" required>
                        <small>Remaining Amount: <span id="remainingAmount"></span></small>
                    </div>
                    <div class="mb-3">
                        <label for="paymentType" class="form-label">Payment Type</label>
                        <select class="form-control" id="paymentType" name="paymentType" required>
                            <option value="" disabled selected>Select Payment Type</option>
                            <option value="Cash">Cash</option>
                            <option value="Card">Card</option>
                            <option value="Check">Check</option>
                            <option value="Bank Transfer">Bank Transfer</option>
                            <option value="Online Payment">Online Payment</option>
                            <option value="DAMAC Settlement Promotion 2024">DAMAC Settlement Promotion 2024</option>
                        </select>
                    </div>
                    <!-- Payment Date Field -->
                    <div class="mb-3">
                        <label for="paymentDate" class="form-label">Payment Date</label>
                        <input 
                            type="date" 
                            class="form-control" 
                            id="paymentDate" 
                            name="paymentDate" 
                            required
                        >
                    </div>
                    <!-- Notes Field -->
                    <div class="mb-3">
                        <label for="paymentNotes" class="form-label">Notes</label>
                        <textarea class="form-control" id="paymentNotes" name="paymentNotes" rows="2" placeholder="Enter any notes (optional)"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add Payment</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="massInvoiceModal" tabindex="-1" aria-labelledby="massInvoiceModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="massInvoiceForm">
                <div class="modal-header">
                    <h5 class="modal-title" id="massInvoiceModalLabel">Generate Invoices for All Owners</h5>
                    <button type="button" class="fa fa-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="ratePerSqm" class="form-label">Rate Per SQM</label>
                        <input type="number" class="form-control" id="ratePerSqm" name="ratePerSqm" step="0.01" required>
                    </div>
                    <div class="mb-3">
                        <label for="invoiceDescription" class="form-label">Invoice Description</label>
                        <textarea class="form-control" id="invoiceDescription" name="invoiceDescription" rows="3" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Generate Invoices</button>
                </div>
            </form>
        </div>
    </div>
</div>


@endsection

@section('scripts')
@parent
<script>
$(function () {
    let table = $('.datatable-Invoice').DataTable({
        processing: true,
//         serverSide: true,
        retrieve: true,
        aaSorting: [],
        ajax: {
            url: "{{ route('admin.invoices.index') }}",
            data: function (d) {
                d.start_date = $('#invoiceFilterStartDate').val();
                d.end_date = $('#invoiceFilterEndDate').val();
            }
        },
        columns: [
            { data: 'placeholder', name: 'placeholder' },
            { data: 'user_name', name: 'user.name' },
            { data: 'tower_name', name: 'tower_name' },
            { data: 'unit_name', name: 'unit.name' },
            { data: 'billing_for', name: 'billing_for' },
            { data: 'amount', name: 'amount' },
            { data: 'remaining_amount', name: 'remaining_amount', orderable: false, searchable: false },
            { data: 'due', name: 'due' },
            { data: 'last_payment_date', name: 'last_payment_date' },
            { data: 'status', name: 'status' },
            { data: 'add_payment', name: 'add_payment', orderable: false, searchable: false },
            { data: 'send_email', name: 'send_email', orderable: false, searchable: false },
            { data: 'actions', name: '{{ trans('global.actions') }}' }
        ],
        order: [[1, 'desc']],
        pageLength: 100,
    });

    $('#applyInvoiceDateFilter').on('click', function () {
        table.ajax.reload();
    });

    $('#resetInvoiceDateFilter').on('click', function () {
        $('#invoiceFilterStartDate').val('');
        $('#invoiceFilterEndDate').val('');
        table.ajax.reload();
    });

    // Handle Add Payment button click
    $(document).on('click', '.add-payment', function () {
        const invoiceId = $(this).data('id');
        const remainingAmount = $(this).data('remaining');

        $('#invoiceId').val(invoiceId);
        $('#paymentAmount').val('').attr('max', remainingAmount);
        $('#remainingAmount').text(remainingAmount);
        $('#paymentNotes').val('');
        $('#addPaymentModal').modal('show');
    });

    // Submit Add Payment form
    $('#addPaymentForm').on('submit', function (e) {
        e.preventDefault();

        const invoiceId = $('#invoiceId').val();
        const paymentAmount = $('#paymentAmount').val();
        const paymentType = $('#paymentType').val();
        const paymentNotes = $('#paymentNotes').val();
        const payment_date = $('#paymentDate').val();

        $.ajax({
            url: "{{ route('admin.invoices.addPayment') }}",
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                invoice_id: invoiceId,
                payment_amount: paymentAmount,
                payment_type: paymentType,
                notes: paymentNotes,
                payment_date: payment_date
            },
            success: function (response) {
                $('#addPaymentModal').modal('hide');

                // SweetAlert success message
                Swal.fire({
                    icon: 'success',
                    title: 'Payment Added',
                    text: 'The payment has been successfully recorded!',
                    timer: 2000,
                    showConfirmButton: false
                });

                table.ajax.reload(null, false);
            },
            error: function (xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to add payment: ' + xhr.responseJSON.message
                });
            }
        });
    });
});
</script>
<script>
$('#massInvoiceForm').on('submit', function (e) {
    e.preventDefault();

    const ratePerSqm = $('#ratePerSqm').val();
    const invoiceDescription = $('#invoiceDescription').val();

    $.ajax({
        url: "{{ route('admin.invoices.massGenerate') }}", // Add this route
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            rate_per_sqm: ratePerSqm,
            description: invoiceDescription,
        },
        success: function (response) {
            $('#massInvoiceModal').modal('hide');
            alert('Invoices generated successfully!');
            location.reload(); // Reload to see the changes
        },
        error: function (xhr) {
            alert('Error: ' + xhr.responseJSON.message);
        }
    });
});
</script>
<script>
$(document).on('click', '.send-email', function() {
    let invoiceId = $(this).data('id');
    let userEmail = $(this).data('user-email');

    if (!userEmail) {
        alert("This user does not have an email address.");
        return;
    }

    if (!confirm("Are you sure you want to send the invoice email to " + userEmail + "?")) {
        return;
    }

    $.ajax({
        url: '{{ route("invoices.sendEmail") }}',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            invoice_id: invoiceId,
            email: userEmail
        },
        success: function(response) {
            alert(response.message);
        },
        error: function(xhr) {
            alert("Failed to send email. Please try again.");
        }
    });
});
</script>
@endsection