@extends('operations.layout.mainlayout')

@section('content')

    {{--    @if(session('role') != 3 && session('role') != 4)--}}
    {{--        {{exit("<h1>Unauthorized access</h1>")}}--}}
    {{--    @endif--}}
    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
            color: black;
        }

        .item {
            background-color: rgb(18 221 24 / 13%) !important;
        }

        table.dataTable tr.dtrg-group td {
            background-color: white;
            border-bottom: 1px solid #e7e7e7 !important;
            font-size: 15px;
        }

        #histopathology-opinion-table {
            font-size: 14px;
        }

        .btn-blz {
            color: var(--blazma-primary);
            border-color: var(--blazma-primary);
            width: 20%;
            margin: 2px;
        }

        .btn-blz:hover {
            color: #fff;
            background-color: var(--blazma-primary);
            border-color: var(--blazma-primary);
        }

        .active {
            color: #fff;
            background-color: var(--blazma-primary);
            border-color: var(--blazma-primary);
        }


        .canvasjs-chart-credit {
            display: none;
        }

        .date-filter {
            color: var(--blazma-primary);
            border: 1px solid var(--blazma-primary);
        }

        /*table td {*/
        /*    max-width: 120px;*/
        /*    white-space: nowrap;*/
        /*    text-overflow: ellipsis;*/
        /*    word-break: break-all;*/
        /*    overflow: hidden;*/
        /*}*/

        /*.urgent-control-input:checked~.urgent-control-label::before {*/
        /*    color: #fff;*/
        /*    border-color: #0e8b35 !important;*/
        /*    background-color: #1f8636 !important;*/
        /*    box-shadow: none;*/
        /*}*/
    </style>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        <h1 class="m-0 text-dark" style="color: var(--blazma-text)!important;">Histopathology Opinions</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">

                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">

                        <!-- /.card -->


                        <div class="col-12 col-sm-12 col-md-12">
                            <br/>
                            <div class="card bg-light">
                                <div class="card-header text-muted border-bottom-0">
                                </div>
                                <form method="get" action="" style="width:100%;">
                                    <div class="card-body pt-0">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <span class="text-muted text-sm"><b>Received from</b></span>
                                                        <input id="approval-date-from" class="form-control" type="date"
                                                               name="date_from"
                                                               value="@if(!empty($date_from)){{$date_from}}@endif"
                                                               placeholder="Date From">
                                                    </div>
                                                    <div class="col-md-4">
                                                        <span class="text-muted text-sm"><b>Received to</b></span>
                                                        <input id="approval-date-to" class="form-control" type="date"
                                                               name="date_to"
                                                               value="@if(!empty($date_to)){{$date_to}}@endif"
                                                               placeholder="Date To">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

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


                        <div class="card">
                            <div class="card-body">
                                <table id="histopathology-opinion-table" class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Sample ID</th>
                                        <th>Test Type</th>
                                        <th>Doctor</th>
                                        <th>STATUS</th>
                                        <th>Requested By</th>
                                        <th>Submitted At</th>
                                        <th>Created At</th>
                                        <th>Requested Time</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>

                                </table>
                            </div>
                        </div>
                        <!-- /.container-fluid -->
                    </div>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <div class="modal fade" id="modal-items">
        <div class="modal-dialog modal-lg">
            <form id="validate-form">
                <div class="modal-content">
                    <div class="modal-header">
                        <div id="sample-id"></div>
                        <h3 class="modal-title">Fill Results</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div id="patient-info-result"></div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="alert alert-danger alert-danger-validate" role="alert"
                                     style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-package" role="alert"
                                     style="display: none;"></div>
                            </div>
                        </div>
                        <div id="results-options" class="row">
                        </div>
                        <div class="row">
                            <div class="modal-footer justify-content-end">
                                <button id="save-results-options"
                                        style="border-radius: 20px;padding:10px;font-size:15px;min-width:150px;"
                                        class="btn btn-success">Save
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>

    <div class="modal fade" id="modal-mc-values">
        <div class="modal-dialog modal-md">
            <form id="validate-mc-form">
                <div class="modal-content">
                    <div class="modal-header">
                        <div id="result-id"></div>
                        <h3 class="modal-title">Fill MIC Values</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-package" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div id="mc-results" class="row">
                        </div>
                        <br>
                        <div class="row">
                            <div class="modal-footer justify-content-between">
                                <button id="save-mc-results"  style="border-radius: 20px;padding:10px;font-size:15px;min-width:150px;" class="btn btn-success">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.content-wrapper -->
    <!-- /.content-wrapper -->
    <div class="modal fade" id="modal-upload-items">
        <div class="modal-dialog modal-lg">
            <form id="upload-result-form">
                <div class="modal-content">
                    <div class="modal-header">
                        <div id="sample-id"></div>
                        <h3 class="modal-title">Upload Attachment</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="alert alert-danger alert-danger-validate" role="alert"
                                     style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-package" role="alert"
                                     style="display: none;"></div>
                            </div>
                        </div>


                        <div class="row" style="display: flex;justify-content: space-between;">
                            <input type="file" id="result-files" accept="application/pdf,video/mp4" name="files[]"
                                   multiple/>
                            <div class="custom-control custom-switch text-right">
                                <input type="checkbox" class="custom-control-input" name="is_attach_normal" value=""
                                       id="is_attach_normal">
                                <label class="custom-control-label" for="is_attach_normal"
                                       style="margin-right: 10px;font-weight: 300;"> Is Normal</label>
                            </div>
                        </div>

                        <div class="row">
                            <div id="display-attachments" style="width:100%" class="timeline timeline-inverse mt-5">
                            </div>
                        </div>

                    </div>

                    <div class="row">
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" id="upload-attachment-result" class="btn btn-success">Upload
                                Attachments
                            </button>
                        </div>
                    </div>
                </div>

            </form>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>

    <div class="modal fade" id="modal-new-opinion">
        <div class="modal-dialog modal-lg">
            <form id="comment-form">
                <div class="modal-content">
                    <div class="modal-header">
                        <div id="sample-id"></div>
                        <h3 class="modal-title">Add an opinion</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="alert alert-danger alert-danger-validate" role="alert"
                                     style="display: none;"></div>
                            </div>
                            <div class="col-md-12" id="histopathology-pdf-report">

                            </div>
                            <div class="col-md-12 mt-2">
                                <textarea name="opinion_text" id="opinion_text" cols="10" rows="5" class="form-control" placeholder="Type your opinion here"></textarea>
                            </div>
                        </div>
                        @permission('histopathology_add_opinion_batch')
                        <div class="row mt-3" style="text-align: center;">
                            <div class="col-md-12">
                                <button id="submit-opinion-btn" class="btn btn-info"><i
                                            class="fas fa-lg fa-plus-circle"></i> Add Opinion
                                </button>
                            </div>
                        </div>
                        @endpermission
                    </div>
                </div>
            </form>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>

    <div class="modal fade" id="modal-ct">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <div id="sample-id"></div>
                    <h3 class="modal-title">CT Values</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <input type="hidden" id="ct-sample-id"/>
                            <div class="alert alert-danger alert-danger-validate" role="alert"
                                 style="display: none;"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col" style="text-align: center;">
                            <div class="alert alert-danger alert-danger-package" role="alert"
                                 style="display: none;"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="ic-value">IC</label>
                            <input id="ic-value" name="ic-value" class="form-control" value="" type="number"
                                   step="0.01"/>
                        </div>
                        <div class="col-md-6">
                            <label for="ORF1ab-value">ORF1ab</label>
                            <input id="ORF1ab-value" name="ORF1ab-value" class="form-control" value="" type="number"
                                   step="0.01"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="Ngene-value">Ngene</label>
                            <input id="Ngene-value" name="Ngene-value" class="form-control" value="" type="number"
                                   step="0.01"/>
                        </div>
                        <div class="col-md-6">
                            <label for="Egene-value">Egene</label>
                            <input id="Egene-value" name="Egene-value" class="form-control" value="" type="number"
                                   step="0.01"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <label for="RdRP-value">RdRP</label>
                            <input id="RdRP-value" name="RdRP-value" class="form-control" value="" type="number"
                                   step="0.01"/>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="save-ct-values" style="padding:10px;font-size:15px;min-width:150px;"
                            class="btn btn-success">Save
                    </button>
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
    </div>

    <div class="modal fade" id="modal-tests-results">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Patient Tests Results</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col" style="text-align: center;">
                            <div class="alert alert-danger alert-danger-package" role="alert"
                                 style="display: none;"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <table id="patient-results-tests-table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Sample ID</th>
                                    <th>Name</th>
                                    <th>Tests</th>
                                    <th>Result Date</th>
                                    <th>Result</th>
                                </tr>
                                </thead>

                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">

                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!-- /.content-wrapper -->

