@extends('master_header')

@section('content')

    @include('includes.header-topbar')


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


                <section>
                    <div class="header_container">
                        <div class="header_wrapper">
                            <img
                                src="/assets/images/logo.png"
                                alt="logo"
                                class="img-responsive"
                            />
                            <p>Serial No: <span class="red">AH0116</span></p>
                        </div>
                    </div>
                    <div class="info-container">
                        <div class="apdc-title">
                            <p>APDC HOMES</p>
                            <p>Clearance Certificate</p>
                        </div>
                        <div class="input-group">
                            <div class="mobile-width">
                                <div class="placeholder">Name</div>
                                <input type="text" name="name" value="{{$customer_name}}" class="mobile-input" />
                                <div class="placeholder">Date</div>
                                <input type="text" name="date" value="{{ now()->format('l, F j, Y') }}" class="mobile-input" />

                            </div>
                        </div>
                        <div class="info">Section One</div>
                        <div class="input-group">
                            <div class="placeholder">House Type</div>
                            <input type="text" name="house_type" value="{{$house_type}}" class="mobile-input" />
                        </div>
                        <div class="textarea-group">
                            <div class="placeholder">Description</div>
                            <textarea name="house_type" class="mobile-input">{{$description}}</textarea>
                        </div>
                        <div class="textarea-group">
                            <div class="placeholder">House Address</div>
                            <textarea name="house_type" class="mobile-input">{{$address}}</textarea>
                        </div>
                        {{--<div class="info">Section Two</div>--}}
                        {{--<div class="check-container">
                            <div class="input-group">
                                <label>NHF Funded</label>
                                <input
                                    type="checkbox"
                                    id="nhf_funded"
                                    name="nhf_funded"
                                    class="check-size"
                                />
                            </div>
                            <div class="input-group">
                                <label>NHF Non Funded</label>
                                <input
                                    type="checkbox"
                                    id="nhf_non_funded"
                                    name="nhf_non_funded"
                                    class="check-size"
                                />
                            </div>
                            <div class="input-group">
                                <label>Other</label>
                                <input
                                    type="checkbox"
                                    id="other"
                                    name="other"
                                    class="check-size"
                                />
                            </div>
                        </div>--}}
                        <div class="info">Section Two</div>
                        <table style="margin-top: 20px">
                            <tr>
                                <th style="font-weight: bold">FEES PAID</th>
                                <th>Paid</th>
                                <th>Outstanding</th>
                                <th>Amount Outstanding</th>
                            </tr>
                            <tr>
                                <td>FM</td>
                                <td>
                                    <input
                                        type="checkbox"
                                        id="fm1"
                                        name="fm1"
                                        class="check-size"
                                    />
                                </td>
                                <td>
                                    <input
                                        type="checkbox"
                                        id="fm2"
                                        name="fm2"
                                        class="check-size"
                                    />
                                </td>
                                <td>
                                    <input
                                        type="text"
                                        id="fm3"
                                        name="fm3"
                                        class="check-size-max"
                                    />
                                </td>
                            </tr>
                            <tr>
                                <td>Survey Plan</td>
                                <td>
                                    <input
                                        type="checkbox"
                                        id="survey"
                                        name="survey1"
                                        class="check-size"
                                    />
                                </td>
                                <td>
                                    <input
                                        type="checkbox"
                                        id="survey"
                                        name="survey2"
                                        class="check-size"
                                    />
                                </td>
                                <td>
                                    <input
                                        type="text"
                                        id="survey"
                                        name="survey3"
                                        class="check-size-max"
                                    />
                                </td>
                            </tr>
                            <tr>
                                <td>Water/ Meter</td>
                                <td>
                                    <input
                                        type="checkbox"
                                        id="water_light"
                                        name="water_light1"
                                        class="check-size"
                                    />
                                </td>
                                <td>
                                    <input
                                        type="checkbox"
                                        id="water_light"
                                        name="water_light2"
                                        class="check-size"
                                    />
                                </td>
                                <td>
                                    <input
                                        type="text"
                                        id="water_light"
                                        name="water_light3"
                                        class="check-size-max"
                                    />
                                </td>
                            </tr>
                            <tr>
                                <td>Public Mains Water Connection</td>
                                <td>
                                    <input
                                        type="checkbox"
                                        id="public_main"
                                        name="public_main1"
                                        class="check-size"
                                    />
                                </td>
                                <td>
                                    <input
                                        type="checkbox"
                                        id="public_main"
                                        name="public_main2"
                                        class="check-size"
                                    />
                                </td>
                                <td>
                                    <input
                                        type="text"
                                        id="public_main"
                                        name="public_main3"
                                        class="check-size-max"
                                    />
                                </td>
                            </tr>
                        </table>
                        <div class="info">Section Three</div>
                        <table style="margin-top: 20px">
                            <tr>
                                <th style="font-weight: bold">SIGN OFF</th>
                                <th style="text-align: center">Name</th>
                                <th style="text-align: center">Signature</th>
                                <th>Date</th>
                            </tr>
                            <tr>
                                <td>Accounts</td>
                                <td>
                                    <input type="text" id="accounts" name="accounts1" />
                                </td>
                                <td>
                                    <input type="text" id="accounts" name="accounts2" />
                                </td>
                                <td>
                                    <input type="text" id="accounts" name="accounts3" />
                                </td>
                            </tr>
                            <tr>
                                <td>Sales & Marketing</td>
                                <td>
                                    <input type="text" id="business_dev" name="business_dev1" />
                                </td>
                                <td>
                                    <input type="text" id="business_dev" name="business_dev2" />
                                </td>
                                <td>
                                    <input type="text" id="business_dev" name="business_dev3" />
                                </td>
                            </tr>
                        </table>
                        <div class="info center">APDC FACILITY MANAGEMENT</div>
                        <div class="input-group">
                            <div class="placeholder">Name</div>
                            <input type="text" name="facility_mgt_name" />
                        </div>
                        <div class="input-group">
                            <div class="mobile-width">
                                <div class="placeholder">Signature</div>
                                <input type="text" name="facility_mgt_sign" class="mobile-input" />
                                <div class="placeholder">Date</div>
                                <input type="text" name="facility_mgt_date" class="mobile-input" />
                            </div>
                        </div>
                        <p>Official Stamp</p>
                    </div>
                </section>


                <!--end card-->

                <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>
                </div>
                <br>

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


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




