<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <link rel="stylesheet"
        href="{{ asset('/') }}plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">

    <style>
        @media print {

            table,
            tr,
            thead th,
            td {
                font-size: 12px !important;
                padding: 2px !important;
                /* border: 1px solid #010a02; */
                border-collapse: collapse;
            }
        }
    </style>

    <style>
        @media print {

            thead th {
                font-size: 15px !important;
                /* border: 1px solid #ddd; */
            }

            button {
                visibility: hidden;
            }
        }

        .container {
            width: 940px;
            margin: 0 auto;
            padding: 10px;
        }

        .table {

            border-collapse: collapse;
            width: 100%;
            /* border: 1px solid #4CAF50; */
        }

        h2 {
            text-align: center;
        }

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

        th,
        td {
            border: 1px solid #bbb;
            padding: 10px;
            text-align: center;
        }

        tr:hover {
            background-color: #e5e5e5
        }
    </style>

    <style>
        @media print {}

        h2 {
            text-align: center;
        }

        .heading-with-separator {
            position: relative;
        }

        .heading-with-separator::after {
            content: " ";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            border-block: #010a02 dashed 1px;
        }
    </style>

    <div class="flex flex-col mt-5">
        <div class=" bg-white p-6 rounded-lg">
            <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                    <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                        <div class="flex justify-between noprint">

                            <div class="p-2 mb-5">
                                <button type="button" onclick="window.print()">Print
                                    <i class="fa fa-print"></i>
                                </button>
                            </div>
                        </div>
                        {{-- @dd(siteinfo()) --}}
                        <div class="mb-1">
                            <img width="auto" height="auto"
                                src="{{ asset('storage/company/' . siteinfo()->img_url) }}"
                                style="display: block; margin-left: auto; margin-right: auto; width: 10%; height: 10%;"
                                alt="No Image">
                            <h2 style="text-align: center">{{ siteinfo()->name ?? '' }}</h2>
                            <div class="row">
                                <div><span style="float: right">Date: {{ $date }}</span></div>
                                <div><span style="text-align: left">Office Copy</span></div>
                            </div>
                        </div>

                        <br>

                        <div class="row">
                            <div>
                                <table style="border: none !important;">
                                    <thead style="border: none !important;">
                                        <tr style="border: none !important;">
                                            <th style="border: none !important;">Service Information</th>
                                            <th style="border: none !important;">Customer Information</th>
                                        </tr>
                                    </thead>
                                    <tbody style="border: none !important;">
                                        <td style="border: none !important;">
                                            <table>
                                                <tr>
                                                    <td>PPPoE User Name: </td>
                                                    <td>{{ $data->userid ?? '' }}</td>
                                                </tr>
                                                <tr>
                                                    <td>PPPoE Password: </td>
                                                    <td>{{ $data->password ?? '' }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Pop/Zone Name: </td>
                                                    <td>{{ $data->pop->popname ?? '' }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Expire Date: </td>
                                                    <td>{{ date('d-M-Y', strtotime($data->expire_date ?? '')) }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Package Name: </td>
                                                    <td>{{ $data->packages->package_name ?? '' }}</td>
                                                </tr>
                                            </table>
                                        </td>
                                        <td style="border: none !important;">
                                            <table>
                                                <tr>
                                                    <td>Customer Name: </td>
                                                    <td>{{ $data->clientsinfo->clients_name ?? '' }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Contact No: </td>
                                                    <td>{{ $data->clientsinfo->contact_no ?? '' }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Address: </td>
                                                    <td>{{ $data->clientsinfo->area ?? '' }}</td>
                                                </tr>
                                                <tr>
                                                    <td> NID: </td>
                                                    <td>{{ $data->clientsinfo->national_id ?? '' }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Cable type: </td>
                                                    <td>{{ $data->clientsinfo->cable_type ?? '' }}</td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <br><br>
                        <div class="row">
                            <div><span style="float: right">Authority Signature</span></div>
                            <div><span style="text-align: left">Customer Signature</span></div>
                        </div>

                        <div style="margin-top: 1%">
                            <h1 class="heading-with-separator"></h1>
                        </div>
                        <br>
                        <div class="mb-1">
                            <img width="auto" height="auto"
                                src="{{ asset('storage/company/' . siteinfo()->img_url) }}"
                                style="display: block; margin-left: auto; margin-right: auto; width: 10%; height: 10%;"
                                alt="No Image">
                            <h2 style="text-align: center">{{ siteinfo()->name ?? '' }}</h2>
                            <div class="row">
                                <div><span style="float: right">Date: {{ $date }}</span></div>
                                <div><span style="text-align: left">Customer Copy</span></div>
                            </div>
                        </div>
                        <br>

                        <div class="row">
                            <div>
                                <table style="border: none !important;">
                                    <thead style="border: none !important;">
                                        <tr style="border: none !important;">
                                            <th style="border: none !important;">Service Information</th>
                                            <th style="border: none !important;">Customer Information</th>
                                        </tr>
                                    </thead>
                                    <tbody style="border: none !important;">
                                        <td style="border: none !important;">
                                            <table>
                                                <tr>
                                                    <td>PPPoE User Name: </td>
                                                    <td>{{ $data->userid ?? '' }}</td>
                                                </tr>
                                                <tr>
                                                    <td>PPPoE Password: </td>
                                                    <td>{{ $data->password ?? '' }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Pop/Zone Name: </td>
                                                    <td>{{ $data->pop->popname ?? '' }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Expire Date: </td>
                                                    <td>{{ date('d-M-Y', strtotime($data->expire_date ?? '')) }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Package Name: </td>
                                                    <td>{{ $data->packages->package_name ?? '' }}</td>
                                                </tr>
                                            </table>
                                        </td>
                                        <td style="border: none !important;">
                                            <table>
                                                <tr>
                                                    <td>Customer Name: </td>
                                                    <td>{{ $data->clientsinfo->clients_name ?? '' }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Contact No: </td>
                                                    <td>{{ $data->clientsinfo->contact_no ?? '' }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Address: </td>
                                                    <td>{{ $data->clientsinfo->area ?? '' }}</td>
                                                </tr>
                                                <tr>
                                                    <td> NID: </td>
                                                    <td>{{ $data->clientsinfo->national_id ?? '' }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Cable type: </td>
                                                    <td>{{ $data->clientsinfo->cable_type ?? '' }}</td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <br>
                        <br>
                        <div class="row">
                            <div><span style="float: right">Authority Signature</span></div>
                            <div><span style="text-align: left">Customer Signature</span></div>
                        </div>


                        <div>
                            <table style="border: none !important;">
                                <tr style="border: none !important;">
                                    <td style="border: none !important;">
                                        <h2>Address: {{ siteinfo()->address ?? '' }}</h2>
                                    </td>
                                    <td style="border: none !important;">
                                        <h2>Contact No : {{ siteinfo()->mobile ?? '' }}</h2>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        window.onload = function() {
            window.print();
        }

        window.onfocus = function() {
            window.close();
        }
    </script>
    </body>

</html>
