@extends('master_header')

@section('content')

    @include('includes.header-topbar')

    <!-- ========== App Menu ========== -->
    @include('sales.sidebar-menu')
    <!-- Left Sidebar End -->
    <!-- Vertical Overlay-->
    <div class="vertical-overlay"></div>

    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0">Discount Invoice</h4>

                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">Application</a></li>
                                    <li class="breadcrumb-item active">Discount Invoice</li>
                                </ol>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- end page title -->

                <div style="margin: 0 auto; max-width: 1200px; padding-inline: 1rem;">
                    <h1 style="text-align: center;"><strong>Abuja Property Development Company LTD</strong></h1>
                    <p style="text-align: center;">plot 1329, Peace Drive, (Behind AGIS BUILDING) Area 11 Garki, Abuja Tel:081000013010</p>
                    <p style="text-align: center;">&nbsp;</p>
                    <h3 style="text-align: center;"><strong>Discount Invoice</strong></h3>
                    <table style="height: 15px; width:100%">
                        <tbody>
                        <tr >
                            <td style="width: 70%; border: 1px solid black; padding: 10px;">
                                <div>
                                    <div>RECEIVED FROM: {{$customer->customer_name}}</div>
                                    <div>ADDRESS: {{$customer->office_address}}</div>
                                    <div>&nbsp;</div>
                                    <div>BEING: {{$customer->house_type}}, {{$customer->project}}</div>
                                </div>
                            </td>
                            <td style="width: 30%; border: 1px solid black; padding: 10px;" >
                                <p>DATE: {{now()}}</p>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <p>&nbsp;</p>
                    <table style="height: 130px; width: 100%;">
                        <tbody>
                        <tr style="height: 13px; background-color: black; color: white;">
                            <td style="width: 10%; height: 13px;">CODE</td>
                            <td style="width: 30%; height: 13px;">&nbsp; &nbsp; DESCRIPTION</td>
                            <td style="width: 15%; height: 13px;">&nbsp; &nbsp; PRICE</td>
                            <td style="width: 15%; height: 13px;">&nbsp; &nbsp; DISCOUNT (%)</td>
                            <td style="width: 15%; height: 13px;">&nbsp; &nbsp; DISCOUNT (₦)</td>
                            <td style="width: 30%; height: 13px;">&nbsp;TOTAL AMOUNT DUE</td>
                        </tr>
                        <tr style="height: 70.9531px; ">
                            <td style="width: 10%; height: 150.9531px; border: 1px solid black;">&nbsp; 410705</td>
                            <td style="width: 30%; height: 150.9531px; border: 1px solid black;">&nbsp;  {{$customer->house_type}}, {{$customer->project}}</td>
                            <td style="width: 15%; height: 150.9531px; border: 1px solid black;">
                                <br>
                                <p></p>
                                <p>₦ {{ number_format($customer->amount) ?? '' }}</p>
                            </td>
                            <td style="width: 15%; height: 150.9531px; border: 1px solid black;">
                                <br>
                                <p></p>
                                <input type="number" id="discountInput" value="{{ $customer->discount ?? '' }}">
                                <p id="discountAmount">{{ number_format($customer->amount * ($customer->discount / 100)) ?? '' }}</p>
                            </td>
                            <td style="width: 15%; height: 150.9531px; border: 1px solid black;">
                                <br>
                                <p></p>
                                <p id="discounttotalAmount">{{ number_format($customer->amount * ($customer->discount / 100)) ?? '' }}</p>
                            </td>
                            <td style="width: 10%; height: 150.9531px; border: 1px solid black;">
                                <br>
                                <p></p>
                                <p id="finalAmount">₦ {{ number_format($customer->amount - ($customer->amount * ($customer->discount / 100))) ?? '' }}</p>
                            </td>

                        </tr>
                        </tbody>
                    </table>
                    <p>&nbsp;</p>

                    <p>Only Company's Official Receipt bearing authorised signature will be recognised</p>
                </div>
                <!--end row-->


                <div class="hstack gap-2 justify-content-end d-print-none mt-4">
                    <a href="javascript:window.print()" class="btn btn-success"><i class="ri-printer-line align-bottom me-1"></i> Print</a>
                    <form action="{{ route('send.receipt.email') }}" method="post">
                        @csrf
                        <input type="hidden" name="customer_name" value="{{$customer_name ?? ''}}">
                        <input type="hidden" name="customer_address" value="{{$customer_address ?? ''}}">
                        <button type="submit" class="btn btn-primary">
                            <i class="ri-mail-send-fill align-bottom me-1"></i> Send
                        </button>
                    </form>
                </div>

            </div><!-- container-fluid -->
        </div><!-- End Page-content -->

        @include('includes.footer')
    </div><!-- end main content-->
    <!-- end main content-->

</div>

<script>
    document.getElementById('discountInput').addEventListener('input', function () {
        const discountInput = parseFloat(this.value) || 0;
        const amount = parseFloat({{ $customer->amount }}) || 0;

        const discountAmount = (amount * discountInput) / 100;
        const finalAmount = amount - discountAmount;

        document.getElementById('discountAmount').textContent = '₦ ' + discountAmount.toFixed(2);
        document.getElementById('finalAmount').textContent = '₦ ' + finalAmount.toFixed(2);
        document.getElementById('discounttotalAmount').textContent = '₦ ' + discountAmount.toFixed(2);


    });
</script>
<!-- END layout-wrapper -->


@endsection