@extends('admin::layouts.plane')

@section('content')
<div class="container">
    <form id="filterForm">
      
        <div class="form-row justify-content-end">
            <div class="form-group col-md-2">
                {!! Form::select('filterSession', $sessions, $current_session, ['class' => 'form-control', 'id' => 'filterSession','placeholder'=>'Session']) !!}
            </div>
            <div class="form-group col-md-2">
                {!! Form::select('filter_board', $boards, '', ['class' => 'form-control', 'id' => 'filterBoard','placeholder'=>'Board']) !!}
            </div>
            <div class="form-group col-md-2">
                {!! Form::select('filter_class', $classes, '', ['class' => 'form-control required', 'id' => 'filterClass','placeholder'=>'Class']) !!}
            </div>
            <div class="form-group col-md-2">
                {!! Form::select('filter_result_type', $examTypes, '', ['class' => 'form-control', 'id' => 'filterResultType','placeholder'=>'Result Type']) !!}
            </div>
            <div class="form-group col-md-2">
                {!! Form::select('filter_subject', [], '', ['class' => 'form-control', 'id' => 'filterSubject','placeholder'=>'Subject']) !!}
            </div>
            

            <div class="form-group col-md-2 text-center">
                <label>&nbsp;</label>
                <button  class="btn btn-primary" id="applyFilters" type="button">Apply Filters</button>
            </div>
        </div>
    </form>
</div>
    <div class="container mb-3">
        <div class="row">
            <div class="col-md-9">
                
            </div>
            <div class="col-md-3">
                <button class="btn btn-success" id="addSubjectBtn" type="button">Add Subject</button>
                <button class="btn btn-info" id="addSubtitleBtn" type="button">Add Subtitle</button>
            </div>
        </div>
    </div>

    <div  id="datatable-container" class="container">
    </div>
    
<div id="edit-form"> </div>

<!-- Add Subject Modal -->
<div class="modal fade" id="addSubjectModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Subject</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="addSubjectForm">
                    <div class="form-group">
                        <label for="subject_class_from">Class From:</label>
                        {!! Form::select('class_from', $classes, '', ['class' => 'form-control', 'id' => 'subject_class_from', 'required' => true,'placeholder'=>'Select Class From']) !!}
                    </div>
                    <div class="form-group">
                        <label for="subject_class_to">Class To:</label>
                        {!! Form::select('class_to', $classes, '', ['class' => 'form-control', 'id' => 'subject_class_to', 'required' => true,'placeholder'=>'Select Class To']) !!}
                    </div>
                    <div class="form-group">
                        <label for="subject_name">Subject Name:</label>
                        <input type="text" class="form-control" id="subject_name" name="subject" required>
                    </div>
                    <div class="form-group">
                        <label for="subject_board">Board:</label>
                        {!! Form::select('board', $boards, 'CBSE', ['class' => 'form-control', 'id' => 'subject_board', 'required' => true,'placeholder'=>'Select Board']) !!}
                    </div>
                    <div class="form-group">
                        <label for="subject_result_type">Result Type:</label>
                        {!! Form::select('result_type', $examTypes, '', ['class' => 'form-control', 'id' => 'subject_result_type', 'required' => true,'placeholder'=>'Select Result Type']) !!}
                    </div>
                    <div class="form-group">
                        <label for="subject_position">Position:</label>
                        <input type="number" class="form-control" id="subject_position" name="position" disabled>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveSubjectBtn">Save Subject</button>
            </div>
        </div>
    </div>
</div>

