@extends('layouts.app')


@section('title')
Registration 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('view-openfile')
            <li><a href="{{ route('openfile.view') }}">All Open File Packages List</a></li>
        @endpermission
        <li class="active">Registration Form</li>
    </ol>
    @stop

@section('css')

<style type="text/css">
    .unit-box{
        border: 3px solid;
        padding: 5px;
        margin-top: 12px;
        margin-bottom: 4px;
    }
    .cnic-box{
        display: inline-block;
        width: 26px;
        height: 26px;
        border: 1px solid;
        text-align: center;
        line-height: 23px;
        margin-right: -4px;
    }
    
            .font-13 {
            font-size: 13px !important;
            }
            .table-bordered {
            border: 1px solid #000000 !important;
            }

            .printFH11 th {
            color: #000000 !important;
            }

            .white-box {
            border: none !important;
            }

            .white-box .box-title {
            background-color: #000000 !important;
            color: #fff !important;
            }

            .page-wrapper {
            padding-bottom: 0px;
            }

            .mtn95 {
            margin-top: 400px;
            }

            h1 {
            font-weight: bold;
            color: #315650;
            }

            .container {
            padding-top: 100px;
            display: table;
            }

            .table-row {
            display: table-row;
            height: 130px;
            }

            .table-cell {
            border: 4px solid black;
            display: table-cell;
            font-size: 12px;
            }

            .square {
            background-color: white;
            color: black;
            width: 200px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid black;
            text-align: center;
            padding
            }

</style>

@stop

@section('content')

