@extends('layout.layout')
@section('title')
Record Sample
@endsection
@section('backurl')
/record_sample
@endsection
@section('content')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->

<div class="card col-lg-12 mb-5">
    <!--begin::Card body-->
    <div id="kt_customer_view_payment_method" class="pt-0">
        <div id="kt_customer_view_payment_method_1" class="collapse show px-10" data-bs-parent="#kt_customer_view_payment_method">
            <!--begin::Details-->
            <div class="d-flex flex-wrap px-5 py-10 row">

            <div class="col-md-2 mb-2">
                <label class="fs-6 mb-2 text-muted">ERX ID</label>
                <p class="fs-5 fw-bold">{{$user->erxId}}</p>
            </div>
            <div class="col-md-2 mb-2">
                <label class="fs-6 mb-2 text-muted">Subject ID</label>
                <p class="fs-5 fw-bold">{{$subjectId}}</p>
            </div>
            <div class="col-md-3 mb-2">
                <label class="fs-6 mb-2 text-muted">RECORD ID</label>
                <p class="fs-5 fw-bold">{{$visit->visitId}}</p>
            </div>
            <div class="col-md-3 mb-2">
                <label class="fs-6 mb-2 text-muted">Sample Type</label>
                <p class="fs-5 fw-bold">{{$visit->typeName}}</p>
            </div>
            <div class="col-md-2 mb-2">
                <label class="fs-6 mb-2 text-muted">Collection/Visit Date</label>
                <p class="fs-5 fw-bold">{{convert_mm_dd_yyyy($visit->scheuleDate)}}</p>
            </div>
            </div>
            <!--end::Details-->
        </div>
    </div>
    <!--end::Card body-->