<!-- Add Subtitle Modal -->
<div class="modal fade" id="addSubtitleModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Subtitle</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Step 1: Fetch Subject Details -->
                <div id="subtitleStep1">
                    <h6>Step 1: Select Subject Details</h6>
                    <form id="fetchSubjectForm">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="subtitle_class_from">Class From:</label>
                                    {!! Form::select('class_from', $classes, '', ['class' => 'form-control', 'id' => 'subtitle_class_from', 'required' => true,'placeholder'=>'Select Class From']) !!}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="subtitle_class_to">Class To:</label>
                                    {!! Form::select('class_to', $classes, '', ['class' => 'form-control', 'id' => 'subtitle_class_to', 'required' => true,'placeholder'=>'Select Class To']) !!}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="subtitle_board">Board:</label>
                                    {!! Form::select('board', $boards, '', ['class' => 'form-control', 'id' => 'subtitle_board', 'required' => true,'placeholder'=>'Select Board']) !!}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="subtitle_result_type">Result Type:</label>
                                    {!! Form::select('result_type', $examTypes, '', ['class' => 'form-control', 'id' => 'subtitle_result_type', 'required' => true,'placeholder'=>'Select Result Type']) !!}
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-primary" id="fetchSubjectsBtn">Fetch Subjects</button>
                    </form>
                </div>

                <!-- Step 2: Add Subtitle Details -->
                <div id="subtitleStep2" style="display: none;">
                    <h6>Step 2: Add Subtitle Details</h6>
                    <form id="addSubtitleForm">
                        <div class="form-group">
                            <label for="subtitle_subject_id">Subject:</label>
                            <select class="form-control" id="subtitle_subject_id" name="subject_id" required disabled>
                                <option value="">Select Subject</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="subtitle_name">Sub Title:</label>
                            <input type="text" class="form-control" id="subtitle_name" name="sub_title" required placeholder="Enter Sub Title">
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="subtitle_max_marks">Max Marks:</label>
                                    <input type="number" class="form-control" id="subtitle_max_marks" name="max_marks" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="subtitle_total_re_cal_marks">Total Re-cal Marks:</label>
                                    <input type="number" class="form-control" id="subtitle_total_re_cal_marks" name="total_re_cal_marks" value="0">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="subtitle_cal_percentage_on">Cal Percentage On:</label>
                                    <input type="number" class="form-control" id="subtitle_cal_percentage_on" name="cal_percentage_on" value="0">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="subtitle_session">Session:</label>
                                    {!! Form::select('session', $sessions, $current_session, ['class' => 'form-control', 'id' => 'subtitle_session', 'required' => true]) !!}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="subtitle_table_field_name">Table Field Name:</label>
                                    <input type="text" class="form-control" id="subtitle_table_field_name" name="table_field_name" readonly>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="subtitle_position">Position:</label>
                                    <input type="number" class="form-control" id="subtitle_position" name="position" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="subtitle_excel_col_no">Excel Column Number:</label>
                            <input type="number" class="form-control" id="subtitle_excel_col_no" name="excel_col_no" readonly>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveSubtitleBtn" style="display: none;">Save Subtitle</button>
            </div>
        </div>
    </div>
