@extends($master)

@section('title', 'Update Invoice')

@section('body')
    <!-- PAGE-HEADER -->
    <div class="page-header">
        <div>
            <h1 class="page-title">Update Invoice</h1>
        </div>
        <div class="ms-auto pageheader-btn">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">Apps</li>
                <li class="breadcrumb-item"><a href="javascript:void(0);">Invoices</a></li>
                <li class="breadcrumb-item active" aria-current="page">Update Invoice</li>
            </ol>
        </div>
    </div>
    <!-- PAGE-HEADER END -->

    <!--ROW OPENED-->
    <div class="row">
        <div class="col-lg-12 col-md-12">
            <div class="card">
                <div class="card-header border-bottom">
                    <h4 class="mb-0">Invoice Information</h4>
                </div>

                <div class="card-body">
                    <!-- Search Invoice Form -->
                    <form action="{{route('find.invoice')}}" method="post">
                        @csrf
                        <div class="row p-5 border-bottom">
                            <div class="col-sm-12 col-md col-xl">
                                <div class="form-group">
                                    <label for="invoiceSearch" class="form-label text-muted">Search Invoice</label>
                                    <input type="number" class="form-control" name="invoiceId" value="" placeholder="Enter Invoice ID">
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-3 col-xl">
                                <div class="form-group">
                                    <label class="form-label text-muted d-block">&nbsp;</label>
                                    <button type="submit" class="btn btn-success">Find</button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <!-- Display Invoice if Found -->
                    @if(isset($invoice))
                        <form id="invoiceForm" action="{{ route('invoice.update') }}" method="POST">
                            @csrf
                            <div class="row p-5">
                                <!-- Client Name -->
                                <div class="col-sm-12 col-md col-xl">
                                    <div class="form-group">
                                        <label class="form-label text-muted">Client Name</label>
                                        <input type="text" class="form-control" value="{{$invoice->client->name}}" readonly>
                                    </div>
                                </div>

                                <!-- Total Amount -->
                                <div class="col-sm-12 col-md col-xl">
                                    <div class="form-group">
                                        <label class="form-label text-muted">Total Amount</label>
                                        <input type="text" class="form-control" id="totalAmount" value="{{$invoice->total}}" readonly>
                                    </div>
                                </div>

                                <!-- Paid Amount (Already received) -->
                                <div class="col-sm-12 col-md col-xl">
                                    <div class="form-group">
                                        <label class="form-label text-muted">Paid</label>
                                        <input type="number" class="form-control" id="paidAmount" value="{{$invoice->received}}" readonly>
                                    </div>
                                </div>

                                <!-- Amount Received (New input) -->
                                <div class="col-sm-12 col-md col-xl">
                                    <div class="form-group">
                                        <label class="form-label text-muted">Received</label>
                                        <input type="number" class="form-control" id="receivedAmount" name="received" value="">
                                    </div>
                                </div>

                                <!-- Amount Due -->
                                <div class="col-sm-12 col-md col-xl">
                                    <div class="form-group">
                                        <label class="form-label text-muted">Amount Due</label>
                                        <input type="text" class="form-control" id="amountDue" value="{{($invoice->total - $invoice->received)}}" readonly>
                                    </div>
                                </div>
                                <input type="hidden" name="id" value="{{$invoice->id}}">
                                <!-- Submit Button -->
                                <div class="btn-list text-end">
                                    <button type="submit" class="btn btn-primary me-sm-0 me-2">Update Invoice</button>
                                </div>
                            </div>
                        </form>
                    @endif

                    <script>
                        // Listen for input changes in the Received Amount field
                        document.getElementById('receivedAmount').addEventListener('input', function() {
                            const totalAmount = parseFloat(document.getElementById('totalAmount').value);
                            const paidAmount = parseFloat(document.getElementById('paidAmount').value);
                            const receivedAmount = parseFloat(this.value) || 0;  // Fallback to 0 if input is empty

                            // Calculate the new amount due
                            const newDueAmount = totalAmount - (paidAmount + receivedAmount);

                            // Update the Amount Due field
                            document.getElementById('amountDue').value = newDueAmount.toFixed(2);
                        });

                        // Validate form submission
                        document.getElementById('invoiceForm').addEventListener('submit', function(event) {
                            const totalAmount = parseFloat(document.getElementById('totalAmount').value);
                            const paidAmount = parseFloat(document.getElementById('paidAmount').value);
                            const receivedAmount = parseFloat(document.getElementById('receivedAmount').value) || 0;

                            // Calculate the current due amount
                            const amountDue = totalAmount - paidAmount;

                            // Check if the received amount is greater than the due amount
                            if (receivedAmount > amountDue) {
                                event.preventDefault();  // Prevent form submission
                                alert('Received amount cannot be greater than the remaining due amount.');
                            }
                        });
                    </script>

                </div>
            </div>
        </div>
    </div>
    <!--ROW CLOSED-->
@endsection