@endsection

@section('footer-scripts')
    <script>
        var HistopathologyApprovalTable =
            $("#histopathology-opinion-table").DataTable({
                dom: 'lBfrtip',
                "buttons" : [
                    'copy', 'csv', 'pdf', 'print'
                ],
                "lengthMenu": [[10, 25, 50, 500,1000,5000,10000,40000], [10, 25, 50, 500, 1000,5000,10000,40000]],
                "responsive": true,
                "autoWidth": false,
                serverSide: true,
                scrollX: false,
                "processing": true,
                "ordering": false,
                rowGroup: {
                    enable: false,
                    dataSrc: "NAME"
                },
                ajax: {
                    url : '/operations/histopathology/opinions-report',
                    data: function (d) {
                        d.date_from = $('#approval-date-from').val(),
                            d.date_to = $('#approval-date-to').val(),
                            d.hospital_id = $('#approval-hospital-id').val(),
                            d.only_results = $('#approval-only-results').is(':checked'),
                            d.only_positive = $('#approval-only-positive').is(':checked'),
                            d.only_urgent = $('#approval-only-urgent').is(':checked'),
                            d.location = $('#approval-location-id').val(),
                            d.batch_id = $('#approval-batch-id').val(),
                            d.run_id = $('#approval-run-id').val(),
                            d.analyzer_id = $('#approval-analyzer-id').val(),
                            d.test_category = $('#approval-category-id').val()
                    }
                },
                'columnDefs': [
                    {
                        'targets': 0,
                        'checkboxes': {
                            'selectRow': true
                        },
                    }
                ],
                'select': {
                    'style': 'multi'
                },
                "order": [[ 0, "desc" ]],
                columns: [
                    { data: "ID", name: "ID" },
                    { data: "SAMPLE_ID", name: "SAMPLE_ID" },
                    { data: "TEST_NAME", name: "TEST_NAME" },
                    { data: "DOCTOR_NAME", name: "DOCTOR_NAME" },
                    { data: "STATUS", name: "STATUS", render: function ( data, type, row, meta ) {
                            if(row['STATUS'] === 'Pending'){
                                return "<span style='color:red'>"+data+"</span>";
                            }else if(row['STATUS'] === 'Submitted'){
                                return "<span style='color:green'>"+data+"</span>";
                                }
                            else return data;

                        }},
                    { data: "REQUESTED_BY", name: "REQUESTED_BY" },
                    { data: "OPINION_TIME", name: "OPINION_TIME" },
                    { data: "CREATE_DATE", name: "CREATE_DATE" },
                    { data: "REQUESTED_TIME", name: "REQUESTED_TIME" },
                    { data: "ID", name: "ID", render: function ( data, type, row, meta ) {
                            let text = encodeURIComponent(row["OPINION_TEXT"]);
                            let opinion_button = '<div class="btn btn-sm btn-success add-opinion-btn" sample-id='+row["SAMPLE_ID"]+'  status='+row["STATUS"]+' opinion-text='+text+' identification='+row["IDENTIFICATION"]+' order-id='+row["END_USER_LAB_ORDER_ID"]+' id='+row["ID"]+'>Add Opinion</div>';
                            let sessionId = {{session('admin_id')}};
                            let doctorId = parseInt(row['OPINION_DOCTOR_ID']);
                            @permission('histopathology_add_opinion_batch')
                            if (sessionId === doctorId)
                                return opinion_button;
                            else return '';
                            @else
                                return  '';
                            @endpermission

                        }},


                ],
            });

        $('#histopathology-opinion-table tbody').on('click', '.check-comments', function () {
            getPackageComments($(this).attr("sample-id"))
            $('#modal-comments').modal('show');
        });

        $('#histopathology-opinion-table tbody').on('click', '.ct-details-control', function () {
            $("#ct-sample-id").val($(this).attr("sample-id"));
            $("#ic-value").val($(this).attr("ic"));
            $("#ORF1ab-value").val($(this).attr("or"));
            $("#Ngene-value").val($(this).attr("ng"));
            $("#Egene-value").val($(this).attr("eg"));
            $("#RdRP-value").val($(this).attr("rd"));
            $('#modal-ct').modal('show');
        });

        $("#approval-date-from").change(function(){
            HistopathologyApprovalTable.draw();
        });
        $("#approval-date-to").change(function(){
            HistopathologyApprovalTable.draw();
        });
        $("#approval-batch-id").change(function(){
            HistopathologyApprovalTable.draw();
        });
        $("#approval-run-id").change(function(){
            HistopathologyApprovalTable.draw();
        });
        $("#approval-analyzer-id").change(function(){
            HistopathologyApprovalTable.draw();
        });
        $("#approval-category-id").change(function(){
            HistopathologyApprovalTable.draw();
        });
        $("#approval-only-urgent").change(function(){
            HistopathologyApprovalTable.draw();
        });
        $("#approval-hospital-id").change(function(){

            $.ajax({
                type: "GET",
                url: "/operations/hospitals/"+$("#approval-hospital-id").val()+"/locations",
            }).done(function(data, textStatus, xhr ) {
                if(data.response) {
                    $("#approval-location-id").empty();
                    $("#approval-location-id").append('<option value="0">Select Location</option>');
                    data.response.forEach(function(element) {
                        $("#approval-location-id").append('<option value="'+element.ID+'">'+element.NAME_EN+'</option>');
                    })
                }else{
                    alert("Please re-login, your session has ended");
                }
            }).fail(function(jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseJSON.errorMessage);
            });
            HistopathologyApprovalTable.draw();
        });
        $("#approval-location-id").change(function(){
            HistopathologyApprovalTable.draw();
        });
        $("#approval-only-results").change(function(){
            HistopathologyApprovalTable.draw();
        });
        $("#approval-only-positive").change(function(){
            HistopathologyApprovalTable.draw();
        });
        $("#urgent-only-positive").change(function(){
            HistopathologyApprovalTable.draw();
        });

        $(document).on('click', '.request-opinion', function (e) {
            e.preventDefault();
            var testId = $(this).attr('test-id');
            $('#modal-opinions').modal('show');

            $('#save-request-doctor-opinion').off();
            $('#save-request-doctor-opinion').on('click', function (e) {
                e.preventDefault();
                var doctorId = $('#doctor').val();
                if (doctorId == null) {
                    $(".alert-danger-validate").html('Select a doctor before save');
                    $(".alert-danger-validate").slideDown( "slow", function() {});
                    setTimeout(() => {
                        $(".alert-danger-validate").hide();
                    }, 3000);
                }
                else {
                    $.ajax({
                       url: '/operations/histopathology/request-opinion',
                       method: "POST",
                        data:{
                            testId: testId,
                            doctorId: doctorId,
                        },
                       success:function (response) {
                           $('#modal-opinions').modal('hide')
                           toastr.success('Requested has been stored successfully')
                       },
                        error: function (response) {
                            toastr.error(response.responseJSON.errorMessage)
                        }
                    });
                }
            })

        })

        $("body").on("click", ".histopathology-approve-test",function(){
            var test_id = $(this).attr("test-id")
            var approve_button = $(this);
            approve_button.html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading').attr('disabled', true);
            $.ajax({
                type: "POST",
                url: "/operations/samples/"+test_id+"/approve",
                contentType: "application/json; charset=utf-8",
            }).done(function(data ) {
                HistopathologyApprovalTable.draw();
                toastr.success("Sample approved successfully");

            }).fail(function(jqXHR, textStatus, errorThrown) {
                approve_button.html('Approve').attr('disabled', false);
                if(jqXHR && jqXHR.responseJSON && jqXHR.responseJSON.errorMessage) toastr.error(jqXHR.responseJSON.errorMessage)
                else toastr.error("Internal error encountered")
            });
            return false;
        });

        $('#doctor').select2();

        $(document).on('click', '.add-opinion-btn', function (e) {
            e.preventDefault();
            let opinionId = $(this).attr('id');
            let identification = $(this).attr("identification");
            let status = $(this).attr("status");
            let order_id = $(this).attr("order-id");
            let sample_id = $(this).attr("sample-id");
            let pdfSrc = '/orders/'+order_id+'/preview/pdf/template/'+identification+'?sample_id='+sample_id;
            let opinionTextField = $(this).attr('opinion-text');
            if (opinionTextField === 'null'){
                opinionTextField = '';
            }
            $('#opinion_text').val(decodeURIComponent(opinionTextField))

            $('#histopathology-pdf-report').empty();
            $('#histopathology-pdf-report').append('<embed src="'+pdfSrc+'?#zoom=49" frameborder="0" width="100%" height="400px">')
            $('#modal-new-opinion').modal('show');
            if (status === 'Submitted'){
                $('#submit-opinion-btn').css('display', 'none');
                $('#opinion_text').attr('disabled', true)
            }else {
                $('#submit-opinion-btn').css('display', 'block');
                $('#opinion_text').attr('disabled', false)
                $('#submit-opinion-btn').off();
                $('#submit-opinion-btn').on('click', function (e) {
                    e.preventDefault();
                    //<embed src="sample.pdf" frameborder="0" width="100%" height="400px">
                    let opinionText = $('#opinion_text').val();
                    if (opinionText === '') {
                        toastr.error('The text field is required')
                        return;
                    }

                    $.ajax({
                        url: '/operations/histopathology/opinion',
                        type: "POST",
                        data:{
                            opinionId: opinionId,
                            description: opinionText
                        },
                        success:function (response) {
                            $('#modal-new-opinion').modal('hide');
                            toastr.success('Opinion has been submitted successfully')
                            $('#histopathology-opinion-table').DataTable().ajax.reload();
                        },
                        error: function (response) {
                            if(response && response.responseJSON && response.responseJSON.errorMessage) toastr.error(response.responseJSON.errorMessage)
                            else toastr.error("Internal error encountered")
                        }
                    })
                });
            }

        })
    </script>

@endsection