@extends('layouts.appv2')

@section('content')


                            {{-- table index start --}}
                            <!-- <div class="col-sm-12"> -->
                                <div class="card"  style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center mb-0">
                                            <h5>Add Grade</h5>

                                            <div class="btn-toolbar mb-2 mb-md-0">
                                                <a href="{{ route('admins.gradelist')}}" class="btn btn-sm btn-secondary mt-1 mb-1" style="width:70px; text-align: center; border-radius: 50px;">Back</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">

                                        @if ($message = Session::get('success'))
                                            <div class="alert alert-success" role="alert">
                                                {{ $message }}
                                            </div>
                                        @endif

                                        @if ($message = Session::get('error'))
                                            <div class="alert alert-danger" role="alert">
                                                {{ $message }}
                                            </div>
                                        @endif

                                        @if ($errors->any())
                                            <div class="alert alert-danger" role="alert">
                                                <ul>
                                                    @foreach ($errors->all() as $error)
                                                        <li>{{ $error }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        @endif


                                        {{-- --------------------------------------------------------------------------- --}}
                                        <form  action="{{ route('admins.gradestored') }}" method="POST">
                                        @csrf
                                            
                                            <div class="form-col">

                                            <div class="form-row">
                                                <div class="form-group col-md-6">
                                                    <label for="grade-name">Designation</label>
                                                    <input type="text" name="grade_name" class="form-control @error('grade_name') is-invalid @enderror" id="grade_name" placeholder="Enter Grade Name" value="{{ old('grade_name') }}" required>
                                                    @error('grade_name')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                               <div class="form-group col-md-6">
                                                    <label for="combined_grade">Grade Code</label>
                                                    <input type="text" name="grade_code" class="form-control @error('grade_code') is-invalid @enderror" id="grade_code" placeholder="Auto-generated" readonly value="{{ old('grade_code') }}" required>
                                                    @error('grade_code')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label for="grade-code">Grade Level</label>
                                                    <input type="number" name="grade_level" class="form-control @error('grade_level') is-invalid @enderror" id="grade_level" placeholder="Enter Grade Level" value="{{ old('grade_level') }}" required>
                                                    @error('grade_level')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror                                               
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label for="">Job Grade</label>
                                                    <select name="job_grade" class="form-control @error('job_grade') is-invalid @enderror" id="job_grade" required>
                                                        <option value="">Select Job Grade</option>
                                                        @foreach($gradecats as $gradecat)
                                                            <option value="{{ $gradecat->gradecat_code }}" data-id="{{ $gradecat->id }}" {{ old('job_grade') == $gradecat->gradecat_code ? 'selected' : '' }}>
                                                                {{ $gradecat->gradecat_code }} - {{ $gradecat->gradecat_name }}
                                                            </option> 
                                                        @endforeach
                                                    </select>
                                                    @error('job_grade')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                    <input type="hidden" name="job_grade_id" id="job_grade_id" value="">
                                                </div>
                                            
                                            </div>
                                            </div>
                                            <hr>
                                            <button type="submit" class="btn btn-primary">Add Confirm</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const job_grade = document.getElementById('job_grade'); 
    const grade_level = document.getElementById('grade_level'); 
    const combinedGrade = document.getElementById('grade_code'); 
    const job_grade_id = document.getElementById('job_grade_id'); 

    function combineInputs() {
        const value1 = job_grade.value; 
        const value2 = grade_level.value; 

        if (value1 && value2) {
            combinedGrade.value = value1 + value2;
        } else if (value1) {
            combinedGrade.value = value1;
        } else if (value2) {
            combinedGrade.value = value2;
        } else {
            combinedGrade.value = '';
        }
        
        // Get and set the grade ID
        const selectedOption = job_grade.options[job_grade.selectedIndex];
        const gradeId = selectedOption.getAttribute('data-id');
        job_grade_id.value = gradeId || '';
    }

    job_grade.addEventListener('change', combineInputs);
    grade_level.addEventListener('input', combineInputs); 
});
</script>
@endsection