</div>
            <div class="card mb-5">
            <input type="hidden" value="{{$clinicalStudyId}}" name="clinicalStudyId" />
            <input type="hidden" value="{{$subjectId}}" name="subjectId" />
            <input type="hidden" value="{{$visitId}}" id="visitId" name="visitId" />
            <!--begin::Card body-->
            <div class="card-body border-top p-9">
                @foreach($array as $key => $singleSampleType)
                @if($singleSampleType['status'] == 'fail')
                <div class="row mb-6 border border-danger pb-5 pt-2">
                    <div class="text-danger">This Sample Duration is Not Completed</div>
                    <div class="form-group">
                        <div data-repeater-list="kt_docs_repeater_basic" id="repeater">
                            <div data-repeater-item class="form-group row">
                                <div class="col-md-3">
                                    <label class="form-label">Sample Type:</label>
                                    <input type="text" value="{{$singleSampleType['data']->name}}" disabled class="form-control mb-2 mb-md-0" />
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Volume:</label>
                                    <input type="number" class="quantity" value="{{$singleSampleType['data']->inputValue}}" disabled class="form-control mb-2 mb-md-0" />
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Rate:</label>
                                    <input type="text" value="" disabled class="form-control mb-2 mb-md-0" />
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Measurement:</label>
                                    <input type="text" value="{{$singleSampleType['data']->measurement}}" disabled class="form-control mb-2 mb-md-0" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-6" style="display:none">
                    <div class="form-group">
                        <div data-repeater-list="kt_docs_repeater_basic" id="repeater">
                            <div data-repeater-item class="form-group row">
                                <div class="col-md-4">
                                    <label class="form-label">Sample Type:</label>
                                    <input type="text" value="{{$singleSampleType['data']->name}}" disabled class="form-control mb-2 mb-md-0" id="sampleType_{{$singleSampleType['data']->id}}" />
                                    <input type="hidden" value="{{$singleSampleType['data']->name}}" name="name[{{$key}}][]" />
                                </div>
                                <div class="col-md-4 rateDive">
                                    <label class="form-label">Rate:</label>
                                    <input type="text" class="rate" value="" disabled class="form-control mb-2 mb-md-0" id="rate_{{$singleSampleType['data']->id}}" />
                                    <input type="hidden" class="rate" name="no_compensation[{{$key}}][]" value="{{$singleSampleType['data']->no_compensation}}" />
                                    <input type="hidden" class="rate" name="limit[{{$key}}][]" value="{{$singleSampleType['data']->limit}}" />
                                    <input type="hidden" class="rate" name="duration[{{$key}}][]" value="{{$singleSampleType['data']->duration}}" />
                                    <input type="hidden" class="rate" name="rate[{{$key}}][]" id="rateHidden_{{$singleSampleType['data']->id}}" />
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Measurement:</label>
                                    <input type="text" value="{{$singleSampleType['data']->measurement}}" disabled class="form-control mb-2 mb-md-0" name="measurement[{{$key}}][]" id="measurement_{{$singleSampleType['data']->id}}" />
                                    <input type="hidden" value="{{$singleSampleType['data']->measurement}}" name="measurement[{{$key}}][]" />
                                </div>
                                @if($singleSampleType['data']->limit == null)
                                <div class="col-md-12 mt-6">
                                    <label class="form-label">Volume:</label>
                                    <input type="number" class="quantity" min="0" max="{{$singleSampleType['data']->limit}}" sampleTypeId="{{$singleSampleType['data']->id}}" value="{{$singleSampleType['data']->inputValue}}" class="form-control mb-2 mb-md-0" name="quantity[{{$key}}][]" id="quantity_{{$singleSampleType['data']->id}}" onkeyup="myFunction({{$singleSampleType['data']->id}})" />
                                </div>
                                @else
                                <div class="col-md-12 mt-6">
                                    <label class="form-label">Volume:</label>
                                    <input type="number" class="quantity" min="0" max="{{$singleSampleType['data']->requiredSample}}" value="{{$singleSampleType['data']->inputValue}}" sampleTypeId="{{$singleSampleType['data']->id}}" class="form-control mb-2 mb-md-0" name="quantity[{{$key}}][]" id="quantity_{{$singleSampleType['data']->id}}" onkeyup="myFunction({{$singleSampleType['data']->id}})" />
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @else
                <div class="row mb-6">
                <div class="col-md-6">
                                <label class="form-label">Cost Centers <span class="text-danger">*</span> </label>
                                <!-- <select class="form-select form-select-solid selectBox" data-control="select2" name="costCenterId[]" id="costCenter" data-placeholder="Select an option" data-allow-clear="true" multiple> -->
                                <select class="select2-multiple form-control select-costcenter" disabled name="costCenterId[]" required multiple="multiple" id="select2Multiple">
                                    @foreach($costCenter as $center)
                                    <option value="{{$center->name}}" data-desc="{{ fnDecryptProd($center->description) }}" {{isset($center->isSelected) == 1 ? 'selected': ''}}>{{$center->name}}</option>
                                    @endforeach
                                </select>
                </div>
                            @if($singleSampleType['data']->limit == null)
                                <div class="col-md-3">
                                    <label class="form-label">Volume/ Count </label>
                                    <input type="number" min="0" disabled value="{{$singleSampleType['data']->inputValue}}" max="{{$singleSampleType['data']->limit}}" sampleTypeId="{{$singleSampleType['data']->id}}" class="form-control mb-2 mb-md-0 quantity" name="quantity[{{$key}}][]" id="quantity_{{$singleSampleType['data']->id}}" onkeyup="myFunction({{$singleSampleType['data']->id}})" />
                                </div>
                                @else
                                <div class="col-md-3">
                                    <label class="form-label">Volume/ Count </label>
                                    <input type="number" disabled value="{{$singleSampleType['data']->inputValue}}" min="0" max="{{$singleSampleType['data']->requiredSample }}" sampleTypeId="{{$singleSampleType['data']->id}}" class="form-control mb-2 mb-md-0 quantity" name="quantity[{{$key}}][]" id="quantity_{{$singleSampleType['data']->id}}" onkeyup="myFunction({{$singleSampleType['data']->id}})" />
                                </div>
                                @endif
                                <div class="col-md-3 rateDive">
                                    <label class="form-label">Compensation $</label>
                                    <input type="text" value="" disabled class="form-control mb-2 mb-md-0 rate sampleRate" id="rate_{{$singleSampleType['data']->id}}" />
                                    <input type="hidden" class="rate" name="no_compensation[{{$key}}][]" value="{{$singleSampleType['data']->no_compensation}}" />
                                    <input type="hidden" class="rate" name="limit[{{$key}}][]" value="{{$singleSampleType['data']->limit}}" />
                                    <input type="hidden" class="rate" name="duration[{{$key}}][]" value="{{$singleSampleType['data']->duration}}" />
                                    <input type="hidden" class="rate" name="rate[{{$key}}][]" id="rateHidden_{{$singleSampleType['data']->id}}" />
                                </div>

                                <div class="col-md-4 d-none">
                                    <label class="form-label">Sample Type:</label>
                                    <input type="text" value="{{$singleSampleType['data']->name}}" disabled class="form-control mb-2 mb-md-0" id="sampleType_{{$singleSampleType['data']->id}}" />
                                    <input type="hidden" value="{{$singleSampleType['data']->name}}" name="name[{{$key}}][]" />
                                </div>

                                <div class="col-md-4 d-none">
                                    <label class="form-label">Measurement:</label>
                                    <input type="text" value="{{$singleSampleType['data']->measurement}}" disabled class="form-control mb-2 mb-md-0" name="measurement[{{$key}}][]" id="measurement_{{$singleSampleType['data']->id}}" />
                                    <input type="hidden" value="{{$singleSampleType['data']->measurement}}" name="measurement[{{$key}}][]" />
                                </div>
                </div>


                <div class="table-constcenter d-none">
                    <div class="m-0 mb-5 row">
                        <div class="border-2 border-bottom col-md-3 fs-4 fw-bold pb-2 text-muted text-uppercase">Cost Center</div>
                        <div class="border-2 border-bottom col-md-9 fs-4 fw-bold pb-2 text-muted text-uppercase">Description
                        </div>
                    </div>
                    <input type="hidden" name="costCenterDetail">
                    <div class="costcenter-detail"></div>
                </div>

                @endif
                @endforeach


            </div>


    </div>
    <div class="card">
    <div class="card-body">
    <div class="mb-10">
                    <!--begin::Label-->
                    <label class="fs-2 fw-bold">{{ __('Ancillary Charges') }}</label>
                    <!--end::Label-->
                </div>

                <div class="m-0 mb-5 row">
                    <div class="border-2 border-bottom col-md-6 fs-4 fw-bold pb-2 text-muted text-uppercase">Name:</div>
                    <div class="border-2 border-bottom col-md-6 fs-4 fw-bold pb-2 text-muted text-uppercase">Compensation</div>
                </div>
                @foreach($charges as $key => $singleCharge)
                @if($singleCharge->type == "Per Hour")
                <div class="row mb-6">
                <div class="col-md-4">
                                    <label class="form-label">Name:</label>
                                    <input type="text" class="name" disabled class="form-control mb-2 mb-md-0" value="{{$singleCharge->name}}" />
                                    <input type="hidden" value="{{$singleCharge->name}}" name="chargesName[{{$key}}][]" />
                                </div>
                                <div class="d-none">
                                    <label class="form-label">Type:</label>
                                    <input type="text" class="type" value="{{$singleCharge->type}}" disabled class="form-control mb-2 mb-md-0" />
                                    <input type="hidden" value="{{$singleCharge->type}}" name="chargesType[{{$key}}][]" />
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Hours:</label>
                                    <input type="number" class="form-control mb-2 mb-md-0 trigger" value="{{$singleCharge->inputValue}}" max="100" id="hours_{{$singleCharge->id}}" step="0.01" onkeyup="calculateRate({{$singleCharge->rate}},{{$singleCharge->id}})" />
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Compensation:</label>
                                    <input type="text" class="form-control mb-2 mb-md-0" disabled id="ac_rate_{{$singleCharge->id}}" />
                                    <input type="text" class="form-control mb-2 mb-md-0 ancillaryRate_{{$key}}" style="display: none;" name="charges[{{$key}}][]" id="ac_rateHidden_{{$singleCharge->id}}" />
                                </div>
                </div>
                @else
                <div class="row d-flex justify-content-between mb-6">
                <div class="col-md-5">
                                    <input type="text" disabled class="name form-control mb-2 mb-md-0" value="{{$singleCharge->name}}" />
                                    <input type="hidden" value="{{$singleCharge->name}}" name="chargesName[{{$key}}][]" />
                                </div>
                                <div class="d-none">
                                    <input type="text"  value="{{$singleCharge->type}}" disabled class="type form-control mb-2 mb-md-0" />
                                    <input type="hidden" value="{{$singleCharge->type}}" name="chargesType[{{$key}}][]" />
                                </div>
                                <div class="col-md-6">
                                    <input type="number" disabled onkeydown="if(event.key==='.'){event.preventDefault();}"  oninput="event.target.value = event.target.value.replace(/[^0-9]*/g,'');" class="form-control mb-2 mb-md-0 ancillaryRate_{{$key}}" value="{{$singleCharge->inputValue}}" max="99999" name="charges[{{$key}}][]">
                                </div>
                </div>
                @endif
                @endforeach
                <input value="{{$key}}" id="ancillaryKey" type="hidden"/>

                <div class="d-flex justify-content-end py-2">
            </div>

    </div>
    </div>
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Collect Samples</h5>
      </div>
      <div class="modal-body">
        <p>Do you want to collect Samples and Ancillary Charges?</p>
        <p>Total Sample Charges : $<span id="sampleCharges"></span></p>
        <p>Total Ancillary Charges : $<span id="ancillaryCharges"></span></p>
        <p>Total Compensation Charges : $<span id="totalCharges"></span></p>
        <p>Cost Center : <span id="costCenter"></span></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="submit">Collect Sample</button>
        <button type="button" class="btn btn-secondary" id="modalClose" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript">

