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

    <form id="collectSample_create_form" class="form" method="POST" action="{{ route('record_sample.update', $visit->id) }}"
        enctype="multipart/form-data" autocomplete="off">
        <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-2 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-3 mb-2">
                            <label class="fs-6 mb-2 text-muted">Collection/Visit Date <span class="text-danger">*</span> </label>
                            <input class="form-control datepicker" type="text" placeholder="mm/dd/yyyy" name="date"
                                value="{{ old('date') ?? date("m/d/Y", strtotime($visit->scheuleDate)) }}" />
                            <p class="text-danger">{{ $errors->first('date') }}</p>
                        </div>
                    </div>
                    <!--end::Details-->
                </div>
            </div>
            <!--end::Card body-->
        </div>



        @csrf
        @method('PUT')
        <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)
                <input type="hidden" value="{{$singleSampleType['data']->no_collection }}" name="noCollection">
                    @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 }}"
                                                    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="select2-multiple form-control select-costcenter" name="costCenterId[]" multiple="multiple"
                                    id="select2Multiple">
                                    @foreach ($costCenter as $center)
                                        <option value="{{ $center->name }}" data-desc="{{ fnDecryptProd($center->description) }}"
                                            {{ !is_null(old('costCenterId')) && in_array($center->name, old('costCenterId')) ? 'selected' : (is_null(old('costCenterId')) && isset($center->isSelected) == 1 ? 'selected' : '') }}>
                                            {{ $center->name }}</option>
                                    @endforeach
                                </select>
                                <p class="text-danger">{{ $errors->first('costCenterId') }}</p>
                            </div>
                            @if ($singleSampleType['data']->limit == null)
                                <div class="col-md-3">
                                    <label class="form-label">Volume/ Count </label>
                                    @if ($singleSampleType['data']->no_collection == 'Yes')
                                    <input type="number" value="{{ $singleSampleType['data']->inputValue }}"
                                        min="0" max="{{ $singleSampleType['data']->limit }}"
                                        sampleTypeId="{{ $singleSampleType['data']->id }}"
                                        class="form-control mb-2 mb-md-0 quantity" value="0" disabled
                                        id="quantity_{{ $singleSampleType['data']->id }}"
                                        onkeyup="myFunction({{ $singleSampleType['data']->id }})" />
                                    <input type="hidden" value="0"
                                        class="form-control mb-2 mb-md-0 quantity" name="quantity[{{ $key }}][]"/>
                                    @else
                                    <input type="number" value="{{ $singleSampleType['data']->inputValue }}"
                                        min="0" 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 }})" />
                                    {{-- <p class="text-danger">{{ $errors->first('quantity.0.0') }}</p> --}}
                                    @endif
                                </div>
                            @else
                                <div class="col-md-3">
                                    <label class="form-label">Volume/ Count </label>
                                    @if ($singleSampleType['data']->no_collection == 'Yes')
                                    <input type="number"
                                        min="0" max="{{ $singleSampleType['data']->requiredSample }}"
                                        sampleTypeId="{{ $singleSampleType['data']->id }}"
                                        class="form-control mb-2 mb-md-0 quantity" value="0" disabled
                                        id="quantity_{{ $singleSampleType['data']->id }}"
                                        onkeyup="myFunction({{ $singleSampleType['data']->id }})" />
                                    <input type="hidden" value="0"
                                        class="form-control mb-2 mb-md-0 quantity" name="quantity[{{ $key }}][]" />
                                    @else
                                    <input type="number" 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 }})" />
                                    @endif
                                    {{-- <p class="text-danger">{{ $errors->first('quantity.0.0') }}</p> --}}
                                </div>
                            @endif
                            <div class="col-md-3 rateDive">
                                <label class="form-label">Compensation $</label>
                                <input type="text" class="form-control mb-2 mb-md-0 rate sampleRate" disabled
                                    id="rate_{{ $singleSampleType['data']->id }}" value="{{ old('compenstn.0.0') }}" />
                                <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" 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="row mb-6 mt-10">

                    <div class="col-md-12">
                        <label class="form-label mb-2">Justification <span class="text-danger">*</span> </label>
                        <textarea maxlength="500" onkeyup="countChar(this)" name="justification" id="justification" class="border-2 comment form-control mb-2 mb-md-0 min-h-125px" placeholder="Max 500 characters allowed" >{{ old('justification') }}</textarea>
                        <span class="d-block fs-7 mb-2 mt-2 text-muted"><span id="word_count" class="text-success word-count"> {{ Str::length(old('justification')) ?? '0'  }} </span> characters reached</span>
                        <p class="text-danger">{{ $errors->first('justification') }}</p>
                    </div>

                </div>

                <div class="d-flex justify-content-end py-2">
                    <button id="submit2" class="btn btn-primary">Save
                    </button>
                </div>

            </div>
        </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">Record 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(){
        $(".loader-fade").fadeOut();
        var error_array = @json($errors->getMessages());
        if(Object.keys(error_array).length){
            Swal.fire({
                text: "Requied fields are missing",
                icon: "error",
                buttonsStyling: false,
                confirmButtonText: "Ok, got it!",
                allowOutsideClick: false,
                customClass: {
                    confirmButton: "btn btn-primary"
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    var error_field = '{{ array_key_first($errors->getMessages()) }}'
                    if(error_field != ""){
                        if(error_field == 'compensationType'){
                            error_field = 'payment';
                        }
                        $('html, body').animate({
                            scrollTop: $("#"+error_field).offset().top - 120
                        }, 1000);
                    }
                }
            });
        }
    });

$(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 countChar(text) {
            $('#word_count').html(text.value.length);
        }
        function countChar2(text) {
            $('#word_count2').html(text.value.length);
        }

        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() {
                $('#submit').prop("disabled", 'true');
                $('#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);
            };


        $('#submit2').click(function submit(e) {
            e.preventDefault();
            getSampleModal();
            // $(e).prop("disabled", 'true')
            // $('#collectSample_create_form').submit()
        });
    </script>
@endsection