@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" />
    <form id="collectSample_create_form" class="form" method="POST" action="{{ route('record_sample.store') }}" enctype="multipart/form-data">
    <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 py-5 row">
                    <!--begin::Col-->
                    <div class="col-lg-6">
                        <table class="fw-bold table table-row-gray-300">
                            <tr>
                                <td class="text-muted min-w-125px w-125px">Visit ID</td>
                                <td class="text-gray-800">{{$visitId}}</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-125px w-125px">Clinical Study</td>
                                <td class="text-gray-800" style="text-transform: uppercase;">{{$clinicalStudyName}}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-lg-6">
                        <table class="fw-bold table  table-row-gray-300">
                            <tr>
                                <td class="text-muted min-w-125px w-125px">Subject ID</td>
                                <td class="text-gray-800">{{$subjectId}}</td>
                            </tr>
                        </table>
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Details-->
            </div>
        </div>
        <!--end::Card body-->
    </div>
    <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="card-body border-top p-9">
                    <!--begin::Input group-->
                    <div class="row mb-6">
                        <div class="form-group">
                            <div data-repeater-list="kt_docs_repeater_basic" id="repeater">
                                <div class="col-md-12">
                                    <label class="form-label">Cost Centers:</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" name="costCenterId[]" required multiple="multiple" id="select2Multiple">
                                        @foreach($costCenter as $center)
                                        <option value="{{$center->name}}" {{$costCenter == $center->name ? 'selected': ''}}>{{$center->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end::Details-->
            </div>
        </div>
        <!--end::Card body-->
    </div>
    <div class="card mb-5 mb-xl-10">
        <!--begin::Card header-->
        <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#kt_account_profile_details" aria-expanded="true" aria-controls="kt_account_profile_details">
            <!--begin::Card title-->
            <div class="card-title m-0">
                <h3 class="fw-bolder m-0">{{ __('Record Sample') }}</h3>
            </div>
            <!--end::Card title-->
        </div>
        <!--begin::Card header-->

        <!--begin::Content-->
        <div id="kt_account_profile_details" class="collapse show">
            <!--begin::Form-->

                @csrf
                @method('POST')
                <input type="hidden" value="{{$clinicalStudyId}}" name="clinicalStudyId" />
                <input type="hidden" value="{{$date}}" name="date" />
                <input type="hidden" value="{{$subjectId}}" name="subjectId" />
                <input type="hidden" value="{{$visitId}}" id="visitId" name="visitId" />
                <input type="hidden" value="{{$typeName}}" id="typeName" name="typeName" />
                <!--begin::Card body-->
                <div class="card-body border-top p-9">
                    <!--begin::Input group-->
                    <div class="row mb-6 text-center">
                        <!--begin::Label-->
                        <label class="col-lg-12 col-form-label fw-bold fs-6">{{ __('Sample Type') }}</label>
                        <!--end::Label-->
                    </div>
                    @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 form-control mb-2 mb-md-0" disabled />
                                    </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 form-control mb-2 mb-md-0" min="0" max="{{$singleSampleType['data']->limit}}" sampleTypeId="{{$singleSampleType['data']->id}}"  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="1000" 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="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 sampleRate" 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}}" 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 form-control mb-2 mb-md-0" min="0" max="1000" sampleTypeId="{{$singleSampleType['data']->id}}"  name="quantity[{{$key}}][]" id="quantity_{{$singleSampleType['data']->id}}" onkeyup="myFunction({{$singleSampleType['data']->id}})" />


                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    @endforeach
                    <div class="row mb-6 text-center">
                        <!--begin::Label-->
                        <label class="col-lg-12 col-form-label fw-bold fs-6">{{ __('Ancillary Charges') }}</label>
                        <!--end::Label-->
                    </div>
                    @foreach($charges as $key => $singleCharge)
                    @if($singleCharge->type == "Per Hour")
                    <div class="row mb-6">
                        <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">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" 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>
                            </div>
                        </div>
                    </div>
                    @else
                    <div class="row mb-6">
                        <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-6">
                                        <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-6">
                                        <label class="form-label">Compensation:</label>
                                        <input type="number" 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}}" max="99999" name="charges[{{$key}}][]" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    @endforeach
                    <input value="{{$key}}" id="ancillaryKey" type="hidden"/>
                    <div class="row mb-6">
                        <div class="form-group">
                            <div data-repeater-list="kt_docs_repeater_basic" id="repeater">
                                <div class="col-md-12">
                                    <label class="form-label">Comment:</label>
                                    <input type="text" class="comment" name="sampleComment" class="form-control mb-2 mb-md-0" placeholder="Max 500 characters allowed" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <script>
                        function calculateRate(rate, dataID) {
                            var hours = document.getElementById('hours_' + dataID).value;
                            var amount = hours * rate;
                            document.getElementById('ac_rate_' + dataID).value = amount;
                            document.getElementById('ac_rateHidden_' + dataID).value = amount;
                        }

                        function myFunction(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) {
                                });
                        }
                    </script>
                </div>

                <!--end::Card body-->

                <!--begin::Actions-->
                <div class="card-footer d-flex justify-content-end py-6 px-9">
                    <!-- <button type="reset" class="btn btn-white btn-active-light-primary me-2">{{ __('Discard') }}</button> -->

                    <button type="submit" class="btn btn-primary" id="sampleCollect">
                        Collect Sample
                    </button>
                </div>
                <!--end::Actions-->
                <!--end::Form-->
            </div>
            <!--end::Content-->

        </div>
    </form>
    <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://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.selectBox').select2();
        });
        $('#modalClose').click(function(){
            $('.modal').modal('hide');
            $('#sampleCharges').html("");
            $('#ancillaryCharges').html("");
        });
        $('#submit').click(function(){
            $('#submit').attr('disabled',true);
            $('#collectSample_create_form').submit();
        });
        function getSampleModal(){
            $('.modal').modal('show');
            var sampleAmount = $('.sampleRate').val();
            var sampleRate = 0;
            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(parseFloat(totalCharges).toFixed(2));
        };
        $(document).ready(function() {
            // Select2 Multiple
            $('.select2-multiple').select2({
                placeholder: "Select",
                allowClear: true
            });

        });
    </script>

@endsection