</div>
<script>
var baseUrl ="{{ url('config') }}"; 
  $(document).ready(function() {
    
    $('#applyFilters').on('click', function() {
        var requiredFields = $('#filterForm .required');
        //form validation -- start
        var isFormValid = true;
        requiredFields.each(function() {
            if ($(this).val() === '') {
                alert($(this).attr('name') + ' is required.'); 
                isFormValid = false;
                return false; 
            }
        });
        if(!isFormValid){
            return;
        }
        var formData = $('#filterForm').serialize();
        $.ajax({
            url: "{{ route('subject-subtitle-post') }}",
            method: 'POST',
            data: formData,
            dataType: 'json', 
            success: function(response) {
                $('#datatable-container').html(response.html);
                
            },
            error: function(xhr) {
                alert('Error');
            }
        });
    });
  });

  $(document).on('change','#filterClass, #filterResultType, #filterBoard',
        function () {
            var classId = $('#filterClass').val();
            var examType = $('#filterResultType').val();
            var board = $('#filterBoard').val();
            if(!classId || !examType) {
              $('#filterSubject').prop('disabled', true);
              return;}
            $.ajax({
                url: `${baseUrl}/get-subjects-option/?class=${classId}&exam-type=${examType}&board=${board}`, 
                method: 'GET',
                success: function (response) {
                  // console.log(response);
                    var subjectSelect = $('#filterSubject');
                    subjectSelect.html(response.options);
                    subjectSelect.prop('disabled', false);
                },
                error: function () {
                    
                }
            });
        });

    // Add Subject Modal functionality
    $('#addSubjectBtn').on('click', function() {
        $('#addSubjectModal').modal('show');
    });

    // Calculate position for subject when fields change
    $('#subject_class_from, #subject_class_to, #subject_board, #subject_result_type').on('change', function() {
        var classFrom = $('#subject_class_from').val();
        var classTo = $('#subject_class_to').val();
        var board = $('#subject_board').val();
        var resultType = $('#subject_result_type').val();
        
        if (classFrom && classTo && board && resultType) {
            $.ajax({
                url: `${baseUrl}/get-next-position`,
                method: 'POST',
                data: {
                    class_from: classFrom,
                    class_to: classTo,
                    board: board,
                    result_type: resultType,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    $('#subject_position').val(response.next_position);
                }
            });
        }
    });

    // Save Subject
    $('#saveSubjectBtn').on('click', function() {
        var formData = $('#addSubjectForm').serialize();
        $.ajax({
            url: `${baseUrl}/save-subject`,
            method: 'POST',
            data: formData + '&_token={{ csrf_token() }}',
            success: function(response) {
                alert('Subject saved successfully');
                $('#addSubjectModal').modal('hide');
                $('#addSubjectForm')[0].reset();
            },
            error: function() {
                alert('Error saving subject');
            }
        });
    });

    // Add Subtitle Modal functionality
    $('#addSubtitleBtn').on('click', function() {
        $('#addSubtitleModal').modal('show');
        $('#subtitleStep1').show();
        $('#subtitleStep2').hide();
        $('#saveSubtitleBtn').hide();
    });

    // Fetch subjects for subtitle
    $('#fetchSubjectsBtn').on('click', function() {
        var classFrom = $('#subtitle_class_from').val();
        var classTo = $('#subtitle_class_to').val();
        var board = $('#subtitle_board').val();
        var resultType = $('#subtitle_result_type').val();
        
        if (!classFrom || !classTo || !board || !resultType) {
            alert('Please fill all fields');
            return;
        }
        
        $.ajax({
            url: `${baseUrl}/get-subjects-for-subtitle`,
            method: 'POST',
            data: {
                class_from: classFrom,
                class_to: classTo,
                board: board,
                result_type: resultType,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                var subjectSelect = $('#subtitle_subject_id');
                subjectSelect.html('<option value="">Select Subject</option>');
                $.each(response.subjects, function(id, name) {
                    subjectSelect.append(`<option value="${id}">${name}</option>`);
                });
                subjectSelect.prop('disabled', false);
                $('#subtitleStep1').hide();
                $('#subtitleStep2').show();
                $('#saveSubtitleBtn').show();
            },
            error: function() {
                alert('Error fetching subjects');
            }
        });
    });

    // Calculate subtitle fields when subject is selected
    $('#subtitle_subject_id').on('change', function() {
        var subjectId = $(this).val();
        var session = $('#subtitle_session').val();
        
        if (subjectId && session) {
            $.ajax({
                url: `${baseUrl}/get-subtitle-fields`,
                method: 'POST',
                data: {
                    subject_id: subjectId,
                    session: session,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if(response.table_field_name){
                        $('#subtitle_table_field_name').val(response.table_field_name);
                    }else{
                        $('#subtitle_table_field_name').attr('readonly',false);
                        $('#subtitle_table_field_name').val('');
                    }
                    if(response.next_position){
                        $('#subtitle_position').val(response.next_position);
                    }else{
                        $('#subtitle_position').attr('readonly',false);
                        $('#subtitle_position').val('');
                    }
                    if(response.next_excel_col){
                        $('#subtitle_excel_col_no').val(response.next_excel_col);
                    }else{
                        $('#subtitle_excel_col_no').attr('readonly',false);
                        $('#subtitle_excel_col_no').val('');
                    }
                }
            });
        }
    });

    // Save Subtitle
    $('#saveSubtitleBtn').on('click', function() {
        var formData = $('#addSubtitleForm').serialize();
        $.ajax({
            url: `${baseUrl}/save-subtitle`,
            method: 'POST',
            data: formData + '&_token={{ csrf_token() }}',
            success: function(response) {
                alert('Subtitle saved successfully');
                $('#addSubtitleModal').modal('hide');
                $('#addSubtitleForm')[0].reset();
                $('#subtitleStep1').show();
                $('#subtitleStep2').hide();
                $('#saveSubtitleBtn').hide();
            },
            error: function() {
                alert('Error saving subtitle');
            }
        });
    });
  </script>
@endsection