<div class="container-fluid">
    <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-3 col-xs-3">
                        <div class="row" style="margin-top: 4%;">
                            <img src="{{ asset('images/logo.png') }}"
                                style="width:80%; margin:5px auto 0;">
                        </div>
                    </div>
                    <div class="col-sm-5 col-xs-5">
                        <div class="row" style="margin-top: 4%;">
                            <div class="heading">
                                <h1>REGISTRATION FORM</h1>
                                <h3>GENERAL RANGE</h3> <br><br>
                                <p>APP FORM NO. </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-1 col-xs-1" style="padding-top: 10px;">
                        <div class="row" style="margin-top: 4%;">
                            <img src="{{ asset('images/phata.png') }}"
                                style="width:80%; margin:5px auto 0;">
                        </div>
                    </div>
                    <div class="col-sm-3 col-xs-3" style="padding-top: 10px;">
                         <div class="square">
                             2 X PASSPORT SIZE
                             PHOTOGRAPHS
                         </div>
                    </div>
                </div>
            </div>
            <div class="white-box border-none mt-95">
                <div class="row">
                    
                    <div class="col-sm-7 col-xs-7 mt-18">
                        <div class="row">
                            <div class="col-xs-3 col-sm-3">Dear Mr / Ms:</div>
                            <div class="col-xs-9 col-sm-9" style="font-weight: bold">ISHTIAQ AHMED</div>
                        </div>
                    </div>
                    <div class="col-sm-5 col-xs-5 mt-18">
                        <div class="row">
                            <div class="col-xs-5 col-sm-5">Dated:</div>
                            <div class="col-xs-7 col-sm-7" style="font-weight: bold">
                                @php
                                    $current_date = date("F j, Y");
                                @endphp
                                {{ $current_date }}</div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <br>
                    <div>
                        <p>We are pleased to inform you that your application of registration has been approved by the
                            management in Forest Town: a frst ever Biophilic Housing project initiated in Pakistan, with a vision to provide a comfortable, healthy
                            and a self-sustainable life style living. This particular project is designed on Biophilic, Contemporary, Eco-Friendly, Self Sustainabity
                            and Smat City housing concept. A place where you and your loved ones wil ave the opportunity to live in the healthiest and
                            eco-friendly environment. Forest Town management is fully geared up and committed to serve you with professional zeal and enthusiasm
                            to visualize this project.</p>
                        <p>This letter is proof of registration with Forest Town, However, you wll only become a member of
                            Forest Town on payment of Confimation Charges within the next 60 days. After receipt of confirmation amout, a membership
                            Letter along with membership number will be issued enabling you to enjoy the perks and beneits as an official member of
                            Forest Town.</p>
                        <p>Kindly note that the timely payment wll enable you, to oblain timely possession of your plot in
                            Forest Town. Moreover this Registration
                            Letter is to be read in conjunction with the terms and conditions laid down in the registration
                            form.</p>
                        <p>You are required to deposit your installiments/ dues in according to the Payment Plan in the
                            following bank account only:</p>
                    </div>

                    <div style="clearfix"></div>

                    <div>
                        <table style="font-weight: bold">
                            <tbody>
                                <tr>
                                    <td>
                                        A/C Title: Forest Town
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        JS Bank Limited, Chakri Road Branch, Rawalpindi
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Account No. 0002056804
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        IBAN#PK50 JSBL 9142 0000 0205 6804
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div><br> 
                    <div>
                        <p>You can contact our customer services about any queries regarding project on the UAN number
                            given below. Additionally, you can like/subscribe/follow our social media pages for latest project updates and developments.</p>
                        <p>Assuring you of our best cooperation.</p>
                    </div>
                    <div class="clearfix"></div><br>
                    <div>
                        <p>Best Regards</p><br><br>
                    </div>
                    <div>
                        <h6 style="font-weight: bold">Forest Town Management</h6>
                        <div class="col-sm-7 col-xs-7 mt-18">
                            <div class="row">
                                <div class="col-xs-3 col-sm-3" style="font-weight: bold; font-style: italic">Facebook:</div>
                                <div class="col-xs-9 col-sm-9">Foresttownlsb.official </div>
                            </div>
                        </div>
                        <div class="col-sm-5 col-xs-5 mt-18">&nbsp;</div>
                        <div class="col-sm-7 col-xs-7 mt-18">
                            <div class="row">
                                <div class="col-xs-3 col-sm-3" style="font-weight: bold; font-style: italic">Instagram:</div>
                                <div class="col-xs-9 col-sm-9">foresttown.official </div>
                            </div>
                        </div>
                        <div class="col-sm-5 col-xs-5 mt-18">&nbsp;</div>
                        <div class="col-sm-7 col-xs-7 mt-18">
                            <div class="row">
                                <div class="col-xs-3 col-sm-3" style="font-weight: bold; font-style: italic">LinkedIn:</div>
                                <div class="col-xs-9 col-sm-9">forest-town-official </div>
                            </div>
                        </div>
                        <div class="col-sm-5 col-xs-5 mt-18">&nbsp;</div>
                        <div class="col-sm-7 col-xs-7 mt-18">
                            <div class="row">
                                <div class="col-xs-3 col-sm-3" style="font-weight: bold; font-style: italic">Twitter:</div>
                                <div class="col-xs-9 col-sm-9">foresttown_off </div>
                            </div>
                        </div>
                        <div class="col-sm-5 col-xs-5 mt-18">&nbsp;</div>
                    </div><br>
                </div>                  
            </div>
            <div class="white-box border-none mt-95">
                <div class="row">
                    <div class="col-sm-6 col-xs-6" style="padding: 50px;">
                        <p style="font-size: 15px">
                                UAN 051-111-366-378 <i class="fa fa-phone-square" aria-hidden="true"></i><br>
                                UAN 0331-1111-022 <i class="fa fa-phone" aria-hidden="true"></i><br>
                                www.foresttown.com.pk <i class="fa fa-globe" aria-hidden="true"></i>
                            </p>
                    </div>
                    
                    <div class="col-sm-6 col-xs-6" style="padding: 50px">
                        <p style="font-size: 15px">
                            info@foresttown.com.pk <i class="fa fa-envelope" aria-hidden="true"></i><br>
                            4th and 5th Floor, Darwaish Plaza Opposite <span><br></span> DHA
                            Phase 2,Gate # 1, Main GT Road, Islamabad<i class="fa fa-map-marker" aria-hidden="true"></i>

                        </p>
                    </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 no-print" type="button"> 
                <span><i class="fa fa-print"></i>Print</span></button>
        </div>
    </div>
</div>
@stop

@section('js')
<script src="{{asset('js/jquery.PrintArea.js')}}" type="text/JavaScript"></script>
<script>
$(function () {
    $("#print").on("click", function () {
        window.print();
    });
});
</script>
<script>
    $('#example23').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    });
</script>

@stop