@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">
            </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">
                <!-- BEGIN PROFILE SIDEBAR -->
                <div class="profile-sidebar" style="width: 300px;">
                    <!-- PORTLET MAIN -->
                    <div class="portlet light profile-sidebar-portlet">
                        <!-- SIDEBAR USER TITLE -->
                        <div class="profile-usertitle">
                            <div class="font-blue-madison bold">
                                Report : {{$reportObj['title']}}
                            </div>
                            <div class="font-blue-madison bold">
                                Appointment Date : {{$reportObj['appointment_date']}}
                            </div>
                            <div class="font-blue-madison bold">
                                Doctor : {{$reportObj['doctor_name']}} ({{$reportObj['specialization']}})
                            </div>
                            <div class="font-blue-madison bold">
                                Laboratory : {{$reportObj['laboratory']}}
                            </div>
                            @if($conversionStatus === "2")
                                <div class="font-blue-madison bold">
                                    Report Converted By : {{$reportDigitizedBy->name}}
                                </div>
                            @endif
                        </div>
                        <!-- END SIDEBAR USER TITLE -->
                        <!-- SIDEBAR BUTTONS -->
                        <!-- END SIDEBAR BUTTONS -->
                        <!-- END MENU -->
                    </div>
                    <!-- END PORTLET MAIN -->
                    <!-- PORTLET MAIN -->
                    <!-- END PORTLET MAIN -->
                </div>
                <!-- END BEGIN PROFILE SIDEBAR -->
                <!-- BEGIN PROFILE CONTENT -->
                <div class="profile-content">
                    <div class="row">
                        <div class="col-md-6">
                            <!-- BEGIN PORTLET -->
                            <div class="portlet light ">
                                <div class="portlet-title">
                                    <div class="caption caption-md">
                                        <i class="icon-bar-chart theme-font hide"></i>
                                        <span class="caption-subject font-blue-madison bold uppercase">Scanned Files</span>
                                    </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">
                                    <!-- Swiper -->
                                    <div class="swiper-container">
                                        <div class="swiper-wrapper">
                                            @foreach ($reportObj['files']['image_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>
                            <!-- END PORTLET -->
                        </div>
                        <div class="col-md-6">
                            <!-- BEGIN PORTLET -->
                            <div class="portlet light ">
                                <div class="portlet-title">
                                    <div class="caption caption-md">
                                        <i class="icon-bar-chart theme-font hide"></i>
                                        <span class="caption-subject font-blue-madison bold uppercase">Digital Reports</span>
                                    </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">
                                    @if($conversionStatus === "2")
                                        <div class='embed-responsive' style='padding-bottom:80%'>
                                            <object data='{{$digitizedUrl}}' type='application/pdf' width='100%'
                                                    height='100%'></object>
                                        </div>
                                    @elseif($conversionStatus === "3")
                                        <span class="label label-info">Updated as Cannot Convert to Digital Report
								default
                                        </span>
                                    @else
                                        <span class="label label-warning">Pending Digital Report
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <!-- END PORTLET -->
                        </div>
                    </div>
                </div>
                <!-- END PROFILE CONTENT -->
            </div>
        </div>
        <!-- END PAGE CONTENT-->

    </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