@extends('Admin.Layout.Master')

@section('content-header')
@endsection

@section('content')
    <div class="custom_breadcrumb p-2 mt--2">
        <div class="row">
            <div class="col-lg-6">
                <div class="custom_breadcrumb_navigation">
                    <span class="badge bg-info text-white">Master</span>
                    /
                    <span class="badge bg-primary text-white">Result Generator</span>
                </div>
            </div>
            <div class="col-lg-6  text-center d-flex justify-content-end">
                
            </div>
        </div>
    </div>

    <div class="mt-3 pt-0 m-0">
        <form class="mt-4" id="main-form" 
            action="{{ url($url) }}" 
            method="post" 
            enctype="multipart/form-data">
            @csrf
            @if ($id)
                @method('put')
            @endif

            <div class="row m-0">
                <div class="col-md-1 text-right">
                    <label class="form-control-label"> Result Name :</label>
                </div>
                <div class="col-md-3 text-left">
                    <div class="form-group">
                        <input type="text" class="form-control form-control-sm alphaNumeric" 
                                id="result_generator_name"
                                name="result_generator_name"
                                value="{{ old('result_generator_name') ? old('result_generator_name') : ($result ? $exam->result_generator_name : '') }}"
                                required>
                        @error('result_generator_name')
                            <small class="text-danger"><b>{{ $message }}</b></small>
                        @enderror
                    </div>
                </div>
            </div>


            <table class="table table-bordered" id="examTable">
                <thead>
                    <th>Select Category</th>
                    <th>Select Exam</th>
                    <th>Exam Total Marks</th>
                    <th>
                        <button type="button" id="addRow" class="btn btn-sm btn-success">
                            <i class="fa fa-plus-circle" aria-hidden="true"></i>
                        </button>
                    </th>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            @if(count($categories))        
                                <select class="form-control form-control-sm"
                                    id="category_id_1"
                                    name="category_id[]"
                                    required
                                    onchange="get_exam_dropdown(this.value,'exam_id_1')"
                                    >
                                    <option value="">Select Category</option>
                                    @foreach($categories as $c)
                                        <option value="{{$c->value}}">{{$c->label}}</option>
                                    @endforeach
                                </select>
                            @endif
                        </td>       
                        <td>
                            <select class="form-control form-control-sm"
                                    id="exam_id_1"
                                    name="exam_id[]"
                                    required
                                    onchange="get_exam_details(this.value,'exam_total_marks_1')"
                                    >
                                    <option value="">Select Exam</option>
                            </select>
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm"
                                    id="exam_total_marks_1"
                                    name="exam_total_marks[]"
                                    required
                                    readonly>
                        </td>
                        <td>
                            <button type="button" class="btn btn-sm btn-danger" onclick="removeRow(this)">
                                <i class="fa fa-minus-circle" aria-hidden="true"></i>
                            </button>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan='2' class="text-right"><b>TOTAL MARKS<b></td>
                        <td><input type="text" class="form-control form-control-sm" id="total_marks" name="total_marks" readonly required></td>
                    </tr>
                </tfoot>
            </table> 

            <div class="row">
                <div class="col-md-7 ml-3">
                    <h4>Add Grades</h4>
                    <table class="table table-bordered table-hover" id="slabTable">
                        <thead class="">
                            <tr>
                                <th>Sr</th>
                                <th>Grade</th>
                                <th>Min Score</th>
                                <th>Max Score</th>
                                <th class="p-1 text-center">
                                    <button type="button" class="btn btn-sm btn-success" onclick="addSlabRow()">
                                        <i class="fa fa-plus-circle" aria-hidden="true"></i>
                                    </button>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(count($gradeArray))
                                @foreach($gradeArray as $e)
                                    <tr id="slab_tr_{{$loop->iteration}}">
                                        <td>{{$loop->iteration}}</td>
                                        <td><input type="text" class="form-control form-control-sm" id="grade_name_{{$loop->iteration}}" name="grade_name[]" value="{{$e->grade_name}}"></td>
                                        <td><input type="text" class="form-control form-control-sm" id="min_score_{{$loop->iteration}}" name="min_score[]" value="{{$e->min_score}}"></td>
                                        <td><input type="text" class="form-control form-control-sm" id="max_score_{{$loop->iteration}}" name="max_score[]" value="{{$e->max_score}}"></td>
                                        <td class="p-2 text-center" style="min-width:20px">
                                            <button type="button" class="btn btn-sm btn-danger" onclick="removeSlabRow(this)">
                                                <i class="fa fa-minus-circle" aria-hidden="true"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach   
                            @else
                                <tr id="slab_tr_1">
                                    <td>1</td>
                                    <td><input type="text" class="form-control form-control-sm" id="grade_name_1" name="grade_name[]"></td>
                                    <td><input type="text" class="form-control form-control-sm" id="min_score_1" name="min_score[]"></td>
                                    <td><input type="text" class="form-control form-control-sm" id="max_score_1" name="max_score[]"></td>
                                    <td class="p-2 text-center" style="min-width:20px">
                                        <button type="button" class="btn btn-sm btn-danger" onclick="removeSlabRow(this)">
                                            <i class="fa fa-minus-circle" aria-hidden="true"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="mt-2 text-center">
                @if (!$id)
                    <button type="submit" class="btn btn-primary btn-sm" name="button_type" value="SAVE">
                        <i class="fas fa-save"></i>
                        Save
                    </button>
                    <button type="submit" class="btn btn-primary btn-sm" name="button_type" value="SAVE_AND_ADD_ANOTHER">
                        <i class="far fa-save"></i>
                        Save & Add Another
                    </button>
                @endif
        
                @if ($id)
                    <button type="submit" class="btn btn-primary btn-sm" name="button_type" value="UPDATE">
                        <i class="fas fa-save"></i>
                        Update
                    </button>
                @endif
        
                <a href="{{ url($url) }}" class="btn btn-danger btn-sm">
                    <i class="fa fa-ban" aria-hidden="true"></i>
                    Cancel
                </a>
            </div>

        </form>
    </div>
