{{-- Extends layout --}}
@extends('layout.default')

{{-- Content --}}
@section('content')

<div class="card card-custom example example-compact">
    <div class="card-header">
        <h3 class="card-title">
            <?php echo $data['eventname'] ?>
        </h3>
    </div>
    <!--begin::Form-->
    <form class="form" action="{{url('scores')}}" method="POST">
        @csrf
        <input id="level" name="level" type="hidden" value="<?php echo $data['cat'] ?>"></input>
        <input id="apid" name="apid" type="hidden" value="<?php echo $data['apid'] ?>"></input>
        <input id="eventid" name="eventid" type="hidden" value="<?php echo $data['eventid'] ?>"></input>
        <input id="gender" name="gender" type="hidden" value="<?php echo $data['gender'] ?>"></input>
        <div class="card-body">
            @if ($errors->any())
            <div class="alert alert-danger">
                <strong>Error!</strong>
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif
            <div class="form-group row">
                <label class="col-lg-3 control-label">Club</label>
                <div class="col-lg-6 col-md-9 col-sm-12">
                    <select class="form-control" id="club" name="club" required>
                        <option value="" selected="">Club</option>
                        <?php
                        foreach ($clubs as $row) {
                            echo "<option value='" . $row->club . "'";
                            echo ">" . $row->club . "</option>";
                        }
                        ?>
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-lg-3 control-label">Gymnast</label>
                <div class="col-lg-6 col-md-9 col-sm-12">
                    <select class="form-control" id="reg_id" name="reg_id" required>

                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-lg-3 control-label">Start value</label>
                <div class="col-lg-6 col-md-9 col-sm-12">
                    <input class="form-control" name="dscore" id="dscore" type="text" onkeyup="checkDec(this);" maxlength="5" placeholder="D Score" value="10" required>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-lg-3 control-label">E1</label>
                <div class="col-lg-6 col-md-9 col-sm-12">
                    <input class="form-control" name="e1" id="e1" type="text" onkeyup="checkDec(this);" maxlength="4" placeholder="E1">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-lg-3 control-label">E2</label>
                <div class="col-lg-6 col-md-9 col-sm-12">
                    <input class="form-control" name="e2" id="e2" type="text" onkeyup="checkDec(this);" maxlength="4" placeholder="E2">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-lg-3 control-label">Avg</label>
                <div class="col-lg-6 col-md-9 col-sm-12">
                    <input class="form-control" name="avg" id="avg" type="text" onkeyup="checkDec(this);" onfocus="calavg()" maxlength="4">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-lg-3 control-label">Penalty</label>
                <div class="col-lg-6 col-md-9 col-sm-12">
                    <input class="form-control" name="penalty" id="penalty" type="text" onkeyup="checkDec(this);" onfocusout="caltotal()" maxlength="4" placeholder="penalty" value="">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-lg-3 control-label">Total</label>
                <div class="col-lg-6 col-md-9 col-sm-12">
                    <input type="text" class="form-control" id="total" name="total" onkeypress="return event.charCode >= 48 && event.charCode <= 57" onfocus="caltotal()" maxlength="5" required />
                </div>
            </div>
        </div>
        <div class="card-footer">
            <div class="row">
                <div class="col-lg-9 ml-lg-auto">
                    <input type="submit" class="btn btn-success mr-2" value="Submit">
                </div>
            </div>
        </div>
    </form>
    <!--end::Form-->
</div>
@endsection
@section('scripts')
<script>
    function checkDec(el) {
        var ex = /^[0-9]+\.?[0-9]*$/;
        if (ex.test(el.value) == false) {
            el.value = el.value.substring(0, el.value.length - 1);
        }
    }

    function caltotal() {
        var dscore = document.getElementById('dscore').value;
        //10 point scoring system
        var escore = 0;
        var de = (+dscore + +escore).toFixed(2);

        var avg1 = getavg();

        document.getElementById('avg').value = avg1;
        var penalty = document.getElementById('penalty').value;

        var total = de - avg1 - penalty;
        total = (total).toFixed(2);
        document.getElementById('total').value = total;
    }

    function calavg() {
        var avg1 = getavg();
        document.getElementById('avg').value = avg1;
    }

    function getavg(x) {
        var e1 = document.getElementById('e1').value;
        var e2 = document.getElementById('e2').value;
        var eall = [e1, e2];

        var cnt2 = 0;
        var subtotal = 0;
        var earray = filter_array(eall); //remove any undefined value i.e if only three judges 
        var cnt = earray.length; // recalculate array length so that judge can be 3 or 4
        var min1 = Math.min.apply(Math, earray);
        var max2 = Math.max.apply(Math, earray);

        for (var i = 0; i < cnt; i++) {
            subtotal = +subtotal + +earray[i];
        }

        if (cnt == 3) {
            subtotal = subtotal - max2;
            cnt2 = cnt - 1; //we will use it to divide 
        } else if (cnt > 3) {
            subtotal = subtotal - min1 - max2;
            cnt2 = cnt - 2;
        } else {
            cnt2 = cnt;
        }

        avgscore = (subtotal / cnt2).toFixed(2);
        return avgscore;
    }

    function filter_array(test_array) {
        var index = -1,
            arr_length = test_array ? test_array.length : 0,
            resIndex = -1,
            result = [];

        while (++index < arr_length) {
            var value = test_array[index];

            if (value) {
                result[++resIndex] = value;
            }
        }

        return result;
    }
    $(document).ready(function() {
        $('.select2').select2();

        var club = $("#club").val();

        if (club != '')
            getgymnast(club);

        $("#club").change(function() {
            var club = $(this).val();
            $("#reg_id").empty();
            getgymnast(club);
        });

        function getgymnast(club) {
            var gender = $("#gender").val();
            var eventid = $("#eventid").val();
            var apid = $("#apid").val();
            var cat = $("#level").val();
            $.ajax({
                url: '{{ url("gymnastsbyclub") }}',
                type: 'POST',
                data: {
                    _token: '<?php echo csrf_token() ?>',
                    club: club,
                    cat: cat,
                    apid: apid,
                    gender: gender,
                    eventid: eventid
                },
                dataType: 'json',
                success: function(response) {
                    var len = response.length;
                    $("#reg_id").empty();
                    for (var i = 0; i < len; i++) {
                        var id = response[i]['id'];
                        var name = response[i]['name'];

                        $("#reg_id").append("<option value='" + id + "'>" + name + "</option>");
                        // if (response[i]['name'] != 'No Gymnast')
                        //     $("#regid").val(child);
                    }

                }
            });
        }
    });
</script>

<script src="{{ asset('js/app.js') }}" type="text/javascript"></script>
@endsection