@extends('operations.layout.mainlayout')

@section('content')
    <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;
        }
        #reading-batch-table{
            font-size: 14px;
        }
    </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: #e35a80!important;">Extraction Results</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-3">
                                                            <span class="text-muted text-sm"><b>Received from</b></span>
                                                            <input id="validation-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-3">
                                                            <span class="text-muted text-sm"><b>Received to</b></span>
                                                            <input id="validation-date-to" class="form-control"  type="date" name="date_to" value="@if(!empty($date_to)){{$date_to}}@endif" placeholder="Date To">
                                                        </div>
                                                        @permission('view_all_medical_complex')
                                                            <div class="col-md-3">
                                                                <span class="text-muted text-sm"><b>Select Batch No.</b></span>
                                                                <select required class="form-control" name="validation-batch-id" id="validation-batch-id">
                                                                    <option value="">Select Batch</option>
                                                                    @foreach($batches as $batch)
                                                                        <option value="{{$batch->ID}}">{{$batch->BATCH_NUMBER}}</option>
                                                                    @endforeach
                                                                </select>

                                                            </div>
                                                        @endpermission
                                                        <div class="col-md-3">
                                                            <span class="text-muted text-sm"><b>Test Category</b></span>
                                                            <select class="form-control" id="validation-category-id" name="status">
                                                                    <option value="">Select Test Category</option>
                                                                    @foreach($packages as $package)
                                                                            <option value="{{$package->ID}}">{{$package->NAME_EN}}</option>
                                                                        @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </form>
                                    <div class="card-footer">
                                            <div class="text-right">
                                            @permission('download_processing_validation')
                                            <a id="genetics-samples-export"  class="btn btn-sm btn-success" style="color:#fff !important">
                                                <i class="fas fa-download"></i> Download Excel
                                            </a>
                                            <a id="genetics-template-export" class="btn btn-sm btn-primary ml-2" style="color:#fff !important">
                                                <i class="fas fa-download"></i> Download Results Template
                                            </a>
                                            @endpermission
                                            @permission('sample_add_result')
                                            <button id="import-results-btn" class="btn btn-sm btn-info ml-2" data-toggle="modal" data-target="#import-results-modal">
                                                <i class="fas fa-upload"></i> Import Results
                                            </button>
                                            @endpermission
                                        </div>
                                    </div>
                                </div>
                            </div>


                    <div class="card">
                    <div class="card-body">
                    <table id="batch-samples-table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Sample#</th>
                                    <th>Test ID</th>
                                    <th>Test Type</th>
                                    <th style="min-width:100px">Result</th>
                                    <th>Patient</th>
                                    <th>Identification</th>
                                    <th>Collection Time</th>
                                    <th>Receiving Time</th>
                                    <th>Result Time</th>
                                    <th>Batch Status</th>
                                    <th>Batch Number</th>
                                    <th>Cut Off Value</th>
                                </tr>
                                </thead>

                            </table>
                    </div>

                    </div>
            <!-- /.row -->
        </div>
                <!-- /.row -->
            </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
    
<div class="modal fade" id="import-results-modal">
    <div class="modal-dialog modal-lg">
        <form id="template-form" enctype="multipart/form-data">
            <div class="modal-content">
                <div class="modal-header">
                    <div id="template-sample-id"></div>
                    <h3 class="modal-title">Import Genetics 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-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 mb-4">
                        <div class="col-12">
                            <label for="template-file"><b>Upload Genetics Results</b></label>
                            <input type="file" id="template-file" name="template_file" class="form-control" accept=".xlsx,.xls,.csv">
                            <small class="form-text text-muted">Upload Excel or CSV file with sample results</small>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="modal-footer justify-content-between">
                            <button id="import-genetics-results"  style="border-radius: 20px;padding:10px;font-size:15px;min-width:150px;" class="btn btn-success">Import</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <!-- /.card -->
    </div>
    <!-- /.col -->
</div>

    <!-- /.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>
                </div>
            </form>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>

     <!-- /.content-wrapper -->
     <div class="modal fade" id="modal-analyzer-reference">
        <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">Reference Range</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 id="reference-options" class="row">

                        </div>
                        </div>

                        <div class="row">
                            <div class="col-12 modal-footer justify-content-between">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="button" id="manual-analyzer-reference" class="btn btn-info">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>

    <!-- /.content-wrapper -->
    <div class="modal fade" id="modal-comments">
        <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">Sample Comments Log</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="col">
                                    <div id="comments" class="timeline timeline-inverse ">
                                    </div>
                                </div>
                        @permission('add_processing_validation_comment')
                        <div class="row" style="padding: 0 10px;">
                        <div class="col-md-12">
                        <input type="file" id="files" name="files[]" multiple/>
                            <textarea id="sampleComment" required class="form-control mt-4" placeholder="Enter your comment here" id="COMMENT_TEXT" name="COMMENT_TEXT" rows="3" cols="50"></textarea>
                            </div>
                            <div class="col-md-12 mt-5 mb-4" style="display:flex;justify-content:end;align-items:center">
                                <button id="add-sample-comment" class="btn btn-info mr-3"><i class="fas fa-lg fa-plus-circle"></i> Add Comment</button>
                                <button id="reset-sample" type="button" class="btn btn-warning" style="color:white;padding-right:15px"><i class="fa fa-lg fa-arrow-circle-left" ></i> Reset Sample</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-import">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Excel Importing</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="collection-form" method="post"  action="/operations/samples/">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-import" role="alert" style="display: none;"></div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Upload Excel File</p>
                                <input style="padding:3px" class="form-control" name="import-file" id="import-file" type="file" required />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="text-right">
                            <input type="checkbox" name="validation-all-samples" value="reset" id="validation-all-samples">
                            <label for="only-reset" style="margin-right: 10px;font-weight: 300;"> With validate all samples</label>
                        </div>
                        <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button" class="btn btn-default float-left" data-dismiss="modal">{{trans("web.cancel")}}</button>
                        <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" id="import_results" type="button" class="btn btn-success">Import</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection

@section('footer-scripts')

    <script>
           var batchSamplesTable = $("#batch-samples-table").DataTable({
                dom: 'lBfrtip',
                "buttons" : [
                    'copy', 'csv', 'pdf', 'print'
                ],
                "pageLength" : 100,
                "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],

                "responsive": true,
                "autoWidth": false,
                serverSide: true,
                "processing": true,
                "ordering": false,
                rowGroup: {
                    enable: false,
                    dataSrc: "NAME"
                },
                ajax: {
                    url : '/operations/genetics/samples/datatable',
                    data: function (d) {
                        d.date_from = $('#validation-date-from').val(),
                            d.date_to = $('#validation-date-to').val(),
                            d.hospital_id = $('#validation-hospital-id').val(),
                            d.only_results = $('#validation-only-results').is(':checked'),
                            d.only_urgent = $('#validation-only-urgent').is(':checked'),
                            d.group_by_patient = $('#validation-group-by').is(':checked'),
                            d.location = $('#validation-location-id').val(),
                            d.batch_id = $('#validation-batch-id').val(),
                            d.run_id = $('#validation-run-id').val(),
                            d.sendout_id = $('#validation-sendout-id').val(),
                            d.analyzer_id = $('#validation-analyzer-id').val(),
                            d.test_category = $('#validation-category-id').val()
                    }
                },
                'columnDefs': [
                    {
                        'targets': 0,
                        'checkboxes': {
                            'selectRow': true
                        },
                    }
                ],
                'select': {
                    'style': 'multi'
                },
                "order": [[ 0, "desc" ]],
                columns: [
                    { data: "SAMPLE_ID", name: "SAMPLE_ID", render: function ( data, type, row, meta ) {
                            if(data != null) @permission('view_samples_details') return '<a href="/operations/samples/'+data+'">'+data+'</a>';
                            @else
                                return data;
                            @endpermission
                        else return '';
                        } },
                    { data: "ID", name: "ID", render: function ( data, type, row, meta ) {
                            @permission('view_samples_details') return '<a href="/operations/samples/'+data+'">'+data+'</a>'; @else return  data @endpermission
                        } },
                    { data: "TEST_NAME", name: "LAB_CATEGORY_PACKAGE.NAME_EN",render: function ( data, type, row,meta ) {
                            if(row['IS_NORMAL']==1){
                                return "<span style='color:green'>"+data+"</span>";
                            }
                            else if(row['IS_NORMAL']==0){
                                return "<span style='color:red'>"+data+"</span>";
                            }
                            else if(row['IS_STAT']==1)
                                return "<span style='color:orange'>"+data+"</span>";
                            else
                                return data;
                        }
                    },
                    { data: "DECIMAL_RESULT", name: "DECIMAL_RESULT",render: function ( data, type, row,meta ) {

                        var data_value = "";
                        if(data != null && data != 0) data_value = data;
                        var resultStatus = "";
                        if (row['EXTRACTION_CUT_OFF_VALUE'] != null && parseInt(data) >= parseInt(row['EXTRACTION_CUT_OFF_VALUE'])) {
                            resultStatus = "<span style='color:green'>Passed</span>";
                        }
                        else if(row['EXTRACTION_CUT_OFF_VALUE'] != null && parseInt(data) < parseInt(row['EXTRACTION_CUT_OFF_VALUE'])) {
                            resultStatus = "<span style='color:red'>Failed</span>";
                        }

                        return '<a href="#" @permission('add_processing_validation_unit') class="xedit-result" @endpermission data-pk="'+row["ID"]+'" data-title="Enter Result">'+data_value+'</a> '+resultStatus;
                    } },
                    { data: "NAME", name: "NAME"},
                    { data: "IDENTIFICATION", name: "IDENTIFICATION"},
                    { data: "COLLECTION_TIME", name: "COLLECTION_TIME" },
                    { data: "ANALYZE_TIME", name: "ANALYZE_TIME" },
                    { data: "RESULT_TIME", name: "RESULT_TIME" },
                    { data: "BATCH_STATUS", name: "BATCH_STATUS" },
                    { data: "BATCH_NUMBER", name: "BATCH_NUMBER" },
                    { data: "EXTRACTION_CUT_OFF_VALUE", name: "EXTRACTION_CUT_OFF_VALUE",render: function ( data, type, row ) {
                            return '<span id="'+row["ID"]+'_cut_off_value">'+data+'</span>';
                        }
                    },

                ],
                "drawCallback": function( settings ) {

                    $(".xedit-result").editable({
                        type: 'number',
                        step: 'any',
                        url: "/operations/sample/result",
                        error: function(response, newValue) {
                            if(response.status === 500) {
                                return 'Service unavailable. Please try later.';
                            } else {
                                $(".xe-error").remove();
                                var error = $.parseJSON( response.responseText )
                                $(".popover-body").prepend("<span class='xe-error' style='color:red'>"+error+"</span>")
                            }
                        },
                        success:function (response, newValue){
                            batchSamplesTable.draw();
                            if(response.data)
                            {
                                for (const [key, value] of Object.entries(response.data)) {
                                    let element = $("td").find(`[data-pk='${key}']`);
                                    if(element.length>0){
                                        let parent = element.parent().parent();
                                        parent.addClass('item')
                                        let result=parent.find('.xedit-result')
                                        result.text(value)
                                        toastr.success("Sample ID -"+key+"- Result added successfully");
                                    }
                                }
                            }
                            if(response.test_id){
                                let element = $("td").find(`[data-pk='${response.test_id}']`);
                                let extractionCutOff = $(`#${response.test_id}_cut_off_value`).text();
                                parent = element.parent().parent().find("td:eq(3)");
                                let resultStatus = parent.find('span');
                                if(resultStatus.length === 0) {
                                    parent.append('<span></span>');
                                    resultStatus = parent.find('span');
                                } else {
                                    resultStatus.empty();
                                }
                                if(newValue >= extractionCutOff){
                                    resultStatus.text(" Passed");
                                    resultStatus.css("color","green")
                                }
                                else {
                                    resultStatus.text(" Failed");
                                    resultStatus.css("color","red")
                                }
                            }

                        },
                    })
                }
            });

            // Filter table when filter inputs change
            $('#validation-date-from, #validation-date-to, #validation-hospital-id, #validation-location-id, #validation-batch-id, #validation-run-id, #validation-sendout-id, #validation-category-id').change(function() {
                batchSamplesTable.ajax.reload();
            });
            
            // Template Upload Button Click
            $('#import-results-btn').click(function() {
                // Clear previous form data
                $('#template-form')[0].reset();
                $('.alert-danger-validate').hide();
                $('.alert-danger-package').hide();
                
                // Show the modal
                $('#import-results-modal').modal('show');
            });
            
            // Handle genetics results import
            $('#import-genetics-results').click(function(e) {
                e.preventDefault();
                
                var formData = new FormData();
                var fileInput = $('#template-file')[0];
                
                if (fileInput.files.length === 0) {
                    $('.alert-danger-validate').text('Please select a file to upload').show();
                    return;
                }
                
                formData.append('template_file', fileInput.files[0]);
                formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
                
                // Show loading state
                $(this).html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Importing...').attr('disabled', true);
                $('.alert-danger-validate').hide();
                $('.alert-danger-package').hide();
                
                $.ajax({
                    url: '/operations/genetics/import-results',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            $('#import-results-modal').modal('hide');
                            batchSamplesTable.ajax.reload();
                            toastr.success(response.message);
                        } else {
                            $('.alert-danger-validate').text(response.message).show();
                        }
                    },
                    error: function(xhr) {
                        var errorMessage = 'Error importing results';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }
                        $('.alert-danger-validate').text(errorMessage).show();
                    },
                    complete: function() {
                        $('#import-genetics-results').html('Import').attr('disabled', false);
                    }
                });
            });

            // Excel Export Functionality
            $('#genetics-samples-export').click(function() {
                var params = {
                    date_from: $('#validation-date-from').val(),
                    date_to: $('#validation-date-to').val(),
                    hospital: $('#validation-hospital-id').val(),
                    batch: $('#validation-batch-id').val(),
                    run: $('#validation-run-id').val(),
                    category: $('#validation-category-id').val()
                };
                
                var queryString = $.param(params);
                window.location.href = '/operations/genetics/batches/export?' + queryString;
            });

            // Template Export Functionality
            $('#genetics-template-export').click(function() {
                var params = {
                    date_from: $('#validation-date-from').val(),
                    date_to: $('#validation-date-to').val(),
                    hospital: $('#validation-hospital-id').val(),
                    batch: $('#validation-batch-id').val(),
                    run: $('#validation-run-id').val(),
                    category: $('#validation-category-id').val()
                };
                
                var queryString = $.param(params);
                window.location.href = '/operations/genetics/batches/template/export?' + queryString;
            });
    </script>
    
@endsection