// for cost center detail
//
$(document).ready(function(){
        $('body').on('change','.select-costcenter',function(){
            $('.costcenter-detail').html('');
            $('.table-constcenter').addClass('d-none');
            $('input[name="costCenterDetail"]').val("");
            var costCenterDetail="";
            $('.select-costcenter').find(":selected").each(function(){
                costCenterDetail=costCenterDetail+$(this).val()+":"+$(this).data('desc')+",";
                $('.table-constcenter').removeClass('d-none');
                $('.costcenter-detail').append(`
                    <div class="row d-flex justify-content-between mb-6">
                    <div class="col-md-3">
                        <input type="text" disabled="" class=" form-control mb-2 mb-md-0" value="`+$(this).val()+`">
                    </div>
                    <div class="col-md-9">
                        <input type="text" disabled="" class=" form-control mb-2 mb-md-0" value="`+$(this).data('desc')+`">
                    </div>
                    </div>
                `);
            });

            $('input[name="costCenterDetail"]').val(costCenterDetail.slice(0,-1));

});
$('.select-costcenter').change();
       });

function calculateRate(rate, dataID) {
var hours = document.getElementById('hours_' + dataID).value;
var amount = hours * rate;
if(amount != 0){
document.getElementById('ac_rate_' + dataID).value = amount;
document.getElementById('ac_rateHidden_' + dataID).value = amount;
}
}

