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

<!-- @section('breadcrumb')
<ol class="breadcrumb pull-right no-print">
    <li><a href="{{route('home')}}"><i class="fa fa-dashboard"></i> Home</a></li>
    @permission('list-membership')
    <li ><a href="{{route('statement.all')}}">Statements</a></li>
    @endpermission
    <li class="active">Statement Detail</li>
</ol>
@stop -->
@section('content')

<div class="container-fluid" style="color: black;">
    <div class="row printableArea"  id="content">
        <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-1 col-sm-1" style="white-space: nowrap;margin-right: 46px;">Serial No.</div>
                            <div class="col-xs-8 col-sm-8" style="border-bottom: 1px solid">Sr00001</div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <div class="row" style="margin-top: 4%;">
                            <div class="col-xs-1 col-sm-1" style="white-space: nowrap;margin-right: 33px;">Ref No.</div>
                            <div class="col-xs-8 col-sm-8" style="border-bottom: 1px solid">Ref00001</div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <span class="book-form">Booking <br> <b>Form</b></span>
                    </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: 4%;">Property Detail</b>
                    </div>
                    <div class="col-sm-4 col-xs-4 mt-18">
                        <div class="row" >
                            <div class="col-xs-7 col-sm-5" style="white-space: nowrap;margin-right: -20px;">Office/Shop No.</div>
                            <div class="col-xs-5 col-sm-7" style="border-bottom: 1px solid">shp00001</div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-xs-4 mt-18">
                        <div class="row">
                            <div class="col-xs-3 col-sm-2">Floor</div>
                            <div class="col-xs-9 col-sm-10" style="border-bottom: 1px solid">10th</div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-xs-4 mt-18">
                        <div class="row">
                            <div class="col-xs-5 col-sm-4">Size/Category</div>
                            <div class="col-xs-7 col-sm-8" style="border-bottom: 1px solid">12000sqft</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: 4%;">Personal Information</b>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row">
                            <div class="col-xs-3 col-sm-2">Name-Mr./Mrs/Ms.</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-3 col-sm-3">Father/Husband's Name</div>
                            <div class="col-xs-9 col-sm-9" style="border-bottom: 1px solid">Customer Father</div>
                        </div>
                    </div>
                    <div class="col-sm-7 col-xs-7 mt-18">
                        <div class="row">
                            <div class="col-xs-7 col-sm-6">CNIC/Passport No.<small>(Attach Photocopy)</small></div>
                            <div class="col-xs-5 col-sm-6" style="border-bottom: 1px solid">86857-6852589-7</div>
                        </div>
                    </div>
                    <div class="col-sm-5 col-xs-5 mt-18">
                        <div class="row">
                            <div class="col-xs-5 col-sm-4">Date of Birth</div>
                            <div class="col-xs-7 col-sm-8" style="border-bottom: 1px solid">27-Sep-1985</div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row" >
                            <div class="col-xs-3 col-sm-2">Present 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-2">Permanent Address</div>
                            <div class="col-xs-9 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-7 col-xs-7 mt-18">
                        <div class="row">
                            <div class="col-xs-3 col-sm-3">Contact No.</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">Email</div>
                            <div class="col-xs-10 col-sm-10" style="border-bottom: 1px solid">example@email.com</div>
                        </div>
                    </div>
                    <div class="col-sm-7 col-xs-7 mt-18">
                        <div class="row">
                            <div class="col-xs-2 col-sm-1">Area</div>
                            <div class="col-xs-10 col-sm-11" style="border-bottom: 1px solid">12000sqft</div>
                        </div>
                    </div>
                    <div class="col-sm-5 col-xs-5 mt-18">
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">Rate</div>
                            <div class="col-xs-10 col-sm-10" style="border-bottom: 1px solid">1500000</div>
                        </div>
                    </div>
                    <div class="col-sm-7 col-xs-7 mt-18">
                        <div class="row">
                            <div class="col-xs-5 col-sm-4">Total Amount (PKR)</div>
                            <div class="col-xs-7 col-sm-8" style="border-bottom: 1px solid">2500000</div>
                        </div>
                    </div>
                    <div class="col-sm-5 col-xs-5 mt-18">
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">Extras</div>
                            <div class="col-xs-10 col-sm-10" style="border-bottom: 1px solid">12000</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%;">Nominee Details</b>
                    </div>
                    <div class="col-sm-6 col-xs-12 mt-18">
                        <div class="row" >
                            <div class="col-xs-3 col-sm-4">Name-Mr./Mrs/Ms.</div>
                            <div class="col-xs-9 col-sm-8" style="border-bottom: 1px solid">Customer name</div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-xs-12 mt-18">
                        <div class="row">
                            <div class="col-xs-3 col-sm-5">Father/Husband's Name</div>
                            <div class="col-xs-9 col-sm-7" style="border-bottom: 1px solid">Customer Father</div>
                        </div>
                    </div>
                    <div class="col-sm-7 col-xs-6 mt-18">
                        <div class="row">
                            <div class="col-xs-5 col-sm-4">CNIC/Passport No.</div>
                            <div class="col-xs-7 col-sm-8" style="border-bottom: 1px solid">86857-6852589-7</div>
                        </div>
                    </div>
                    <div class="col-sm-5 col-xs-6 mt-18">
                        <div class="row">
                            <div class="col-xs-7 col-sm-5">Relation with Allotee</div>
                            <div class="col-xs-5 col-sm-7" style="border-bottom: 1px solid">Cutomer Relative</div>
                        </div>
                    </div>
                    <div class="col-sm-7 col-xs-7 mt-18">
                        <div class="row">
                            <div class="col-xs-3 col-sm-3">Contact No.</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">Email</div>
                            <div class="col-xs-10 col-sm-10" style="border-bottom: 1px solid">example@email.com</div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row">
                            <div class="col-xs-3 col-sm-2">Present 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">
                        <span>The Particular given in the application form are correct to the best of my knowledge.</span>
                    </div>
                    <div class="col-sm-5 col-xs-6 mt-18">
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">Dated</div>
                            <div class="col-xs-10 col-sm-10" style="border-bottom: 1px solid">12-04-2021</div>
                        </div>
                    </div>
                    <div class="col-sm-7 col-xs-6 mt-18">
                        <div class="row">
                            <div class="col-xs-6 col-sm-4">Signature of Purchaser</div>
                            <div class="col-xs-6 col-sm-8" style="border-bottom: 1px solid">1500000</div>
                        </div>
                    </div>
                    <div class="col-sm-7 col-xs-7 mt-18">
                        <div class="row">
                            <div class="col-xs-5 col-sm-3">Representative of</div>
                            <div class="col-xs-7 col-sm-9" style="border-bottom: 1px solid">2500000</div>
                        </div>
                    </div>
                    <div class="col-sm-5 col-xs-5 mt-18">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12">(See Terms and Condtions Overleaf)</div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        

        

    </div>
    <div style="display: inline-block;    margin-bottom: 70px;">
       
    <div class="text-left" style="display: inline-block;"><a target="_blank" href="#">
        <button  class="btn btn-default btn-outline" type="button"> <span><i class="fa fa-download"></i> Download</span> </button></a>
    </div>
    

  

    <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