@extends('admin.layout.master')
@section('title', 'Dashboard')
@section('content')
<style>
.form-group {
    margin-bottom: 1.75rem;
}

table {
    border-collapse: collapse;
    /* This ensures adjacent cells share borders */
    border: 2px solid #000;
    /* Border for the entire table */
}

/* Apply border to table cells */
td,
th {
    border: 1px solid #000;
    /* Border for table cells */
    padding: 8px;
    /* Optional: Add padding to cells for better readability */
}
.greytextbox {
    background-color: #f0f0f0; /* or any other shade of grey you prefer */
    border: 1px solid #ccc; /* Optional: add border for better visual separation */
}
</style>
<div class="d-flex flex-column flex-column-fluid">
    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
        <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                <h3 class="card-title align-items-start flex-column">
                    <a href="{{route('event-list-score')}}" style="height:40px !important;" class="btn btn-primary">BACK</a><span
                        class="card-label fw-bold fs-3">  :
                        </span>
                </h3>
            </div>
        </div>
    </div>
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card mb-5 mb-xl-8" style="padding:0 !important">
            <!-- <div class="card-body pt-0" style="padding:0 !important;"> -->

                <!--begin::Form-->
                <form class="form" action="{{url('admin/scoresavevault')}}" method="POST">
                    @csrf
                    {{-- <input id="level" name="level" type="hidden" value=""></input> --}}
                    <input id="apid" name="apid" type="hidden" value=""></input>
                    {{-- <input id="division" name="division" type="hidden" value=""></input> --}}
                    <input id="eventid" name="eventid" type="hidden" value=""></input>
                    <input id="gender" name="gender" type="hidden" value=""></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">
                            <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>
                                                                    </select>
                            </div>
                            <div class="col-lg-6 col-md-9 col-sm-12">
                                <select class="form-control" id="reg_id" name="gymnast_id" required>
                                    <option value="" selected="">Gymnast</option>
                                </select>
                            </div>
                        </div>
                        <div class="container">
                            <div class="row" style="padding:bottom:2px;">
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="vault1"><strong>Vault 1</strong></label>
                                        <input class="form-control" name="dscore" id="dscore" type="text" maxlength="5"
                                            placeholder="D1" value="10" required>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                                <input class="form-control" name="e1" id="e1" type="text"
                                                    onkeyup="checkDec(this);" onfocus="calavg();" onfocusout="calavg()"
                                                    maxlength="5" placeholder="E1" required>
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                                <input class="form-control" name="e2" id="e2" type="text"
                                                    onkeyup="checkDec(this);" onfocus="calavg();" onfocusout="calavg()"
                                                    maxlength="5" placeholder="E2">
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                                <input class="form-control" name="e3" id="e3" type="text"
                                                    onkeyup="checkDec(this);" onfocus="calavg();" onfocusout="calavg()"
                                                    maxlength="5" placeholder="E3">
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                                <input class="form-control" name="e4" id="e4" type="text"
                                                    onkeyup="checkDec(this);" onfocus="calavg();" onfocusout="calavg()"
                                                    maxlength="5" placeholder="E4">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-lg-6 col-md-6 col-sm-6">
                                                <input class="form-control" name="avg" id="avg" type="hidden" value="">
                                                <input class="form-control greytextbox" name="escore" id="escore" type="text"
                                                    onkeyup="checkDec(this);" onfocus="calavg();" onfocusout="calavg()"
                                                    maxlength="5" placeholder="EScore" required>
                                            </div>
                                            <div class="col-lg-6 col-md-6 col-sm-6">
                                                <input class="form-control greytextbox" name="penalty" id="penalty" type="text"
                                                    onkeyup="checkDec(this);" onfocusout="caltotal()" maxlength="5"
                                                    placeholder="Penalty" value="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-lg-6 col-md-6 col-sm-6">
                                                <input type="text" class="form-control greytextbox" id="total" name="total"
                                                    onfocus="caltotal()" onkeyup="checkDec(this);"
                                                    onkeypress="return event.charCode >= 48 && event.charCode <= 57"
                                                    onfocus="caltotal()" maxlength="5" required placeholder="Total">
                                            </div>
                                            <div class="col-lg-6 col-md-6 col-sm-6">

                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="vault2"><strong>Vault 2</strong></label>
                                        <input class="form-control" name="dscore2" id="dscore2" type="text"
                                            maxlength="5" placeholder="D2" value="10" required>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                                <input class="form-control" name="e12" id="e12" type="text"
                                                    onkeyup="checkDec(this);" onfocus="calavg2();"
                                                    onfocusout="calavg2()" maxlength="5" placeholder="E1">
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                                <input class="form-control" name="e22" id="e22" type="text"
                                                    onkeyup="checkDec(this);" onfocus="calavg2();"
                                                    onfocusout="calavg2()" maxlength="5" placeholder="E2">
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                                <input class="form-control" name="e32" id="e32" type="text"
                                                    onkeyup="checkDec(this);" onfocus="calavg2();"
                                                    onfocusout="calavg2()" maxlength="5" placeholder="E3">
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                                <input class="form-control" name="e42" id="e42" type="text"
                                                    onkeyup="checkDec(this);" onfocus="calavg2();" onfocusout="calavg2()"
                                                    maxlength="5" placeholder="E4">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-lg-6 col-md-6 col-sm-6">
                                                <input class="form-control" name="avg2" id="avg2" type="hidden"
                                                    value="">
                                                <input class="form-control greytextbox" name="escore2" id="escore2" type="text"
                                                    onkeyup="checkDec(this);" onfocus="calavg2();"
                                                    onfocusout="calavg2()" maxlength="5" placeholder="EScore" required>
                                            </div>
                                            <div class="col-lg-6 col-md-6 col-sm-6">
                                                <input class="form-control greytextbox" name="penalty2" id="penalty2" type="text"
                                                    onkeyup="checkDec(this);" onfocusout="caltotal2()" maxlength="5"
                                                    placeholder="Penalty" value="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">

                                            <div class="col-lg-6 col-md-6 col-sm-6">
                                                <input type="text" class="form-control greytextbox" id="total2" name="total2"
                                                    onfocus="caltotal2()" onkeyup="caltotal2()"
                                                    onkeypress="return event.charCode >= 48 && event.charCode <= 57"
                                                    maxlength="5" required placeholder="Total">
                                            </div>
                                            <div class="col-lg-6 col-md-6 col-sm-6">
                                                <div style="border-style: dashed; border-color: var(--kt-success) !important; display: none;"
                                                    class="alert alert-dismissible bg-light-success d-flex flex-column flex-sm-row w-100 p-2">
                                                    <i class="bi bi-info-circle text-success me-4 mb-5 mb-sm-0"
                                                        style="font-size: 10px;"><span class="path1"></span><span
                                                            class="path2"></span><span class="path3"></span></i>
                                                    <!--end::Icon-->
                                                    <div class="d-flex flex-column pe-0 pe-sm-10">
                                                        <span>
                                                            Click on Calculate button before submit
                                                        </span>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group" style="margin-bottom:0px !important">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-sm-6">
                                        Vault Score: <span id="vtotal"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer" style="padding-top:0">
                        {{-- <div class="form-group">
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6">
                                    <input type="submit" class="btn btn-primary mr-2" value="Submit">
                                </div>
                            </div>
                        </div> --}}
                        <div class="row">
                            <div class="col-lg-3 ml-lg-auto">
                                <input type="button" class="btn btn-danger mr-2" value="Calculate Vault Score" onclick="gettotal()">
                            </div>
                            <div class="col-lg-6 ml-lg-auto">
                                <input type="submit" id="submitButton" class="btn btn-primary mr-2" value="Submit" disabled>
                            </div>
                        </div>
                    </div>
                </form>
                <!--end::Form-->
        </div>
    </div>
