<!doctype html>
<html lang="en" note-uid="{{$note->uid}}" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{ config('app.name') }}</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

    <!-- <link href="{{ asset('bootstrap-4.5.0/css/bootstrap.css') }}" rel="stylesheet"> -->
    <link rel="stylesheet" href="/fontawesome-free-5.13.1-web/css/all.min.css">
    <link href="{{ asset('/css/app.css') }}?v={{config('app.asset_version')}}" rel="stylesheet">
    <link href="{{ asset('/css/style.css') }}?v={{config('app.asset_version')}}" rel="stylesheet">
    <link href="{{ asset('/css/yemi.css') }}?v={{config('app.asset_version')}}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('/css/toastr.min.css') }}">
    <link href="{{asset('/css/z.css')}}?v={{config('app.asset_version')}}" rel=stylesheet>
    <!-- Styles -->


    {{-- inline bootstrap datepicker --}}
    {{--    <link href='/bootstrap-datepicker/css/bootstrap-datepicker.standalone.min.css' rel="stylesheet">
        <script src='/bootstrap-datepicker/js/bootstrap-datepicker.min.js'></script>--}}

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="/js/jquery-3.5.1.min.js"></script>
    <style>
        html { 
            -webkit-print-color-adjust: exact;
            height: auto; 
        }
        /** Define the margins of your page **/
        @page {
            size: letter portrait;
        }

        @page {
            margin: 1cm;
            padding: 100px;
            @bottom-right {
                content: "My book" !important;
                font-size: 9pt;
                color: #333;
            }
        }

        footer {

            bottom: 0;
            left: 0;
            width: 100%;
            display: table-footer-group;
        }
        .page-number:before {
            content: counter(pages);
        }

        @media print
        {
            .no-print, .no-print *
            {
                display: none !important;
            }
            div {
                line-height: 1em;
            }
        }
    </style>
</head>
<body>

<!--<footer>
    <table style="border: 0; width: 100%; font-size: 12px" border="0">
        <tr>
            <td style="vertical-align: top; width: 50%; text-align: left">
                Printed on: {{friendly_date_time(date('Y-m-d H:i:s'))}}
                <br>
                Note created using: Endochart
            </td>
            <td style="vertical-align: top; width: 50%; text-align: right">
                <div class="page-number"></div>
            </td>
        </tr>
    </table>
</footer>-->

