@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 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">{{ $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">{{ $type }}</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($date) }}</p>
                        </div>


                    </div>
                    <!--end::Details-->
                </div>
            </div>
            <!--end::Card body-->
        </div>


        @csrf
        @method('POST')

        <div class="card mb-5">
            <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">
                @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 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="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' : ($costCenter == $center->name ? '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 <span class="text-danger">*</span></label>
                                    @if($singleSampleType['data']->no_collection == 'Yes')
                                    <input type="number" min="0" max="{{ $singleSampleType['data']->limit }}"
                                        sampleTypeId="{{ $singleSampleType['data']->id }}"
                                        class="form-control mb-2 mb-md-0 quantity"
                                        id="quantity_{{ $singleSampleType['data']->id }}"
                                        onkeyup="myFunction({{ $singleSampleType['data']->id }})" value="0" disabled/>
                                    <input type="hidden"
                                        sampleTypeId="{{ $singleSampleType['data']->id }}"
                                        class="form-control mb-2 mb-md-0 quantity" name="quantity[{{ $key }}][]" value="0" />
                                    @else
                                    <input type="number" 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 }})" />
                                    @endif
                                    @if ($singleSampleType['data']->isQll == 1)
                                        <p>Current QLL:
                                            @if ($singleSampleType['data']->qll > $singleSampleType['data']->limit)
                                                <span class="text-danger">{{ $singleSampleType['data']->qll }}</span>
                                            @else
                                                <span class="text-warning">{{ $singleSampleType['data']->qll }}</span>
                                            @endif
                                        </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" value="0" disabled
                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');"
                                        class="quantity form-control mb-2 mb-md-0" min="0" max="1000"
                                        sampleTypeId="{{ $singleSampleType['data']->id }}"

                                        id="quantity_{{ $singleSampleType['data']->id }}"
                                        onkeyup="myFunction({{ $singleSampleType['data']->id }})" />
                                    <input type="hidden"
                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');"
                                        class="quantity form-control mb-2 mb-md-0" min="0" max="1000"
                                        sampleTypeId="{{ $singleSampleType['data']->id }}"
                                        name="quantity[{{ $key }}][]"/>
                                        @else
                                    <input type="number"
                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');"
                                        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 }})" />
                                        @endif
                                    @if ($singleSampleType['data']->isQll == 1)
                                        <p>Current QLL:
                                            @if ($singleSampleType['data']->qll > $singleSampleType['data']->limit)
                                                <span class="text-danger">{{ $singleSampleType['data']->qll }}</span>
                                            @else
                                                <span class="text-warning">{{ $singleSampleType['data']->qll }}</span>
                                            @endif
                                        </p>
                                    @endif
                                </div>
                            @endif

                            <div class="col-md-3 rateDive">
                                <label class="form-label">Compensation $</label>
                                @if($singleSampleType['data']->no_collection == 'Yes')
                                <input type="text" class="rate sampleRate form-control mb-2 mb-md-0 readonly-field"
                                    id="rate_{{ $singleSampleType['data']->id }}"
                                    name="compenstn[{{ $key }}][]" value="0" disabled/>
                                <input type="hidden" class="rate sampleRate form-control mb-2 mb-md-0 readonly-field"
                                    name="compenstn[{{ $key }}][]" value="0" />
                                @else
                                <input type="text" class="rate sampleRate form-control mb-2 mb-md-0 readonly-field"
                                id="rate_{{ $singleSampleType['data']->id }}"
                                name="compenstn[{{ $key }}][]" value="{{ old('compenstn.0.0') }}" />
                                @endif


                                <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="{{ isset($singleCharge->inputValue)?$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 }}" 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">
                    <button id="submit2" class="btn btn-primary">Record Sample
                    </button>
                </div>

            </div>


        </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://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>

// 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));

});
       });

       function countChar(text) {
            $('#word_count').html(text.value.length);
        }

        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) {});
        }

        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() {
            $('#modalClose').click(function() {
                $('.modal').modal('hide');
                $('#sampleCharges').html("");
                $('#ancillaryCharges').html("");
            });
            $('#submit').click(function() {
                $('#submit').attr('disabled', true);
                $('#collectSample_create_form').submit();
            });

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



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

@endsection