</div>
@endsection
@push('js')
<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;
    var avg = getavg();
    var escore = roundNumber(avg, 7);

    document.getElementById('escore').value = escore;
    
    var penalty = document.getElementById('penalty').value;
    //while calculating total dont truncate avg, use as it is
    var total = dscore - penalty - escore ;
    
    // Truncate the total to 3 decimal places without rounding    
    total=truncate(total,3);
    document.getElementById('total').value = total;
    document.getElementById('submitButton').disabled = true;
}

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

function getavg(x) {

    // var e1 = parseInt((document.getElementById('e1').value)*1000);
    // var e2 = parseInt((document.getElementById('e2').value)*1000);
    // var e3 = parseInt((document.getElementById('e3').value)*1000);
    // var e4 = parseInt((document.getElementById('e4').value)*1000);
    // var eall = [e1, e2, e3, e4];

    var e1 = document.getElementById('e1').value;
    var e2 = document.getElementById('e2').value;
    var e3 = document.getElementById('e3').value;
    var e4 = document.getElementById('e4').value;
    var eall = [e1, e2, e3, e4];
    var cnt2 = 0;
    var subtotal = 0;
    var earray = [];
    var ejudge = filter_array(eall); //remove any undefined value i.e if only three judges 
    var cnt = ejudge.length; // recalculate array length so that judge can be 3 or 4
    for (var i = 0; i < cnt; i++) {
        earray[i]=parseInt(parseFloat(ejudge[i])*1000);
    }
    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) { // if 3 judges

        cnt2 = 3; //avg of 3 e judge score 
    } else if (cnt > 3) {
        subtotal = subtotal - min1 - max2;
        cnt2 = cnt - 2;
    } else {
        cnt2 = cnt;
    }
    // If all values are undefined then cnt2 is zero so to avoid zero division error
    if (cnt2 == 0) 
    {
        avgscore = subtotal;
    }
    else
    {
        avgscore = subtotal / cnt2;
    }
    avgscore=avgscore/1000;
    return avgscore;
}

