@extends('layouts.master_home')

@section('dashboard_content')
    <style>
        html, body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
    <div class="page-content">
        <!-- BEGIN PAGE HEAD -->
        <div class="page-head">
            <!-- BEGIN PAGE TITLE -->
            <div class="page-title">
                <h1>Convert Report</h1>
            </div>
            <!-- END PAGE TITLE -->
            <!-- BEGIN PAGE TOOLBAR -->
            <div class="page-toolbar">
                <!-- BEGIN THEME PANEL -->
                <a href="{{ url()->previous() }}"
                   class="btn green"><i
                            class="fa fa-backward"></i> Back</a>
                <!-- END THEME PANEL -->
            </div>
            <!-- END PAGE TOOLBAR -->
        </div>
        <!-- END PAGE HEAD -->
        <div class="row">
            <div class="col-md-12">
                <div class="portlet light">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-credit-card font-green-sharp"></i>
                            <span class="caption-subject font-green-sharp bold uppercase">Report - {{$report->report_name}}</span>
                        </div>
                        <div class="actions">

                        </div>
                    </div>
                    <div class="portlet-body">
                        <div class="row">
                            <div class="col-md-6">
                                <!-- Swiper -->
                                <div class="swiper-container">
                                    <div class="swiper-wrapper">
                                        @foreach ($report_files as $file)
                                            <div class="swiper-slide">
                                                <img class="img-responsive" src="{{$file->file_path}}"/>
                                            </div>
                                        @endforeach
                                    </div>
                                    <!-- Add Arrows -->
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-button-prev"></div>
                                </div>
                            </div>
                            <div class="col-md-6">

                                <div class="portlet box blue-hoki">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            Hospital Medical Report
                                        </div>
                                        <div class="actions">
                                            <a class="btn btn-icon-only btn-default btn-sm fullscreen"
                                               href="javascript:;" data-original-title="" title="">
                                            </a>
                                        </div>
                                    </div>
                                    <div class="portlet-body">
                                        <div class="patientDetails">
                                            <h3>Private & Confidential</h3><br/>
                                            <table class="table table-bordered table-hover">
                                                <tbody>
                                                <tr>
                                                    <td>
                                                        Patient’s Name : {{$report->patient_name}}
                                                    </td>
                                                    <td>
                                                        Date of birth : {{$report->dob}}
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        Doctor : {{$report->doctor_name}}
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="reportDetails">
                                            <h3>Report Details</h3><br/>
                                            <form action="{{ url('create_report')}}" method="post"
                                                  enctype="multipart/form-data">
                                                {{ csrf_field() }}
                                                <input type="hidden" class="form-control" name="encReportID"
                                                       value="{{$encReportId}}">
                                                <div class="form-body">

                                                    <table class="table table-bordered table-hover"
                                                           id="reportDetails">
                                                        <thead>
                                                        <tr>
                                                            <th>
                                                                Test(s)
                                                            </th>
                                                            <th>
                                                                Value
                                                            </th>
                                                            <th style="width: 150px">
                                                                Unit
                                                            </th>
                                                        </tr>
                                                        </thead>
                                                        <tbody id="tableToModify">
                                                        @foreach($reportParameters as $parameter)
                                                            @if($report->is_digitize)
                                                                <tr id="rowToClone">
                                                                    <td>
                                                                        <input type="hidden" class="form-control"
                                                                               placeholder="Test Name"
                                                                               name="testId[]"
                                                                               value="{{$parameter->testId}}">
                                                                        <input readonly type="text" class="form-control"
                                                                               placeholder="Test Name"
                                                                               name="testName[]"
                                                                               value="{{$parameter->testName}}">
                                                                    </td>


                                                                    <td>
                                                                        <input type="text" class="form-control"
                                                                               placeholder="Value"
                                                                               name="testValue[]"
                                                                               value="{{$parameter->testValue}}">
                                                                    </td>
                                                                    <td>
                                                                        <input readonly type="text" class="form-control"
                                                                               placeholder="Value"
                                                                               name="testUnit[]"
                                                                               value="{{$parameter->testUnit}}">
                                                                    </td>
                                                                </tr>
                                                            @else
                                                                <tr id="rowToClone">
                                                                    <td>
                                                                        <input type="hidden" class="form-control"
                                                                               placeholder="Test Name"
                                                                               name="testId[]"
                                                                               value="{{$parameter->id}}"
                                                                        >
                                                                        <input readonly type="text" class="form-control"
                                                                               placeholder="Test Name"
                                                                               name="testName[]"
                                                                               value="{{$parameter->parameter_name}} ({{$parameter->short_code}})">
                                                                    </td>
                                                                    <td>
                                                                        <input type="text" class="form-control"
                                                                               placeholder="Value"
                                                                               name="testValue[]">
                                                                    </td>
                                                                    <td>
                                                                        <input readonly type="text" class="form-control"
                                                                               placeholder="Value"
                                                                               name="testUnit[]"
                                                                               value="{{$parameter->unit}}">
                                                                    </td>

                                                                </tr>
                                                            @endif
                                                        @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                                <div class="form-actions">
                                                    <button type="submit" name="submit" class="btn btn-md blue" value="1">
                                                        Submit
                                                    </button>
                                                    <button type="submit" name="cannot_convert" class="btn btn-md yellow" value="1">
                                                        Cannot Convert
                                                    </button>
                                                </div>

                                            </form>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
    <script>
        var swiper = new Swiper('.swiper-container', {
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });

        function cloneRow(r) {
            var i = r.parentNode.parentNode.rowIndex;
            var row = document.getElementById("rowToClone"); // find row to copy
            var table = document.getElementById("tableToModify"); // find table to append to
            var clone = row.cloneNode(true); // copy children too
            clone.id = "newID"; // change id or other attributes/contents
            table.appendChild(clone); // add new row to end of table
            setRemoveBtn();
        }

        function removeRow(r) {
            var i = r.parentNode.parentNode.rowIndex;
            document.getElementById("reportDetails").deleteRow(i);
            setRemoveBtn();

        }

        function setRemoveBtn() {

            var deleteBtnCount = $('.actionTd').find('.deleteBtn').length;
            if (deleteBtnCount > 1) {
                $('.actionTd').find('.deleteBtn').removeClass('hide');

            } else {
                $('.actionTd').find('.deleteBtn').addClass('hide');
            }

            $('#reportDetails tbody:first tr:first').find('.deleteBtn').addClass('hide')

        }
    </script>


@endsection