@extends('master_header')

@section('content')

    @include('includes.header-topbar')

    <!-- ========== App Menu ========== -->
    @include('md.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">Final Letter Preview</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">Final Letter Preview</li>
                                </ol>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- end page title -->
                <div class="card" id="demo" contenteditable="true">
                <div
                    style="
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid black;
      "
                >
                    <div class="flex-grow-1">
                        <img src="{{ asset('assets/images/logo.png') }}" class="card-logo card-logo-dark" alt="logo" height="70">

                    </div>
                    <div>
                        <p style="font-weight: bold; font-size: 1.5rem">
                            Abuja Property Development <br> Company Limited
                        </p>
                        <div>
                            <p>Plot 1329 Peace Drive, cultural Spine (Behind Agis), Area 11.</p>
                        </div>
                        <div>
                            <p>Garki, Abuja, Mobile: +234 815 061 8322.</p>
                        </div>
                        <div>
                            <p>website: www.apdc.com.ng</p>
                        </div>
                    </div>
                </div>
                <div style="margin-top: 5rem; text-decoration: underline; padding: 0px 15%">
                    <p style="font-size: 20px">Dear Sir/Madame</p>
                    <p style="font-size: 27px; text-transform: uppercase">
                        Final letter of allocation of {{$house_type ?? ''}} at {{$project ?? ''}}, abuja.
                    </p>
                </div>
                <div style="margin-top: 2rem; font-size: 1.3rem; padding: 0px 15%">
                    <p>
                        Please refer to our offer letter dated {{ now()->format('d F Y') }} for a one-bedroom
                        luxury flat at our above referenced estate and your acceptance of said
                        offer. following receipt of the sum of N {{$amount ?? ''}} from you, being
                        {{number_format($percentage_paid)}}% payment for one unit of {{$house_type ?? ''}} at our above
                        referenced estate, provisionally allocated a housing unit with the
                        following details.
                    </p>
                </div>
                <div style="margin-top: 2rem; padding: 0px 15%">
                    <div style="display: flex; justify-content: space-between">
                        <p style="font-weight: bold">House Type</p>
                        <p>{{$house_type ?? ''}}</p>
                    </div>
                    <div style="display: flex; justify-content: space-between">
                        <p style="font-weight: bold">Project</p>
                        <p>
                            {{$project ?? ''}}
                        </p>
                    </div>

                    <div style="display: flex; justify-content: space-between">
                        <p style="font-weight: bold">Price:</p>
                        <p>N {{number_format($total_price->price_total)}}</p>
                    </div>
                    <div style="display: flex; justify-content: space-between">
                        <p style="font-weight: bold; display: inherit">Less payment received</p>
                        @php
                            $totalPrice = floatval(str_replace(',', '', $total_price->price_total));
                            $cleanedAmount = floatval(str_replace(',', '', $amount));
                        @endphp

                        <p>N {{ number_format($totalPrice - $cleanedAmount, 2) }}</p>

                    </div>
                    <div style="display: flex; justify-content: space-between">
                        <p style="font-weight: bold">Balance payable</p>
                        <p>N {{ number_format($totalPrice, 2) }}</p>
                    </div>
                </div>
                <div style="margin-top: 2rem; overflow-x: hidden; padding: 0px 15%">
                    <div style="margin-top: 6rem">
                        <p>Please note that:</p>
                        <p>
                            Balance payment in the sum of <b>N820,000.00</b> is expected on or
                            before october, 2023 and if not received by that date, the company is
                            at liberty to take legally cognizable means in recovering same.
                        </p>
                    </div>
                    <div style="margin-top: 3rem">
                        <hr />
                    </div>
                    <div
                        style="
          text-align: center;
          font-size: 1.4rem;
          text-decoration: underline;
        "
                    >
                        <p>Board of Directors</p>
                    </div>
                    <div style="display: flex; justify-content: space-around;">
                        <div >
                            <p style="font-weight: bold">Alh. Mohammed Idris</p>
                            <p style="font-size: 0.89rem">Chairman</p>
                        </div>
                        <div>
                            <p style="font-weight: bold">Bldr Lawal Aliyu Magaji</p>
                            <p style="font-size: 0.89rem">Ag. Managing Director / CEO</p>
                        </div>
                    </div>

                    <div style="display: flex; justify-content: space-between;">
                        <ul style="margin-bottom: 15px;">
                            <li>Engr. E.A Oluwadamisi</li>
                            <li>Esr. Adamu Kasimu</li>
                            <li>Hon Yakubu Adamu</li>
                        </ul>
                        <ul>
                            <li>Hon. Mohammed A. Sadiq</li>
                            <li>Ibrahim Aliyu</li>
                            <li>Arc. Gabriel Yakubu Aduku</li>
                        </ul>
                        <ul>
                            <li>Kabir Garba</li>
                            <li>Engr Obiora Felix Nwankwo</li>
                            <li>Tpl Mukthar Galadima</li>
                        </ul>
                    </div>
                </div>
                </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.offer.email') }}" method="post">
                        @csrf
                        <input type="hidden" name="id" value="{{$offer->id ?? ''}}">
                        <button type="submit" class="btn btn-primary">
                            <i class="ri-mail-send-fill align-bottom me-1"></i> Send
                        </button>
                    </form>
                </div>

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

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

</div>
<!-- END layout-wrapper -->

@endsection