<div style="margin: 0; padding: 1rem; font-family: serif" contenteditable="true">
    <!-- header/smg info -->
    <div style="text-align: center; margin-bottom: 1.5rem; font-family: sans-serif">
        <div style="margin-bottom: 3px; font-weight:bold; font-size: 43px;line-height:40px;">
            @if($note->hcpCompanyPro)
                {{ $note->hcpCompanyPro->company->name }}
            @else
                Scholar Medical Group
            @endif
        </div>
        @if($patient->mcp)
            <div style="margin-bottom: 3px; font-size: 16px;font-weight:bold;">{{ $patient->mcp->displayName() }}</div>
        @endif
        <div style="margin-bottom: 3px; font-size: 16px;font-weight:bold;">133 Rollins Ave, Suite 3 Rockville, MD 20852</div>
        <div style="margin-bottom: 3px; font-size: 16px;font-weight:bold;">
            <div style="width:auto;margin-right:10px; display:inline-block">Phone: 202-935-1033</div> 
            <div style="width:auto;margin-right:10px; display:inline-block">NPI#: 1639796428</div>
        </div>
    </div>

    <div style="margin-bottom: 0; font-family: sans-serif">
        <div>
            <div style="display:inline-block; margin-bottom: 3px; font-size: 18px;font-weight:bold;">{{ $patient->displayName() }}</div>
            <div style="display:inline-block;font-size:16px;">DOB: {{friendly_date_time($patient->dob, false,null,true)}}</div>
            <div style="display: inline-block;font-size:16px;margin-left:7px;">{{$patient->age_in_years}} year old,</div>
            <div style="display: inline-block;font-size:16px;margin-left:0px;">{{$patient->sex}}</div>
        </div>
        <div style="display: inline-block;font-size:16px;margin-bottom:3px;">{{@$patient->mailing_address_line1 ? $patient->mailing_address_line1 : ''}}</div>
        <div style="font-size:16px;margin-bottom:3px;">
            {{@$patient->mailing_address_city ? $patient->mailing_address_city : ''}}
            {{@$patient->mailing_address_state ? $patient->mailing_address_state : ''}}
            {{@$patient->mailing_address_zip ? $patient->mailing_address_zip : ''}}
        </div>
        <div style="font-size:16px;margin-bottom:3px;">
            @if($patient->phone_home)
                <div style="display: inline-block;margin-right:10px;font-size:16px;">Home Phone: {{$patient->phone_home}}</div>
            @endif
            @if($patient->cell_number)
                <div style="display: inline-block;margin-right:10px;font-size:16px;">Cell Phone: {{$patient->cell_number}}</div>
            @endif
            @if($patient->email_address)
                <div style="display: inline-block;margin-right:10px;font-size:16px;">Email: {{$patient->email_address}}</div>
            @endif
        </div>
    </div>
    <div style="margin-bottom: 0; font-family: sans-serif">
        <div style="text-align: right;font-size:16px;line-height: 22px;">Visit Date: {{friendly_date($note->effective_dateest)}}</div>
    </div>

    <!-- header grey bar -->
    @if(false)
    <table style="background-color: #d9d9d9; border: 1px solid #d9d9d9; width: 100%; font-family: sans-serif" border="0">
        <tr>
            <td style="width: 50%; text-align: left; font-weight:bold; padding: 0.5rem 1rem;">Tele-Audio Visit</td>
            <td style="width: 50%; text-align: right; font-weight:bold; padding: 0.5rem 1rem;">
                @if($note->new_or_fu_or_na === "NEW")
                    New
                @elseif($note->new_or_fu_or_na === "FU")
                    Follow-up
                @else
                    {{$note->new_or_fu_or_na}}
                @endif
                Televisit Note
            </td>
        </tr>
    </table>
    @endif

    <main role="main" class="stag-content px-0 mcp-theme-1">
        @yield('content')

    </main><!-- /.container -->

    <!-- signature -->
    <?php
    $bills = \App\Models\Bill::where('note_id', $note->id)
        ->where('bill_service_type', 'NOTE')
        ->where('code', 'Treatment Services')
        ->where('is_cancelled', false)
        ->where('hcp_pro_id', $note->hcpPro->id)
        ->get();
    $totalSeconds = 0;
    foreach ($bills as $bill) {
        $totalSeconds += $bill->number_of_units * 3600;
    }
    ?>
    <div style="padding: 1rem; padding-bottom: 0;">
        <p><b style="font-size: 18px">Signature</b></p>
        <table style="border: 0; width: 100%;" border="0" cellspacing="0" cellpadding="0">
            <tr style="background-color: #d9d9d9">
                <td style="font-weight:bold;border-top: 1px solid #222; border-bottom: 1px solid #222; padding: 0.25rem 0.5rem; vertical-align: top" width="20%">Date of Service</td>
                <td style="font-weight:bold;border-top: 1px solid #222; border-bottom: 1px solid #222; padding: 0.25rem 0.5rem; vertical-align: top" width="30%">Service</td>
                <td style="font-weight:bold;border-top: 1px solid #222; border-bottom: 1px solid #222; padding: 0.25rem 0.5rem; vertical-align: top" width="50%">Place of Service</td>
            </tr>
            <tr>
                <td style="padding: 0.25rem 0.5rem; vertical-align: top" width="20%">{{friendly_date($note->effective_dateest)}}</td>
                <td style="padding: 0.25rem 0.5rem; vertical-align: top" width="30%">Treatment Services</td>
                <td style="padding: 0.25rem 0.5rem; vertical-align: top" width="50%">133 Rollins Ave, Suite 3, Rockville, MD 20852</td>
            </tr>
            <tr style="background-color: #d9d9d9">
                <td style="font-weight:bold;border-top: 1px solid #222; border-bottom: 1px solid #222; padding: 0.25rem 0.5rem; vertical-align: top" width="20%">Total time spent</td>
                <td style="font-weight:bold;border-top: 1px solid #222; border-bottom: 1px solid #222; padding: 0.25rem 0.5rem; vertical-align: top" width="30%">Provider (HCP)</td>
                <td style="font-weight:bold;border-top: 1px solid #222; border-bottom: 1px solid #222; padding: 0.25rem 0.5rem; vertical-align: top" width="50%">Signature</td>
            </tr>
            <tr>
                <td style="border-bottom: 1px solid #222; padding: 0.25rem 0.5rem; vertical-align: top" width="20%">{{round($totalSeconds/60)}} minutes</td>
                <td style="border-bottom: 1px solid #222; padding: 0.25rem 0.5rem; vertical-align: top" width="30%">{{$note->hcpPro->displayName()}}</td>
                <td style="border-bottom: 1px solid #222; padding: 0.25rem 0.5rem; vertical-align: top" width="50%">
                    @if($note->is_signed_by_hcp)
                        <img src="data:image/png;base64,[encoded data, 4596 characters]"
                             style="height: 10px">
                        Signed
                    @else
                        <span style="color: red; font-weight:bold;">No</span>
                    @endif
                </td>
            </tr>
        </table>
        @if($note->is_signed_by_hcp)
            <table style="border: 0; width: 100%; font-size: 12px" border="0">
                <tr>
                    <td style="vertical-align: top; width: 50%; text-align: left">
                        Printed on: {{friendly_date_time(date('Y-m-d H:i:s'))}}
                        <br>
                        Note created using: Endochart
                    </td>
                    <td style="vertical-align: top; width: 50%; text-align: right">
                        <div style="text-align: right; font-size: 13px; padding-top: 2px">Signed electronically on {{friendlier_date_time($note->signed_by_hcp_at)}}</div>
                    </td>
                </tr>
            </table>
        @endif
    </div>
    <div class="no-print" style="padding-top: 1rem; text-align: center"><a id="save_btn" href="#">Save</a></div>
    <div style="padding-top: 2rem; text-align: center">********</div>
</div>
<script>
    $(document).ready(function(){
        let saveBtn = document.querySelector('#save_btn');
        let content = document.querySelector('html');
        let contentHTML = content.outerHTML;
        let noteUid = content.getAttribute('note-uid');
        setInterval(function(){
            try {
                submitToBackend(noteUid, contentHTML);
            }catch(e){
                console.log(e)
            }
        }, 10000);
        saveBtn.addEventListener('click', () => {

            submitToBackend(noteUid, contentHTML)
            //send this to java
            //create note_print record with versioned history
            //on note show a list of note prints to admins
            //allow opening a note print on its own tab with note print id means update existing
            //auto save as you edit to local storage. flush local storage when you hit save
        });
    })

    function submitToBackend(noteUid, content){
        console.log("saving...")
        console.log(noteUid);
        console.log(content);
    }

</script>
</body>
</html>
