{{-- PAGE LAYOUNT SECTION ADD --}}
@extends('layouts.adminapp')

{{-- ADD PAGE TITLE --}}
@section('title')
    {{ __('lng.HouseTokenReport') }} - {{ __('lng.Print') }}
@endsection

{{-- ADD CONTENT IN LAYOUT PAGE --}}
@section('content')

    {{-- House Ship Card Report --}}

    <div class="card mb-4">

        <div id="printableArea" style="height: 100%;">
            <style>
                body {
                    font-size: 15px;
                    font-family: 'Roboto', sans-serif;
                }

                .table1 {
                    border-collapse: collapse;
                }

                .table1,
                .th1,
                .td1 {
                    border: 1px solid black;
                }

                h1,
                h2,
                h3,
                h4,
                h5,
                h6,
                p {
                    margin: 5;
                }

                .result-table {
                    width: 100%;
                    margin-top: 10px;
                }

                .result-table th {
                    height: 50px;
                    border-bottom: 1px solid #ddd;
                    border-left: 1px solid #ddd;
                }

                .result-table td {
                    border-bottom: 1px solid #ddd;
                    border-left: 1px solid #ddd;
                    padding: 5px;
                }

                .btn-part {}

                .btn-print {
                    padding: 18px 30px;
                    border-color: black;
                    background-color: inherit;
                    border-radius: 40px;
                    margin-top: 10px;
                }

                .btn-print:hover {
                    padding: 18px 30px;
                    color: white;
                    background-color: black;
                    border-radius: 40px;
                    cursor: pointer;
                }


                @page {}
            </style>
            <script>
                function printDiv(divName) {
                    var printContents = document.getElementById(divName).innerHTML;
                    var originalContents = document.body.innerHTML;

                    document.body.innerHTML = printContents;

                    window.print();

                    document.body.innerHTML = originalContents;

                }
            </script>
            <div style="padding:5px;">

                <!-------------------  HEAD  -------------------------------------->
                <div style="border:double; padding: 10px; width: 100%; float: left;">

                    <div style="padding:20px 0; text-align:center;">
                        <h4>{{ __('lng.HouseTokenReport') }}</h4>
                    </div>

                    @php
                        $Company = PBFunc::GetCompany();
                    @endphp
                    <div class="card-body">
                        <div class="row">
                            @foreach ($Houses as $House)
                            <div class="col-sm-6">
                                <table style="padding-top:0; width: 100%; color:#000;">
                                    <td style="width: 50%;">
                                        <div class="card shadow">
                                            <div class="card-body MemberShipCard">
                                                <div class="table-responsive">
                                                    <table style="padding-top:0;  padding-bottom:5px; color:#000;">
                                                        <tr>
                                                            <td style="width: 24%;">
                                                                <img class="CompanyImage"
                                                                    src="{{ PBFunc::ImageLink(PBCon::STORAGE_LOCATION_IMAGE_CompanyLogo, $Company->logo) }}" />
                                                            </td>
                                                            <td style="width: 76%; text-align:center;">
                                                                <h5 class="CompanyHead">{{ $Company->title }} </h5>
                                                                <h6 class="CompanyDetails">{{ $Company->place }},
                                                                    {{ $Company->district }},<br>
                                                                    {{ $Company->state }}{{ $Company->email }},{{ $Company->contact }}
                                                                </h6>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <hr>
                                                    <table
                                                        style="padding-top:0; width: 100%; padding-bottom:5px; color:#000;">
                                                        <td>
                                                            <span class="MemberDetails">{{ __('lng.HouseName') }}
                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: &nbsp; {{ $House->name }}
                                                            </span>
                                                            <br>
                                                            <span class="MemberDetails">{{ __('lng.Author') }}
                                                                &nbsp;&nbsp;&nbsp;&nbsp;: &nbsp;
                                                                @foreach ($House->members as $Member)
                                                                    @if ($Member->member_relation_id == App\Extra\General\DBFixedValues::AUTHORITY)
                                                                        {{ $Member->name }}
                                                                    @endif
                                                                @endforeach
                                                            </span><br>
                                                            <span class="MemberDetails">{{ __('lng.RegisterNo') }}
                                                                &nbsp;&nbsp;&nbsp;&nbsp;: &nbsp;
                                                                {{ $House->registernumber }}
                                                            </span><br>
                                                            <span class="MemberDetails">{{ __('lng.Area/Ward') }}
                                                                &nbsp;&nbsp;&nbsp;&nbsp;: &nbsp; {{ $House->area }}
                                                            </span><br>
                                                        </td>
                                                        <td>
                                                            <img class="QRCode" style="width:90px"
                                                                src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data={{ $House->name }}{{ $House->registernumber }}{{ $House->place }}{{ $House->post }}{{ $House->pin }}{{ $House->district }}{{ $House->state }}" />
                                                        </td>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </table>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="btn-part" style="text-align: center;">
            <button type="button" onclick="history.back()" class="btn  btn-primary m-3 btn-icon-split">
                <span class="icon text-white-50">
                    <i class="fas fa-arrow-left"></i>
                </span>
                <span class="text">{{ __('lng.Back') }}</span>
            </button>
            <button type="button" onclick="printDiv('printableArea')" class="btn  btn-info m-3 btn-icon-split">
                <span class="icon text-white-50">
                    <i class="fas fa-print"></i>
                </span>
                <span class="text">{{ __('lng.PrintForm') }}</span>
            </button>
        </div>
    </div>
@endsection