<style>
    * {
        font-family: 'Poppins', sans-serif;
    }

    section {
        padding: 0 10%;
    }

    .mobile-width {
        display: flex;
        width: 100%;
    }

    .mobile-input {
        width: 100%;
    }

    .header_container {
        margin-top: 2%;
        width: 100%;
    }

    .header_wrapper>img {
        height: auto;
    }

    .img-responsive {
        width: 200px;
        height: auto;
    }

    .red {
        color: #F00;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .header {
        width: 100%;
        display: flex;
        margin: 0 auto;
    }

    .logo_header {
        width: 50%;
    }

    .logo_header>img {
        width: 200px;
        height: auto;
    }

    .apdc-title>p:nth-child(1) {
        font-size: 28px;
        color: #489153;
        line-height: normal;
        font-weight: 700;
        font-family: "Inter", sans-serif;
    }

    .apdc-title>p:nth-child(2) {
        color: #212529;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
        text-transform: uppercase;
    }

    .info-container {
        margin-top: 5%;
    }

    .info {
        background-color: #489153;
        padding: 10px 0px 10px 7px;
        text-transform: uppercase;
        color: #fff;
        font-family: Inter;
        font-weight: 500;
        margin-top: 30px;
        width: 100%;
    }

    .input-group {
        margin-top: 20px;
        display: flex;
    }

    .textarea-group {
        margin-top: 40px;
        display: flex;
    }



    .placeholder {
        padding: 10px 15px;
        background: rgba(172, 181, 189, 0.15);
        font-size: 15px;
        min-width: fit-content;
    }

    .placeholder>span {
        color: #858E96;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    input[type='text'] {
        border: 1px solid rgba(172, 181, 189, 0.3);
        padding: 10px 4px;
        width: 100%;
    }

    textarea[type='text'] {
        border: 1px solid rgba(172, 181, 189, 0.3);
        padding: 10px 4px;
        width: 100%;
    }

    select {
        /* border: none; */
        border: 1px solid rgba(172, 181, 189, 0.30);
        width: 100%;
    }

    .check-container {
        display: flex;
        justify-content: space-between;
    }

    .check-size {
        width: 30px;
        height: 30px;
        border: 1px solid rgba(172, 181, 189, 0.30) !important;
        flex-shrink: 0;

    }

    .check-size-max {
        width: 176px;
        height: 30px;

    }

    .input-group>label {
        margin-top: 5px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th {
        font-weight: normal;
    }

    th,
    td {
        text-align: left;
    }

    td:nth-child(3) {
        padding: 0 3%;
    }

    th:nth-child(4) {
        text-align: center;
    }

    @media(max-width:900px) {
        .input-group {
            display: inline-block;
            width: 100%;
        }

        .mobile-width {
            display: inline-block;
            margin-top: 10px;
        }

        .placeholder {
            margin-top: 20px;
        }

        .mobile-input {
            width: 100%;
        }

        .check-container {
            display: inline-block;
        }

        table {
            font-size: 12px;
            /* Reduce font size for smaller screens */
        }

        th,
        td {
            padding: 4px;
            /* Reduce padding for smaller screens */
        }

    }
</style>
@endsection
