@extends('layouts.appv2')

@section('content')

    <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>Edit 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.gradeupdate',['grade_id' => $grade->grade_id])}}" 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" value="{{ $grade->grade_name }}" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="grade_code">Grade Code</label>
                            <input type="text" name="grade_code" class="form-control @error('grade_code') is-invalid @enderror" id="grade_code" value="{{ $grade->grade_code }}" readonly>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="grade_level">Grade Level</label>
                            <input type="number" name="grade_level" class="form-control @error('grade_level') is-invalid @enderror" id="grade_level" value="{{ $grade->grade_level }}" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="job_grade">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 }}"
                                            {{ $grade->job_grade == $gradecat->gradecat_code ? 'selected' : '' }}>
                                        {{ $gradecat->gradecat_code }} - {{ $gradecat->gradecat_name }}
                                    </option> 
                                @endforeach
                            </select>
                            <input type="hidden" name="job_grade_id" id="job_grade_id" value="{{ $grade->job_grade_id }}">
                        </div>
                    </div>
                </div>
                <hr>
                <button type="submit" class="btn btn-primary">Edit Confirm</button>
                <a href="{{ route('admins.gradelist')}}" class="btn btn-secondary">Cancel</a>
            </form>
        </div>
    </div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const job_grade = document.getElementById('job_grade'); 
    const grade_level = document.getElementById('grade_level'); 
    const grade_code = 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; 

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

    // Listen for changes
    job_grade.addEventListener('change', combineInputs);
    grade_level.addEventListener('input', combineInputs); 
});
</script>

@endsection