<?php

use App\Http\Controllers\MainAcontroller;
use App\Http\Controllers\BillRenderController;

?>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

    <style>
        * {
            box-sizing: border-box;
        }

        /* Create three equal columns that floats next to each other */
        .column {

            float: left;
            width: 33.33%;
            padding-top: 10px;
            padding-bottom: 10px;
            height: auto;
            /* Should be removed. Only for demonstration */
        }

        /* Clear floats after the columns */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        .pTextIng {
            font-size: 10px;
            margin: 0;
            padding: 0;
            width: 80px;
            display: inline-block;
        }

        .pTextIngRight {
            font-size: 10px;
            margin: 0;
            padding: 0;
            width: 50px;
            display: inline-block;
        }

        .pTextPor {
            font-size: 10px;
            width: 80px;
            height: auto;
            display: inline-block;
        }

        .pTextPorTime {
            font-size: 10px;
            height: auto;
            width: 150px;
            display: inline-block;
        }

        .center {
            text-align: center;
        }

        .centerimg {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
        }



        /* td {
            padding-left: 2px;
            padding-left: 2px;
            border-left: 1px solid grey;
            border-right: 1px solid grey;

            font-style: normal;
            font-size: 10px;
            color: black;

        } */



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

        p {
            font-size: 10px;
            margin: 0;
            padding: 0;
            width: 80px;
            display: inline-block;
        }

        p1 {
            font-size: 10px;
            margin: 0;
            padding: 0;
            width: 120px;
            display: inline-block;
        }

        p2 {
            font-size: 10px;
            margin: 0;
            padding: 0;

            display: inline-block;
        }

        #tick-mark {
            position: relative;
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-right: 5px;
        }

        #tick-mark::before {
            position: absolute;
            left: 0;
            top: 50%;
            height: 50%;
            width: 3px;
            background-color: green;
            content: "";
            transform: translateX(10px) rotate(-45deg);
            transform-origin: left bottom;
        }

        #tick-mark::after {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 3px;
            width: 100%;
            background-color: green;
            content: "";
            transform: translateX(10px) rotate(-45deg);
            transform-origin: left bottom;
        }

        ul {
            list-style-type: none;
        }

        .close {
            position: relative;

            width: 20px;
            height: 20px;

        }

        .close:before,
        .close:after {
            position: absolute;
            left: 15px;
            content: ' ';
            height: 15px;
            width: 2px;
            background-color: red;
        }

        .close:before {
            transform: rotate(45deg);
        }

        .close:after {
            transform: rotate(-45deg);
        }

        td {
            border: 1px solid black;
        }

        th {
            background-color: lightgrey;
            width: 33%;
            border: 1px solid green;

        }

        .page-break {
            page-break-after: always;
        }



        @page {
            margin: 180px 50px;
        }

        #header {
            position: fixed;
            left: 0px;
            top: -180px;
            right: 0px;
            height: 150px;
            background-color: orange;
            text-align: center;
        }

        #footer {
            position: fixed;
            left: 0px;
            bottom: -180px;
            right: 0px;
            height: 150px;
            background-color: lightblue;
            
        }

        #mylabel{
            content: counter(page);
        }

        #footer .page:after {
            content: counter(page, upper-roman);
        }

        .pagenum:before {
            content: counter(page);
            text-align: center;
         
        }
    </style>



</head>

<body>


<!-- <script type="text/php">
    if (isset($pdf)) {
        $x = 60;
        $y = 115;
        $text = "Page {PAGE_NUM} of {PAGE_COUNT}";
        $font = null;
        $size = 14;
        $color = array(255,0,0);
        $word_space = 0.0;  //  default
        $char_space = 0.0;  //  default
        $angle = 0.0;   //  default
        $pdf->page_text($x, $y, $text, $font, $size, $color, $word_space, $char_space, $angle);
    }
</script> -->

    <br>
    <br>
    <br>
    <br>

    <label id="mylabel"></label>

    <div id="header">
        <img width="100%" src="https://api.digitronicsindia.com/aswas/public/uploads/images/H.png">
    </div>

    <div id="footer">
    <label> page no : <span class="pagenum"></span>  </label>
    <img width="100%" src="https://api.digitronicsindia.com/aswas/public/uploads/images/F.png">
    </div>


    <main>
        <h3 style="text-align: center; margin-top: -70px; ">MEDISOFT MOBILE APP - VERSION AND PRICE DETAILS</h3>
        <hr>

        <table width="100%">

            <thead>
                <th width="33%" align="center">SILVER</th>
                <th width="33%" align="center">GOLD</th>
                <th width="33%" align="center">PLATINUM</th>
            </thead>

            <thead>
                <th width="33%" align="center"></th>
                <th width="33%" align="center"></th>
                <th width="33%" align="center"></th>
            </thead>


            <tbody>
                <?php echo $items; ?>
            </tbody>


        </table>


        <h5 style="text-align: center;"> PRICING DETAILS </h5>


        <div class="column" style="width: 33%; ">
            <h5>SILVER</h5>

            <label>Yearly - Rs. {{ $silverprice }}/-</label>
            <br>
            <label>Monthly - </label>
            <br>
            <label>Rs. {{ $silveradvance }}/- Advance</label>
            <br>
            <label>Rs. {{ $silveremi }}/- per month </label>
        </div>

        <div class="column" style="width: 33%;">
            <h5>GOLD</h5>

            <label>Yearly - Rs. {{ $goldprice }}/-</label>
            <br>
            <label>Monthly - </label>
            <br>
            <label>Rs. {{ $goldpadvance }}/- Advance</label>
            <br>
            <label>Rs. {{ $goldemi }}/- per month </label>
        </div>

        <div class="column" style="width: 33%;">
            <h5>PLATINUM</h5>

            <label>Yearly - Rs. {{ $platinumprice }}/-</label>
            <br>
            <label>Monthly - </label>
            <br>
            <label>Rs. {{ $platinumadvance }}/- Advance</label>
            <br>
            <label>Rs. {{ $platinumemi }}/- per month </label>
        </div>


        <div style="width: 100%; ">

            <h5 style="text-align: center; "> TERMS & CONDITIONS </h5>

            <li>Any other taxes will be charged extra.</li>
            <li>Advance payment will be refunded only after the completion of 12 months Subscription charges without any fail, otherwise refund will be subject to restrictions.</li>
            <li>Any changes or modifications in version/model/functions/structure/prices is the complete discretion of 'DIGITRONICS'.</li>
            <br>
            <br>


        </div>

    </main>

    <label>Powered by MEDISOFT &#169; 2023</label>




</body>



</html>