@extends('layout.layout')
@section('title')
Compensation
@endsection
@section('backurl')
/compensation
@endsection
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <div class="card-body py-15 px-20 d-flex">
        <div class="col">
            <h5 class="fw-bold text-gray-600">ERX ID</h5>
            <h5>{{ $participant->erxId }}</h5>
        </div>
        <div class="col">
            <h5 class="fw-bold text-gray-600">SUBJECT ID</h5>
            <h5>{{ $participant->subjectId }}</h5>
        </div>
        <div class="col">
            <h5 class="fw-bold text-gray-600">{{ $payment[0]->type=="AncillaryCharges"?"ANCILLARY TYPE":"SAMPLE TYPE"}}</h5>
            <h5 class="sample_name">{{ $payment[0]->name }}</h5>
        </div>
        <div class="col">
            <h5 class="fw-bold text-gray-600">Collection/Visit Date</h5>
            <h5>{{ isset($payment[0]->scheuleDate)?convert_mm_dd_yyyy($payment[0]->scheuleDate):"N/A" }}</h5>
        </div>
    </div>
</div>
<!--end::Card-->

<form class="card card-custom mt-10 py-10 px-10" action="{{ route('compensation.store') }}" id="compensation_form" method="post">
    @csrf
    <input type="hidden" name="paymentId" value="{{ $payment[0]->id }}">
    <input type="hidden" name="paymentUUID" value="{{ $payment[0]->token }}">
    <input type="hidden" name="typeId" value="{{ $payment[0]->typeId }}">
    <input type="hidden" name="type" value="{{ $payment[0]->type }}">
    <input type="hidden" name="paymentStatus" value="{{ $payment[0]->status }}">

    @if($payment[0]->type=="SampleCharges")
    <input type="hidden" name="sample_collection_uuid" value="{{ $payment[0]->sampleUuid }}">
    @endif

    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <label>Cost Center <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')) && in_array($center->name,explode(",",$payment[0]->costCenterId))?'selected':'') ? 'selected': '') }}> {{ $center->name}}</option>
    @endforeach
</select>
<p class="text-danger">{{ $errors->first('costCenterId') }}</p>

</div>


@if($payment[0]->type=="AncillaryCharges")
            <div class="col-md-3">
                <label for="">Ancillary Name</label>
                <input type="text" value="{{ $payment[0]->name }}" readonly class="form-control bg-gray-300">
                <p class="text-danger">{{ $errors->first('anclry') }}</p>
            </div>

            <div class="col-md-3">
                <label for="">Compensation $</label>
                <input type="number" value="{{ !is_null(old('compensation')) ? old('compensation') : $payment[0]->amount }}" name="compensation" class="form-control">
                <p class="text-danger">{{ $errors->first('compensation') }}</p>
            </div>
            @else
            <div class="col-md-3">
                <label for="">Volume</label>
                <input type="number" value="{{ !is_null(old('quantity')) ? old('quantity') : $payment[0]->quantity }}" name="quantity"  class="form-control volume">
                <p class="text-danger">{{ $errors->first('quantity') }}</p>
            </div>

            <div class="col-md-3">
                <label for="">Compensation $</label>
                <input type="text" value="{{ !is_null(old('compensation')) ? old('compensation') : $payment[0]->amount }}" name="compensation" readonly class="form-control compensation bg-gray-300">
            </div>

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

        <div class="row mt-7">
            <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>
        <button onclick="submit_form(this)" class="btn btn-primary float-end mt-7">Save</button>
    </div>
</form>



@endsection
@section('script')
<script>

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

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

            $('.volume').keyup(function(){
                let myData=$(this).val();
                axios.get('{!! route('getTrails.all') !!}')
                                .then(function(response) {
                                    var price = response.data.filter(data => data.name == $('.sample_name').text().trim());
                                    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;
                                            }
                                        }
                                    }
                                    $('.compensation').val(totalPrice);
                                })
                                .catch(function(error) {
                });
            });
    });

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

    function submit_form(e){
        $(e).attr('disabled', true);
        $('#compensation_form').submit();
    }

</script>
@endsection