function myFunction(dataID) {
console.log(dataID);
var myData = document.getElementById('quantity_' + dataID).value;
var id = dataID;
axios.get('{!! route('getTrails.all') !!}')
.then(function(response) {
var price = response.data.filter(data => data.id == id);
var totalPrice = 0;
for (let i = 0; i < price[0].sample_types_min_max_rates.length; i++) {
if (parseInt(price[0].sample_types_min_max_rates[i].minimum) <= myData) {
if (myData <= parseInt(price[0].sample_types_min_max_rates[i].maximum)) {
totalPrice = price[0].sample_types_min_max_rates[i].payment_rate;
}
}
}
document.getElementById('rate_' + dataID).value = '';
document.getElementById('rateHidden_' + dataID).value = '';
document.getElementById('rate_' + dataID).value = totalPrice;
document.getElementById('rateHidden_' + dataID).value = totalPrice;
})
.catch(function(error) {
});
}
$(document).ready(function() {
myFunction("{!! $singleSampleType['data']->id !!}");

$('.selectBox').select2();

// Select2 Multiple
     $('.select2-multiple').select2({
            placeholder: "Select",
            allowClear: true
        });


$('#modalClose').click(function(){
        $('.modal').modal('hide');
        $('#sampleCharges').html("");
        $('#ancillaryCharges').html("");
    });

    $('#submit').click(function(){
        $('#collectSample_create_form').submit();
    });


    function getSampleModal(){
        $('.modal').modal('show');
        var sampleAmount = $('.sampleRate').val();
        if (sampleAmount != "") {
            sampleRate = parseFloat(sampleAmount).toFixed(2);
        }
        var ancillaryKey = $('#ancillaryKey').val();
        var costCenter = $('#select2Multiple').val();
        if (costCenter == "") {
            $('.modal').modal('hide');
            Swal.fire({
                            text: "Please Enter Cost Center",
                            icon: "error",
                            buttonsStyling: false,
                            confirmButtonText: "Ok, got it!",
                            customClass: {
                                confirmButton: "btn btn-primary"
                            }
                        });
        }
        var ancillaryRate = 0;
        for (let index = 0; index <= ancillaryKey; index++) {
            var data = $('.ancillaryRate_'+index).val();
            if (data != "") {
                ancillaryRate = parseFloat(ancillaryRate) + parseFloat(data);
                ancillaryRate = parseFloat(ancillaryRate).toFixed(2);
            }
        }
        $('#sampleCharges').html(sampleRate);
        var html = "";
        for (let index = 0; index < costCenter.length; index++) {
            if(index != 0){
                html = html + ', ';
            }
            html = html + costCenter[index];
            // $('#costCenter').html(costCenter[index]);
            // $('#costCenter').html(', ');
        }
        $('#costCenter').html(html);
        $('#ancillaryCharges').html(ancillaryRate);
        var totalCharges = parseFloat(ancillaryRate) + parseFloat(sampleRate);
        $('#totalCharges').html(totalCharges);
    };
});



</script>

@endsection