@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">Payment Receipt</h4>

                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">Payment</a></li>
                                    <li class="breadcrumb-item active">Receipt</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>OFFICIAL RECEIPT</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_name}}</div>
                                    <div>ADDRESS: {{$customer_address}}</div>
                                    <div>&nbsp;</div>
                                    <div>BEING: {{$house_type}}, {{$project}}</div>
                                </div>
                            </td>
                            <td style="width: 30%; border: 1px solid black; padding: 10px;" >
                                <p>RECEIPT NO: 0000021085</p>
                                <p>DATE: {{$date_order}}</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: 20%; height: 13px;">CODE</td>
                            <td style="width: 50%; height: 13px;">&nbsp; &nbsp; DESCRIPTION</td>
                            <td style="width: 30%; height: 13px;">&nbsp;AMOUNT</td>
                        </tr>
                        <tr style="height: 70.9531px; ">
                            <td style="width: 20%; height: 150.9531px; border: 1px solid black;">&nbsp; 410705</td>
                            <td style="width: 50%; height: 150.9531px; border: 1px solid black;">&nbsp;  {{$house_type}}, {{$project}}</td>
                            <td style="width: 30%; height: 150.9531px; border: 1px solid black;">
                                <br>
                                <p></p>
                                <p>₦ {{$amount_paid}}</p>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <p>&nbsp;</p>
                    <p>TELLER NO:</p>
                    <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p>
                    <p>CHEQUE NO:&nbsp; &nbsp; &nbsp; DTRSF</p>
                    <div style="display: inline-block; width: 100%;">
                        <span style="width: 50%; display: inline-block;">BANK: ZENITH </span>
                        <span style="width: 50%; text-align: right;">Receiver's logo:_ _ _ _ _ _ _ _ _ _ _ _</span>
                    </div>

                    <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 -->

@endsection