@extends('Admin.Layout.Master')

@section('css')
    <style type="text/css">
    </style>
@endsection

@section('content-header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Result Generator</h1>
                </div>
                <div class="col-sm-6">
                </div>
            </div>
        </div>
    </section>
@endsection

@section('content')
    <div class="card">
        <div class="card-body">
            <form class="" 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>
    </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