@endsection

@push('scripts')
    <script>

    let slabRowCount = $('#slabTable tbody tr').length;
    function addSlabRow() {
        slabRowCount++;
        let newRow = `
            <tr id="slab_tr_${slabRowCount}">
                <td>${slabRowCount}</td>
                <td><input type="text" class="form-control form-control-sm" id="grade_name_${slabRowCount}" name="grade_name[]" value=""></td>
                <td><input type="text" class="form-control form-control-sm" id="min_score_${slabRowCount}" name="min_score[]" value=""></td>
                <td><input type="text" class="form-control form-control-sm" id="max_score_${slabRowCount}" name="max_score[]" value=""></td>
                <td class="p-2 text-center" style="min-width:20px">
                    <button type="button" class="btn btn-sm btn-danger" onclick="removeSlabRow(this)">
                        <i class="fa fa-minus-circle" aria-hidden="true"></i>
                    </button>
                </td>
            </tr>
        `;
        $('#slabTable tbody').append(newRow);
    }

    function removeSlabRow(button) {
        $(button).closest('tr').remove();
        updateRowNumbers();
    }

    function updateRowNumbers() {
        $('#slabTable tbody tr').each(function(index, tr) {
            $(tr).find('td:first').text(index + 1);
            $(tr).attr('id', `slab_tr_${index + 1}`);
            $(tr).find('input[id^="grade_"]').attr('id', `grade_${index + 1}`);
            $(tr).find('input[id^="min_score_"]').attr('id', `min_score_${index + 1}`);
            $(tr).find('input[id^="max_score_"]').attr('id', `max_score_${index + 1}`);
        });
        slabRowCount = $('#slabTable tbody tr').length;
    }

    let rowCount = 1;
    $('#addRow').on('click', function() {
        rowCount++;
        const newRow = `
            <tr>
                <td>
                    <select 
                        class="form-control form-control-sm"
                        id="category_id_${rowCount}"
                        name="category_id[]"
                        onchange="get_exam_dropdown(this.value, 'exam_id_${rowCount}')"
                    >
                        <option value="">Select Category</option>
                        @foreach($categories as $c)
                            <option value="{{$c->value}}">{{$c->label}}</option>
                        @endforeach
                    </select>
                </td>       
                <td>
                    <select 
                        class="form-control form-control-sm"
                        id="exam_id_${rowCount}"
                        name="exam_id[]"
                        onchange="get_exam_details(this.value,'exam_total_marks_${rowCount}')"
                    >
                        <option value="">Select Exam</option>
                    </select>
                </td>
                <td>
                    <input type="text" class="form-control form-control-sm"
                        id="exam_total_marks_${rowCount}"
                        name="exam_total_marks[]"
                        readonly>
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger" onclick="removeRow(this)">
                        <i class="fa fa-minus-circle" aria-hidden="true"></i>
                    </button>
                </td>
            </tr>
        `;
        $('#examTable tbody').append(newRow);
    });

    function removeRow(button) {
        $(button).closest('tr').remove();
    }

    function get_exam_dropdown(category_id,map_to){
        var json_data={
                        'category_id':category_id
                    }
        $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            'Content-Type': 'application/json',
        },
        type: "POST",
        url: "{{ url('supportive/getExams') }}",
        data: JSON.stringify(json_data),
        success: function(response) {
            $('#'+map_to).empty();
            if (response['status'] == 1) {
                $('#'+map_to).html(response['data']);                   
            }else {
                alert(response['message']);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.error('Error:', textStatus, errorThrown);
        }
        });
    }

    function get_exam_dropdown(category_id,map_to){
        var json_data={
                        'category_id':category_id
                    }
        $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            'Content-Type': 'application/json',
        },
        type: "POST",
        url: "{{ url('supportive/getExams') }}",
        data: JSON.stringify(json_data),
        success: function(response) {
            $('#'+map_to).empty();
            if (response['status'] == 1) {
                $('#'+map_to).html(response['data']);                   
            }else {
                alert(response['message']);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.error('Error:', textStatus, errorThrown);
        }
        });
    }

    function get_exam_details(exam_id,map_to){
        var json_data={
                        'exam_id':exam_id
                    }
        $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            'Content-Type': 'application/json',
        },
        type: "POST",
        url: "{{ url('supportive/getExamDetails') }}",
        data: JSON.stringify(json_data),
        success: function(response) {
            $('#'+map_to).empty();
            if (response['status'] == 1) {
                $('#'+map_to).val(response['data']['total_marks']);                   
            }else {
                alert(response['message']);
            }
            calculateTotalMarks();
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.error('Error:', textStatus, errorThrown);
        }
        });
    }

    function calculateTotalMarks(){
        let totalMarks = 0;

        const marksInputs = document.querySelectorAll('input[name="exam_total_marks[]"]');

        marksInputs.forEach(function(input) {
            let value = parseFloat(input.value) || 0; 
            totalMarks += value;
        });
        $('#total_marks').val(totalMarks);
    }
    </script>
@endpush