<?php
    $tests = config('constants.tests');
    $packages = array_filter(
        $tests,
        function ($value){
            return(strpos($value,'Test Panel') !== false);
        }
    );
    $individualTests = array_diff($tests, $packages);
?>
<div moe normal>
    <a start show href="#">+ Create Order</a>
    <form url="{{ route('admin.create-order') }}" style="min-width: 450px;" right>
        @csrf
        <div class="p-3">
            <h5 class="fw-bold mb-4">Create Order</h5>
            <div id="createOrder" v-cloak>
                <input type="hidden" name="total" v-model="form.total" />
                <input type="hidden" name="userUid" value="{{$user->uid}}" />
                <div class="form-group mb-3">
                    <label class="me-3"><input type="radio" name="testType" value="11PanelTest" v-model="form.testType" required /> Comprehensive 11-Panel Test</label>
                    <label><input type="radio" name="testType" value="individualTests" v-model="form.testType" required /> Individual Tests</label>
                </div>
                <div v-if="form.testType === '11PanelTest'" class="px-3">
                    <div class="d-flex flex-column">
                        @foreach($packages as $key=>$title)
                            <label><input type="radio" name="tests[]" value="{{ $key }}" data-amount="{{ config('app.'.$key) }}" required /> {{ $title }} - {{ displayAmount('$', config('app.'.$key)) }}</label>
                        @endforeach
                    </div>
                </div>
                <div v-if="form.testType === 'individualTests'" class="px-3">
                    <div class="d-flex flex-column">
                        @foreach($individualTests as $k=>$t)
                            <label><input type="checkbox" name="tests[]" value="{{ $k }}" data-amount="{{  config('app.'.$k) }}" /> {{ $t }} - {{ displayAmount('$', config('app.'.$k)) }}</label>
                        @endforeach
                    </div>
                </div>
                <div v-if="form.total" class="mt-3">
                    Total: <b>$@{{ form.total }}</b>
                </div>

                <div class="mb-2">
                    <label class="mb-1">Lab</label>
                    <select name="tests_lab_id" auto-suggest-record data-url="/search-lab" data-valueprop="id"  class="form-control">
                        <option value=""></option>
                    </select>
                </div>

            </div>
            <div class="mt-4">
                <button submit class="btn btn-sm btn-primary me-2">Create Order</button>
                <button cancel class="btn btn-sm btn-default border">Cancel</button>
            </div>
        </div>
    </form>
</div>

<script>
    var createOrderComponent = new Vue({
        el: '#createOrder',
        data:{
            form: {
              total: 0  
            },
            
        },
        delimiters: ['@{{', '}}'],
        methods:{
            initCalculateTotal: function(){
                var self = this;
                $('[name=testType]').change(function(evt){
                    self.form.total = 0;
                });
                $('[data-amount]').change(function(evt){
                    var total = 0;
                    var fields = $('[data-amount]');
                    $.each(fields, function(index, field){
                        var checked = field.checked ? true:false;
                        var amount = $(field).data('amount');
                        if(checked){
                            total = total + amount;
                        }
                    });
                    self.form.total = total;
                });
            },
            init: function(){
                
            }
        },
        mounted: function(){
            this.init();
        },
        updated: function(){
            var self = this;
            self.$nextTick(function(){
                self.initCalculateTotal();
                mainApp.initAutoSuggestRecord();
            });
        }
    });
</script>