@extends('app')

@section('content')
        <style type="text/css">
        @media print {
            .print-btn {
                display: none;
            }

            .non-pad-print-btn {
                display: none;
            }

            footer {
                display: none;
            }

            .col-print-1 {
                width: 8%;
                float: left;
            }

            .col-print-2 {
                width: 16%;
                float: left;
            }

            .col-print-3 {
                width: 25%;
                float: left;
            }

            .col-print-4 {
                width: 33%;
                float: left;
            }

            .col-print-5 {
                width: 42%;
                float: left;
            }

            .col-print-6 {
                width: 50%;
                float: left;
            }

            .col-print-7 {
                width: 58%;
                float: left;
            }

            .col-print-8 {
                width: 66%;
                float: left;
            }

            .col-print-9 {
                width: 75%;
                float: left;
            }

            .col-print-10 {
                width: 83%;
                float: left;
            }

            .col-print-11 {
                width: 92%;
                float: left;
            }

            .col-print-12 {
                width: 100%;
                float: left;
            }
        }

        @page {
            size: auto;
            margin: 0mm;
        }

    </style>
    <!-- Main content -->

    <section class="content" style="">
        <a href="#" class="btn btn-primary print-btn pull-right full-print"><i class="fa fa-print"></i>
            Pad Print &nbsp; &nbsp;</a>

        {{-- <a href="#" class="btn btn-primary print-btn pull-right half-print"><i class="fa fa-print"></i>
          Pad Half Print &nbsp; &nbsp;</a> --}}
        <a href="#" class="btn btn-primary non-pad-print-btn pull-right"><i class="fa fa-print"></i>
            Non Pad Print &nbsp; &nbsp;</a>

    {{-- <a href="{{route('reports.diagnostic-test-report')}}" class="btn btn-success print-btn pull-right"><i
                class="fa fa-print"></i> Go Back </a> --}}
    <!-- title row -->
        <div class="report-print" style="margin-left: 0.8in; margin-right: 0.8in;">

            <!-- /.row -->
            @if(isset($appointment))
                <div class="row">
                    <div class="col-md-12" style="padding-left: 31px;">
                        <p>
                            {!! $appointment->prescription !!}
                        </p>
                    </div>
                </div>
            @endif

        </div>

    </section>

@endsection

@section('script')
    <script type="text/javascript">

        $('.half-print').on('click', function () {
            $('.content').attr('style', 'width:50%;float:right;padding-top:212px;');
            $('.img-responsive').attr('style', 'width:50%;');
            $('.non-pad').attr('style', 'display:none;');
            window.print();
        });

        $('.full-print').on('click', function () {
            $(".report").css({"padding-top": "142px"});
            $('.content').attr('style', 'width:100%;padding-top:212px;');
            $('.img-responsive').attr('style', 'width:25%;');
            $('.non-pad').attr('style', 'display:none;');
            window.print();
        });

        $('.non-pad-print-btn').on('click', function () {
            $(".report").css({"padding-top": "0px"});
            $('.content').attr('style', 'width:100%;padding-top:20px;');
            $('.img-responsive').attr('style', 'width:25%;');
            $('.non-pad').attr('style', 'display:blok;');
            window.print();
        });

        $('.custom-print').on('click', function () {
            window.print();
        });

    </script>
@endsection