@extends('layouts.website.website')
@section('content')

   <!--main content start-->
<section id="main-content">
    <section class="wrapper site-min-height">
        <!-- invoice start-->
        <section class="col-md-6">
            <style>
                th {
                    text-align: center;
                }

                td {
                    text-align: center;
                }

                tr.total {
                    color: green;
                }

                .control-label {
                    width: 100px;
                }

                h1 {
                    margin-top: 5px;
                }

                .print_width {
                    width: 50%;
                    float: left;
                }

                ul.amounts li {
                    padding: 0px !important;
                }

                .invoice-list {
                    margin-bottom: 10px;
                }

                .panel {
                    border: 0px solid #5c5c47;
                    background: #fff !important;
                    height: 100%;
                    margin: 20px 5px 5px 5px;
                    border-radius: 0px !important;
                    color: #777;
                }

                .table.main {
                    margin-top: -50px;
                }

                .control-label {
                    margin-bottom: 0px;
                }

                tr.total td {
                    color: green !important;
                }

                .theadd th {
                    background: #edfafa !important;
                }

                td {
                    font-size: 12px;
                    padding: 5px;
                    font-weight: bold;
                }

                .details {
                    font-weight: bold;
                }

                hr {
                    border-bottom: 2px solid green !important;
                }

                .corporate-id {
                    margin-bottom: 5px;
                }

                .adv-table table tr td {
                    padding: 5px 10px;
                }

                .btn {
                    margin: 10px 10px 10px 0px;
                }

                @media print {
                    h1 {
                        margin-top: 5px;
                    }

                    #main-content {
                        padding-top: 0px;
                    }

                    .print_width {
                        width: 50%;
                        float: left;
                    }

                    ul.amounts li {
                        padding: 0px !important;
                    }

                    .invoice-list {
                        margin-bottom: 10px;
                    }

                    .wrapper {
                        margin-top: 0px;
                    }

                    .wrapper {
                        padding: 0px 0px !important;
                        background: #fff !important;
                    }

                    .wrapper {
                        border: 2px solid #777;
                    }

                    .panel {
                        border: 0px solid #777;
                        background: #fff !important;
                        padding: 0px 0px;
                        margin: 5px 5px 5px 5px;
                        border-radius: 0px !important;
                        color: #777;
                    }

                    .table.main {
                        margin-top: -50px;
                    }

                    .control-label {
                        margin-bottom: 0px;
                    }

                    tr.total td {
                        color: green !important;
                    }

                    .theadd th {
                        background: #edfafa !important;
                    }

                    td {
                        font-size: 12px;
                        padding: 5px;
                        font-weight: bold;
                    }

                    .details {
                        font-weight: bold;
                    }

                    hr {
                        border-bottom: 2px solid green !important;
                    }

                    .corporate-id {
                        margin-bottom: 5px;
                    }

                    .adv-table table tr td {
                        padding: 5px 10px;
                    }

                    .site-min-height {
                        min-height: 950px;
                    }
                }
            </style>

            <div class="panel panel-primary" id="lab">
                <!--<div class="panel-heading navyblue"> INVOICE</div>-->
                <div class="panel-body" style="font-size: 10px;">
                    <div class="row invoice-list">
                        <div class="text-center corporate-id">
                            <h3>
                                Hospital
                            </h3>
                            <h4>
                                ratargul
                            </h4>
                            <h4>
                                Tel: +0123456789
                            </h4>
                            <img alt="" src="uploads/logo-nonetext1.png" width="200" height="100" />
                            <h4 style="font-weight: bold; margin-top: 20px; text-transform: uppercase;">
                                Lab Report
                                <hr style="width: 200px; border-bottom: 1px solid #000; margin-top: 5px; margin-bottom: 5px;" />
                            </h4>
                        </div>

                        <div class="col-md-12">
                            <div class="col-md-6 pull-left row" style="text-align: left;">
                                <div class="col-md-12 row details" style="">
                                    <p>
                                        <label class="control-label">Patient Name </label>
                                        <span style="text-transform: uppercase;"> : {{ $lab->patient->name }} <br /> </span>
                                    </p>
                                </div>
                                <div class="col-md-12 row details" style="">
                                    <p>
                                        <label class="control-label">Patient ID </label>
                                        <span style="text-transform: uppercase;"> : {{ $lab->patient_id }} <br /> </span>
                                    </p>
                                </div>
                                <div class="col-md-12 row details" style="">
                                    <p>
                                        <label class="control-label"> Address </label>
                                        <span style="text-transform: uppercase;"> : {{ $lab->patient->address }} <br /> </span>
                                    </p>
                                </div>
                                <div class="col-md-12 row details" style="">
                                    <p>
                                        <label class="control-label">Phone </label>
                                        <span style="text-transform: uppercase;"> : {{ $lab->patient->phone }} <br /> </span>
                                    </p>
                                </div>
                            </div>

                            <div class="col-md-6 pull-right" style="text-align: left;">
                                <div class="col-md-12 row details" style="">
                                    <p>
                                        <label class="control-label"> Lab Report Id </label>
                                        <span style="text-transform: uppercase;"> : {{ $lab->id }} </span>
                                    </p>
                                </div>

                                <div class="col-md-12 row details">
                                    <p>
                                        <label class="control-label">Date </label>
                                        <span style="text-transform: uppercase;"> : {{ Carbon\Carbon::parse($lab->date)->format('d,M Y') }} <br /> </span>
                                    </p>
                                </div>

                                <div class="col-md-12 row details">
                                    <p>
                                        <label class="control-label">Doctor </label>
                                        <span style="text-transform: uppercase;"> : {{ $lab->doctor->name }}<br /> </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <br />
                    </div>

                    <div class="col-md-12 panel-body">
                        {!! $lab->description !!}
                    </div>
                </div>
            </div>
        </section>

        <section class="col-md-6">
            <div class="col-md-5 no-print" style="margin-top: 20px;">
                <div class="text-center col-md-12 row">
                    <a class="btn btn-info btn-sm invoice_button pull-left" onclick="javascript:window.print();"><i class="fa fa-print"></i> Print </a>

                    <a class="btn btn-info btn-sm detailsbutton pull-left download" id="download"><i class="fa fa-download"></i> Download </a>
                </div>
            </div>
        </section>
        <!-- invoice end-->
    </section>
</section>
<!--main content end-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

<script>

    $('#download').click(function () {
        var pdf = new jsPDF('p', 'pt', 'letter');
        pdf.addHTML($('#lab'), function () {
            pdf.save('lab_id_1939.pdf');
        });
    });

    // This code is collected but useful, click below to jsfiddle link.
</script>

@endsection