<!doctype html>
<html lang="en" data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none" data-preloader="disable">

<head>

    <meta charset="utf-8" />
    <title>APDC Homes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
    <meta content="Themesbrand" name="author" />
    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <!-- gridjs css -->
    <link rel="stylesheet" href="assets/libs/gridjs/theme/mermaid.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


    <!-- Layout config Js -->
    <script src="assets/js/layout.js"></script>
    <!-- Bootstrap Css -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Icons Css -->
    <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <!-- App Css-->
    <link href="assets/css/app.min.css" rel="stylesheet" type="text/css" />
    <!-- custom Css-->
    <link href="assets/css/custom.min.css" rel="stylesheet" type="text/css" />

</head>

<body>

<!-- Begin page -->
<div id="layout-wrapper">

    @include('includes.header-topbar')

    <!-- ========== App Menu ========== -->
    @include('includes.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>
                                <p>{{number_format($customer->discount, 0) ?? ''}}</p>
                            </td>
                            <td style="width: 15%; height: 150.9531px; border: 1px solid black;">
                                <br>
                                <p></p>
                                <p>₦ {{ number_format($customer->amount * $customer->discount / 100) ?? ''}}</p>
                            </td>
                            <td style="width: 10%; height: 150.9531px; border: 1px solid black;">
                                <br>
                                <p></p>
                                <p>₦ {{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>
<!-- END layout-wrapper -->



<!--start back-to-top-->
<button onclick="topFunction()" class="btn btn-danger btn-icon" id="back-to-top">
    <i class="ri-arrow-up-line"></i>
</button>
<!--end back-to-top-->

<!--preloader-->
<div id="preloader">
    <div id="status">
        <div class="spinner-border text-primary avatar-sm" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
</div>



<!-- JAVASCRIPT -->
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/libs/simplebar/simplebar.min.js"></script>
<script src="assets/libs/node-waves/waves.min.js"></script>
<script src="assets/libs/feather-icons/feather.min.js"></script>
<script src="assets/js/pages/plugins/lord-icon-2.1.0.js"></script>
<script src="assets/js/plugins.js"></script>

<!-- prismjs plugin -->
<script src="assets/libs/prismjs/prism.js"></script>

<!-- gridjs js -->
<script src="assets/libs/gridjs/gridjs.umd.js"></script>
<!-- gridjs init -->
<script src="assets/js/pages/gridjs.init.js"></script>

<!-- App js -->
<script src="assets/js/app.js"></script>
</body>


</html>