function caltotal2() {

    var dscore = document.getElementById('dscore2').value;
    var avg2 = getavg2();
    var escore = roundNumber(avg2, 7);

    document.getElementById('escore2').value = escore;
    var penalty = document.getElementById('penalty2').value;

    var total = dscore - penalty - escore ;
    total = truncate(total, 3);

    document.getElementById('total2').value = total;
    // Get the span element by its ID
    var spanElement = document.getElementById("vtotal");
    var total1 = document.getElementById('total').value;

    // Set the value you want to display
    var valueToDisplay = (+total1 + +total) / 2; // You can replace this with the desired value
    valueToDisplay=truncate(valueToDisplay,3);
    // Update the innerHTML of the span element
    spanElement.innerHTML = valueToDisplay;
    document.getElementById('submitButton').disabled = true;
}

function calavg2() {
    
    var avg1 = getavg2();
    var escore = roundNumber(avg1, 7);
    document.getElementById('avg2').value = escore;
    document.getElementById('escore2').value = escore;
}

function getavg2(x) {
    // var e1 = parseInt((document.getElementById('e12').value)*1000);
    // var e2 = parseInt((document.getElementById('e22').value)*1000);
    // var e3 = parseInt((document.getElementById('e32').value)*1000);
    // var e4 = parseInt((document.getElementById('e42').value)*1000);
    var e1 = document.getElementById('e12').value;
    var e2 = document.getElementById('e22').value;
    var e3 = document.getElementById('e32').value;
    var e4 = document.getElementById('e42').value;
    var eall = [e1, e2, e3, e4];

    var cnt2 = 0;
    var subtotal = 0;
    var earray = [];
    var ejudge = filter_array(eall); //remove any undefined value i.e if only three judges 
    var cnt = ejudge.length; // recalculate array length so that judge can be 3 or 4
    for (var i = 0; i < cnt; i++) {
        earray[i]=parseInt(parseFloat(ejudge[i])*1000);
    }
    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) { //in case of 3 judges
        cnt2 = 3; //we will use it to divide 
    } else if (cnt > 3) {
        subtotal = subtotal - min1 - max2;
        cnt2 = cnt - 2;
    } else {
        cnt2 = cnt;
    }
    // If all values are undefined then cnt2 is zero so to avoid zero division error
    if (cnt2 == 0) 
    {
        avgscore = subtotal;
    }
    else
    {
        avgscore = subtotal / cnt2;
    }

    avgscore=avgscore/1000;
    return avgscore;
}

function gettotal() {
    caltotal();
    caltotal2();
document.getElementById('submitButton').disabled = false;
}

function truncate(num, places) {
    return Math.trunc(num * Math.pow(10, places)) / Math.pow(10, places);
}

function roundNumber(num, dec) {
  return Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
}

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];
 
   // Exclude NaN, null, and undefined values
   if (value !== null && value !== undefined && !Number.isNaN(value)&& 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();
        $.ajax({
            url: '{{ url("admin/getgymnastsbyclub") }}',
            type: 'POST',
            data: {
                _token: '