@extends('layouts.app')
@section('title')
Application Form 
@stop

@section('content')

<div class="container-fluid">
    <div class="row printableArea"  id="content" style="text-transform: uppercase;">
        <div class="col-lg-12">
            <div class="white-box border-none mt-95">
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <div class="row" style="margin-top: 4%;">
                            <div class="col-xs-8 col-sm-6">REGISTRATION NO.</div>
                            <div class="col-xs-4 col-sm-6" style="border-bottom: 1px solid">Sr00001</div>
                            <div class="col-xs-12 col-sm-12">
                                <div class="unit-box"><b>UNIT NO.</b> UN-001</div>
                            </div>
                            <div class="col-xs-12 col-sm-12">
                                <div class="unit-box"><b>SIZE</b> 15000sqft</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <div class="row" style="margin-top: 4%;">
                            <div class="col-xs-8 col-sm-6">APPLICATION NO.</div>
                            <div class="col-xs-4 col-sm-6" style="border-bottom: 1px solid">Ref00001</div>
                            <div class="col-xs-12 col-sm-12">
                                <div class="unit-box"><b>UNIT TYPE</b> UN-TY-01</div>
                            </div>
                            <div class="col-xs-12 col-sm-12">
                                <div class="unit-box"><b>FLOOR</b> 8th Floor</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <span class="book-form">APPLICATION FORM</b></span><br>
                        <div style="height: 180px; width: 150px; border:3px solid;float: right;"></div>
                    </div>
                </div>
            </div>
            <div class="white-box border-none ">
                <div class="row">
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row">
                            <div class="col-xs-3 col-sm-2">Name:</div>
                            <div class="col-xs-9 col-sm-10" style="border-bottom: 1px solid">Customer name</div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row">
                            <div class="col-xs-4 col-sm-3">Father's/Husband's Name:</div>
                            <div class="col-xs-8 col-sm-9" style="border-bottom: 1px solid">Customer Father</div>
                        </div>
                    </div>
                    <div class="col-sm-10 col-xs-10 mt-18">
                        <div class="row">
                            <div class="col-xs-4 col-sm-3">CNIC/Passport No.</div>
                            <div class="col-xs-8 col-sm-6">
                                <span class="cnic-box">1</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">-</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">-</span>
                                <span class="cnic-box">2</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row" >
                            <div class="col-xs-3 col-sm-2">Mail Address</div>
                            <div class="col-xs-9 col-sm-10" style="border-bottom: 1px solid">Block Y-12, Office D-12, Business Bay Rawalpindi.</div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row">
                            <div class="col-xs-3 col-sm-3">Residential Address</div>
                            <div class="col-xs-9 col-sm-9" style="border-bottom: 1px solid">Block Y-12, Office D-12, Business Bay Rawalpindi.r</div>
                        </div>
                    </div>
                    <div class="col-sm-7 col-xs-7 mt-18">
                        <div class="row">
                            <div class="col-xs-3 col-sm-3">Phone res:</div>
                            <div class="col-xs-9 col-sm-9" style="border-bottom: 1px solid">03555686968</div>
                        </div>
                    </div>
                    <div class="col-sm-5 col-xs-5 mt-18">
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">Cell:</div>
                            <div class="col-xs-10 col-sm-10" style="border-bottom: 1px solid">03125485568</div>
                        </div>
                    </div>
                    <div class="col-sm-7 col-xs-7 mt-18">
                        <div class="row">
                            <div class="col-xs-3 col-sm-3">Email:</div>
                            <div class="col-xs-9 col-sm-9" style="border-bottom: 1px solid">example@email.com</div>
                        </div>
                    </div>
                    <div class="col-sm-5 col-xs-5 mt-18">
                        <div class="row">
                            <div class="col-xs-4 col-sm-3">Occupation:</div>
                            <div class="col-xs-8 col-sm-9" style="border-bottom: 1px solid">Businessman</div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row">
                            <div class="col-xs-3 col-sm-2">NEXT of KIN</div>
                            <div class="col-xs-9 col-sm-10" style="border-bottom: 1px solid">KIN's NAME</div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row">
                            <div class="col-xs-4 col-sm-3">Father's / husband's name:</div>
                            <div class="col-xs-8 col-sm-9" style="border-bottom: 1px solid">Father's Name</div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">Relationship</div>
                            <div class="col-xs-10 col-sm-10" style="border-bottom: 1px solid">Relation with</div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">Address</div>
                            <div class="col-xs-10 col-sm-10" style="border-bottom: 1px solid">Block Y-12, Office D-12, Business Bay Rawalpindi.r</div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">Phone:</div>
                            <div class="col-xs-10 col-sm-10" style="border-bottom: 1px solid">03254866658</div>
                        </div>
                    </div>
                    <div class="col-sm-10 col-xs-10 mt-18">
                        <div class="row">
                            <div class="col-xs-4 col-sm-3">CNIC/Passport No.</div>
                            <div class="col-xs-8 col-sm-6">
                                <span class="cnic-box">1</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">-</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">2</span>
                                <span class="cnic-box">-</span>
                                <span class="cnic-box">2</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="white-box border-none ">
                <div class="row">
                    <div class="col-sm-12 col-xs-12">
                        <br>
                        <b style="margin-top: 6%;">Declearation:</b>
                    </div>
                    <div class="col-sm-12 col-xs-12">
                    <p>
                        I / WE CONFIRM THAT THE ABOVE PARTICULARS ARE TRUE TO THE BEST OF MY / OUR KNOWLEDGE AND THAT I / WE AGREED TO THE TERMS & CONDITIONS AS LAID ON THE BACK OF THIS FORM FOR THE PURCHASE OF THE UNIT AT SIGNATURE AND THAT I / WE SHALL PAY THE INSTALLEMNTS AS PER YOUR SCHEDULE OF DEMAND.<br><br><br>
                    </p></div>
                    <div class="col-sm-6 col-xs-6">
                        <span>_________________</span><br>
                        <span>DATE</span>
                    </div>
                    <div class="col-sm-6 col-xs-6">
                        <span>________________________</span><br>
                        <span>Aplicant Signature</span>
                    </div>
                </div>
            </div>
             <div class="white-box border-none ">
                <div class="row">
                    <div class="col-sm-12 col-xs-12">
                    <p>
                        <b>ABANDONMENT OF THE PROJECT:</b> THAT IF FOR ANY RESON, THE PROJECT IS ABANDONED, COMPANY SHALL REFUND THE AMOUNT RECEIVED FROM THE ALLOTEE WITHIN THE EARLIEST CONVENIENCE OF THE COMPANY. IT IS HOWEVER, CLEARLY UNDERSTOOD THAT IN SUCH AN EVENTUALITY, THE ALLOTTEES SHALL NOT BE ENTITLED TO ANY CLAIM AS DAMAGE, INSTRESTS OR PROFIT ETC. OF WHATEVER NATURE.
                    </p><br><br></div>
                    <div class="col-sm-12 col-xs-12">
                    <p><b>DECLARATION BY APPLICANT:</b><br>
                        I / WE <u>Customer Name</u> S/O, D/O, W/O <u>Customer's FAther</u> DO HEREBY DECLARE THAT I / WE HAVE READ/UNDERSTOOD THE TERMS AND CONDITIONS OF BOOKING/ALLOCATION OF THE PROJECT AND ACCEPT THE SAME FUTURE DECLARE THAT I / WE SHALL ABIDE BY ALL THE EXISTING RULES, REGULATIONS, CONDITIONS, REQUIREMENT ETC. OR WHICH MAY BE PRESCRIBED AND APPROVED BY THE COMPANY.
                    </p><br><br></div>
                </div>
            </div>
            <div class="white-box border-none ">
                <div class="row">
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12"><b>FOR OFFICE USE ONLY</b></div>
                        </div>
                    </div>
                    <div class="col-sm-7 col-xs-7 mt-18">
                        <div class="row">
                            <div class="col-xs-6 col-sm-6">SHOP/APARTMENT/HOTEL SUITE #:</div>
                            <div class="col-xs-6 col-sm-6" style="border-bottom: 1px solid">SH-126</div>
                        </div>
                    </div>
                    <div class="col-sm-5 col-xs-5 mt-18">
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">Floor</div>
                            <div class="col-xs-10 col-sm-10" style="border-bottom: 1px solid">10th Floor</div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row">
                            <div class="col-xs-3 col-sm-2">Total Cost RS:</div>
                            <div class="col-xs-9 col-sm-10" style="border-bottom: 1px solid">1250000</div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row">
                            <div class="col-xs-3 col-sm-2">Cash Amount Rs:</div>
                            <div class="col-xs-9 col-sm-10" style="border-bottom: 1px solid">100000</div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row">
                            <div class="col-xs-3 col-sm-2">Cheque/ P.O.No:</div>
                            <div class="col-xs-9 col-sm-10" style="border-bottom: 1px solid">ch112352</div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18" style="margin-bottom: 70px">
                        <div class="row">
                            <div class="col-xs-3 col-sm-2">DAte:</div>
                            <div class="col-xs-9 col-sm-10" style="border-bottom: 1px solid">26-02-2021</div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-xs-6">
                        <span>_________________________________________________</span><br>
                        <span>AUTHORISED SIGNATURE FOR DEVELOPERS</span><br>
                        <span>DATE</span>
                    </div>
                    <div class="col-sm-6 col-xs-6">
                        <span>_________________________________________</span><br>
                        <span>READ. UNDERSTOOD & SIGNED.</span><br>
                        <span>DATE</span>
                    </div>
                </div>
            </div>
        </div>
        

        

    </div>
    <div style="display: inline-block;    margin-bottom: 70px;">
       
    <div class="text-right" style="display: inline-block;">
        <button id="print" class="btn btn-default btn-outline" type="button"> <span><i class="fa fa-print"></i> Print</span> </button>
    </div>
    
</div>
</div>
<!-- /.container-fluid -->



@stop

@section('js')
<script src="{{asset('js/jquery.PrintArea.js')}}" type="text/JavaScript"></script>
<script>
$(function () {
    $("#print").on("click", function () {
        var mode = 'iframe'; //popup
        var close = mode == "popup";
        var options = {
            mode: mode,
            popClose: close
        };
        $("div.printableArea").printArea(options);
    });
});
</script>
<script>
    $('#example23').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    });
</script>
@stop