<!-- resources/views/nilai/create.blade.php -->

@extends('layouts/contentNavbarLayout')

@section('title', 'Add Nilai')

@section('content')
<!-- Your existing content goes here -->
<h4 class="fw-bold py-3 mb-4">
    <span class="text-muted fw-light">Add Nilai</span>
</h4>

<form action="{{ route('nilai.insert') }}" method="POST">
    @csrf
    <div class="card">
        <div class="card-header">
            Form Input Data Nilai
        </div>
        <div class="card-body">
            <form>
                <div class="mb-3">
                    <label for="nama" class="form-label">Nama</label>
                    <select id="nama" class="select2 form-select" name="id">
                        <option value="" disabled selected>(Select)</option>
                        @foreach ($siswa as $data)
                            <option value="{{$data->user_id}}">{{$data->nama}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label for="writing" class="form-label">Writing</label>
                    <input type="number" class="form-control" id="writing" name="writing" value="0">
                </div>
                <div class="mb-3">
                    <label for="reading" class="form-label">Reading</label>
                    <input type="number" class="form-control" id="reading" name="reading" value="0">
                </div>
                <div class="mb-3">
                    <label for="listening" class="form-label">Listening</label>
                    <input type="number" class="form-control" id="listening" name="listening" value="0">
                </div>
                <div class="mb-3">
                    <label for="speaking" class="form-label">Speaking</label>
                    <input type="number" class="form-control" id="speaking" name="speaking" value="0">
                </div>
                <div class="mb-3">
                    <label for="rata_rata" class="form-label">Rata-Rata</label>
                    <input type="number" class="form-control" id="rata_rata" name="rata_rata" disabled value="0">
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>

    <script defer>
        $(document).ready(function () {
            const calculate = setInterval(function () {
                const listening = parseInt($("#listening").val());
                const reading = parseInt($("#reading").val());
                const speaking = parseInt($("#speaking").val());
                const writing = parseInt($("#writing").val());

                $("#rata_rata").val((listening + reading + speaking + writing) / 4);
            }, 1000)
        })
    </script>
    @endsection