@extends('layouts.master')
@section('page_title', 'Resource Pack')
@section('content')

<div class="card">
    <div class="card-body">
    <div class="row">

        <div class="col-md-2">
            <div class="col-md-12 form-group">
                <label for="exampleInputEmail1">Date</label> <small class="req"> *</small>
                <input type="date" name="recdate" value="{{$lessons->lesson_date ?? '' }}" class="form-control lessondate">
                <input type="hidden" name="record_id" value="{{$lessons->record_id ?? '' }}" class="form-control record_id">
            </div>
        </div>
        <div class="col-md-2">
            <div class="col-md-12 form-group">
                <label>Period:</label><small class="req"> *</small>
                <input type="text" required="true" name="lessonperiod" value="{{$lessons->period ?? '' }}" class="form-control lessonperiod" autocomplete="off">
            </div>
        </div>
        <div class="col-md-2">
            <div class="col-md-12 form-group">
                <label>Time:</label><small class="req"> *</small>
                <input type="text" required="true" name="time" value="{{$lessons->timein ?? '' }}" class="form-control lessontime">
            </div>
        </div>
        <div class="col-md-2">
            <div class="col-md-12 form-group">
                <label>Class:</label><small class="req"> *</small>
                <select name="classid" class="form-control class-id" id="class-list"> 
                    <option></option>
                    @if($class_list != null)
                        @foreach($class_list as $class)
                        @if($lessons != null)
                            <option {{ ($class->id == $lessons->class) ? 'selected' : '' }} value="{{$class->id}}">{{$class->name}}</option>
                        @endif
                        <option  value="{{$class->id}}">{{$class->name}}</option>
                        @endforeach
                    @endif
                    
            </select>
            </div>
        </div>
        <div class="col-md-2">
            <div class="col-md-12 form-group">
                <label>Class size:</label>
                <input type="number" required="true" name="classsize" value="{{$lessons->class_size ?? '' }}"  class="form-control class-size">
            </div>
        </div>
        <div class="col-md-2">
            <div class="col-md-12 form-group">
                <label>Term:</label>
                <select class="form-control termnum" name="termnum">
                @foreach($terms  as $term)
                    @if($lessons != null)
                    <option {{ ($term->id == $lessons->termnumber) ? 'selected' : '' }} value="{{$term->id}}">{{$term->name}}</option>
                    @endif
                    <option  value="{{$term->id}}">{{$term->name}}</option>
                @endforeach   
                </select>
            </div>
        </div>
        <div class="col-md-2">
            <div class="col-md-12 form-group">
                <label>Sessions:</label>
                <select class="form-control school_year">
                <option value=""></option>
                @foreach($sessions as $data)
                    @if($lessons != null)
                    <option {{ ($data->school_year == $lessons->sessionid) ? 'selected' : '' }} value="{{$data->school_year}}">{{$data->school_year}}</option>

                    @else
                    <option  value="{{$data->school_year}}">{{$data->school_year}}</option>
                    @endif
                @endforeach
                </select>
            </div>
        </div>
        <div class="col-md-3">
            <div class="col-md-12 form-group">
                <label>Subject:</label>
                <select class="form-control subject-id" name="subject" id="subject-list">
                  @if($class_subjects != null)
                    @foreach($class_subjects as $subject)
                        <option {{ ($subject->id == $lessons->subject_id) ? 'selected' : '' }} value="{{$subject->id}}">{{$subject->name}}</option>
                    @endforeach
                    @endif
                </select>
            </div>
        </div>
       
        <div class="col-md-4">
            <div class="col-md-12 form-group">
                <label>Strand:</label>
                <input class="form-control strans-id" name="strand"  value="{{$lessons->strand_id ?? '' }}" id="" />
            </div>
        </div>

        <div class="col-md-4">
            <div class="col-md-12 form-group">
                <label>Sub Strand:</label>
                <input class="form-control substrand-id" name="substrand" value="{{$lessons->sub_strand_id ?? '' }}"  />
            </div>
        </div>

        <div class="col-md-5">
            <div class="col-md-12 form-group">
            <label>Content Standard</label>
            <input class="form-control cs-id" name="contentstandard" id="content-standard" value="{{$lessons->cs_id ?? '' }}" />
            </div>
        </div>

        <div class="col-md-6">
            <div class="col-md-12 form-group">
            <label>Indicators</label>
                <input class="form-control indicator-id" name="indicator" value="{{$lessons->indicator_id ?? '' }}  " id="indicators" />            
            </div>
        </div>

        <div class="col-md-2">
            <div class="col-md-12 form-group">
                <label>Lesson Number</label>
                <input type="number" required="" class="form-control lessonnumber" value="{{$lessons->lessonnumber ?? '' }} ??  " name="lessonnumber"  autocomplete="off">
            </div>   
        </div>

        <div class="col-md-10">
            <div class="col-md-12 form-group">
                <label>Performace Indicator</label>
                <input required="" style="background: #ccc" type="text" value="{{$lessons->per_indicator ?? '' }} " class="form-control pfindicator" name="perfindicator">
            </div>   
        </div>
        <div class="col-md-6">
            <div class="col-md-12 form-group">
                <label>Core Competencies</label>
                <input type="text" required="" class="form-control corecompetence" value="{{$lessons->core_competence ?? '' }}  " name="corecompetence">
            </div>   
        </div>
        <div class="col-md-3">
            <div class="col-md-12 form-group">
            <label>Key Words</label>
            <input type="text" class="form-control keywordsid" value="{{$lessons->key_words ?? '' }} " name="keywordsid">
            </div>   
        </div>

        <div class="col-md-3">
            <div class="col-md-12 form-group">
                <label>Status</label>
                <select class="form-control status" name="status">
                @if($lessons != null)
                    <option {{ ($lessons->status == 0) ? 'selected' : '' }} value="0" >Pending</option>
                    <option {{ ($lessons->status == 1) ? 'selected' : '' }} value="1">Completed</option> 

                    @else
                    <option value="0" >Pending</option>
                    <option value="1">Completed</option> 
                    @endif             
                </select>
            </div>   
        </div>
        <input type="hidden" name="user_id" value="" class="form-control user_id" />

        <div class="col-md-12 activity-table">
            <div class="col-md-12 form-group">

                        <table class="table col-md-12">
                        <thead>
                            <tr><th>DURATION</th>
                            <th>LEARNER ACTIVITY</th>
                            <th>RESOURCE </th>
                            <th>ADD </th>
                        </tr></thead>

                        <tbody id="activities">
                        @if($lesson_activities != null)
                            @foreach($lesson_activities as $data)
                            <tr>
                            <td>
                            <input type="hidden" id="activity_id" name="activity_id[]" class="activity_id" value="{{$data->id}}">    
                            <textarea required="true" name="duration[]" class="duration">{{$data->duration}}</textarea>
                            </td>
                            <td>
                                <textarea required="true" name="learneractivity[]" class="form-control learneractivity">{{$data->activity}}</textarea>
                            <td>
                                <textarea required="true" name="resource[]" class="form-control resource">{{$data->resource}}</textarea>
                            </td><td><button type="button" class="btn btn-info add-row">+</button></td>

                            </tr>
                            @endforeach

                            @else
                            <tr>
                            <td>
                            <textarea required="true" name="duration[]" class="duration"></textarea>
                            </td>
                            <td>
                                <textarea required="true" name="learneractivity[]"  class="form-control learneractivity"></textarea>
                            <td>
                                <textarea required="true" name="resource[]"class="form-control resource"></textarea>
                            </td><td><button type="button" class="btn btn-info add-row">+</button></td>

                            </tr>
                        @endif
                        
                
                        </tbody>
                    
                        </table>
                        <input type="hidden" id="update_data" value="{{$update_data}}">    
            </div>

            <div class="col-md-6">
                <button type="submit" class="btn btn-dark" id="submit-lessoninfo">Save</button>
            </div>
            
        </div>

</div>
    </div>
</div>


@endsection
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {

        $("#submit-lessoninfo").on('click', function(e){
            e.preventDefault(); // Prevent default action

            let durations = [];
            let learnerActivities = [];
            let resources = [];
            let activity_ids = [];

            let recordId = $(".record_id").val();
            let classId =$(".class-id").find("option:selected").val();
            let classSize = $(".class-size").val();
            let subjectId = $(".subject-id");
            let subject = subjectId.find("option:selected").val();
            let strandId = $(".strans-id");
            let strandName = strandId.val();
            let substrandId = $('.substrand-id').val();
            let substrandName = substrandId;
            let csId = $('.cs-id').val();
            let contentStandard = csId;
            let indicatorId = $('.indicator-id');
            let indicatorName = indicatorId.val();
            let lessonNumber = $(".lessonnumber").val();
            let pfIndicator = $(".pfindicator").val();
            let coreCompetence = $(".corecompetence").val();
            let status = $(".status").val();
            let lessonperiod = $(".lessonperiod").val();
            let lessontime = $(".lessontime").val();
            let user_id =  $(".user_id").val();
            let keywordsid = $(".keywordsid").val();
            let lessondate = $(".lessondate").val();
            let school_year = $(".school_year").val();
            let termnum = $(".termnum").val();
            let update_record = $("#update_data").val();

            $("#activities  tr").each(function(){
            let duration = $(this).find('.duration').val();
            let learnerActivity = $(this).find('.learneractivity').val();
            let resource = $(this).find('.resource').val();
            let activity_id = $(this).find('.activity_id').val();

            // Push the values to their respective arrays
            durations.push(duration);
            learnerActivities.push(learnerActivity);
            resources.push(resource);
            activity_ids.push(activity_id);
        });

            let data = {
                recordId:recordId,
                classid: classId,
                classsize: classSize,
                csubject: subject,
                strand: strandName,
                substrand: substrandName,
                cs: contentStandard,
                indicator: indicatorName,
                lesson: lessonNumber,
                perfindicator: pfIndicator,
                competence: coreCompetence,
                lstatus: status,
                duration: durations,
                learneractivity:learnerActivities,
                activity_id:activity_ids,
                resource: resources,
                lessonperiod:lessonperiod,
                lessontime:lessontime,
                user_id:user_id,
                keywordsid:keywordsid,
                lessondate:lessondate,
                school_year:school_year,
                term:termnum,
                update_record:update_record
            };

            
            if(recordId != ''){
                //Update
                updateRecord(data);
               
            }else{
                //Create
                addRecord(data);
            }

        });//
       
        async function addRecord(data)
        {
            if (validateLessonData()) {
                  await fetch('/api/lesson-plan/create-resource', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data) // Convert data to JSON format
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    // Handle successful response here
                    console.log("Lesson data submitted:", data.message);
                    if(data.message == '201'){
                        toastr.success("Lesson data submitted successfully!");
                        
                        resetLessonForm()
                        window.location.reload();
                    }
                })
                .catch(error => {
                    // Handle error here
                    console.error("There was a problem with the fetch operation:", error);
                });
            }
        }

        async function updateRecord(data)
        {
          
                await fetch('/api/lesson-plan/update-resource', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data) // Convert data to JSON format
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    // Handle successful response here
                    console.log("Lesson data submitted:", data.message);
                    if(data.message == '200'){
                        toastr.success("Lesson data submitted successfully!");
                       
                    }
                })
                .catch(error => {
                    // Handle error here
                    console.error("There was a problem with the fetch operation:", error);
                });
            
        }

        $('#class-list').on('change',async function(){

        const selectedValue = $(event.target).val();

        try {
                let response = await fetch(`/api/lesson-plan/get-subject-list?class_id=${selectedValue}`);
                let data = await response.json();
                
                let subjectSelect = $('#subject-list');
                
                subjectSelect.empty();

                subjectSelect.append(`<option value="">Select an option</option>`);
                data.forEach(subject => {
                    subjectSelect.append(`<option value="${subject.id}">${subject.name}</option>`);
                });

            } catch (error) {
                console.error('Error fetching data:', error);
            }
       });



       $('#subject-list').on('change',async function(){
        const selectedValue = $(event.target).val();
        try {
                key_type = 'strand'
                let response = await fetch(`/api/lesson-plan/get-strand-by-category?parent_id=${selectedValue}&key_type=${key_type}`);
                let data = await response.json();
                
                let strandList = $('#sub-stran-list');
                
                strandList.empty();

                strandList.append(`<option value="">Select an option</option>`);
                data.forEach(strand => {
                    strandList.append(`<option value="${strand.catid}">${strand.category}</option>`);
                });

            } catch (error) {
                console.error('Error fetching data:', error);
            }
            
       });

       $('#sub-stran-list').on('change',async function(){
        const selectedValue = $(event.target).val();
        
        try {
                key_type = 'content_standard'
                let response = await fetch(`/api/lesson-plan/get-strand-by-category?parent_id=${selectedValue}&key_type=${key_type}`);
                let data = await response.json();

            } catch (error) {
                console.error('Error fetching data:', error);
            }
       });

       $('body').on('click','.add-row',function(){
       
       $('#activities').append(`<tr>
                        <td>
                        <textarea required="true" name="duration[]" class="duration"></textarea>
                        </td>
                        <td>
                            <textarea required="true" name="learneractivity[]" class="form-control learneractivity"></textarea>
                        <td>
                            <textarea required="true" name="resource[]" class="form-control resource"></textarea>
                        </td><td><button type="button" class="btn btn-info add-row">+</button></td>

                        </tr>`);

     });

     function validateLessonData() {
            let classId = $(".class-id").find("option:selected").text();
            let classSize = $(".class-size").val();
            let subjectId = $(".subject-id");
            let subject = subjectId.find("option:selected").text();
            let strandId = $(".strans-id"); 
            let strandName = strandId.val();
            let substrandId = $('.substrand-id');
            let substrandName = substrandId.val();
            let csId = $('.cs-id');
            let contentStandard = csId.val();
            let indicatorId = $('.indicator-id');
            let indicatorName = indicatorId.val();
            let lessonNumber = $(".lessonnumber").val();
            let pfIndicator = $(".pfindicator").val();
            let coreCompetence = $(".corecompetence").val();
            let status = $(".status").val();

            // Initialize an empty array to hold error messages
            let errors = [];

            // Validate classId
            if (!classId || classId.trim() === '') {
                errors.push("Class ID is required.");
            }

            // Validate classSize
            if (!classSize || isNaN(classSize) || classSize <= 0) {
                errors.push("Class size must be a valid number and greater than zero.");
            }

            // Validate subject
            if (!subject || subject.trim() === '') {
                errors.push("Subject is required.");
            }

            // Validate strandName
            if (!strandName || strandName.trim() === '') {
                errors.push("Strand is required.");
            }

            // Validate substrandName
            if (!substrandName || substrandName.trim() === '') {
                errors.push("Sub-strand is required.");
            }

            // Validate contentStandard
            if (!contentStandard || contentStandard.trim() === '') {
                errors.push("Content Standard is required.");
            }

            // Validate indicatorName
            if (!indicatorName || indicatorName.trim() === '') {
                errors.push("Indicator is required.");
            }

            // Validate lessonNumber
            if (!lessonNumber || isNaN(lessonNumber) || lessonNumber <= 0) {
                errors.push("Lesson Number must be a valid number and greater than zero.");
            }

            // Validate pfIndicator
            if (!pfIndicator || pfIndicator.trim() === '') {
                errors.push("Performance Indicator is required.");
            }

            // Validate coreCompetence
            if (!coreCompetence || coreCompetence.trim() === '') {
                errors.push("Core Competence is required.");
            }

            // Validate status (optional, but ensure it's a valid boolean)
            if (status !== '0' && status !== '1') {
                errors.push("Status must be either 0 (incomplete) or 1 (complete).");
            }

            // If errors exist, display them and return false
            if (errors.length > 0) {
                //alert("Please fix the following errors:\n" + errors.join("\n"));
                toastr.error("Please fix the following errors:\n" + errors.join("\n"));
                return false;
            }

            // If no errors, return true
            return true;
        }

        function resetLessonForm() {
            $(".class-id").val('');        // Reset select input
            $(".class-size").val('');      // Reset text input
            $(".subject-id").val('');      // Reset select input
            $(".strans-id").val('');       // Reset select input
            $('.substrand-id').val('');    // Reset select input
            $('.cs-id').val('');           // Reset select input
            $('.indicator-id').val('');    // Reset select input
            $(".lessonnumber").val('');    // Reset text input
            $(".pfindicator").val('');     // Reset text input
            $(".corecompetence").val('');  // Reset text input
            $(".status").val('');          // Reset select input or checkbox
            $(".lessonperiod").val('');    // Reset text input
            $(".lessontime").val('');      // Reset text input
            $(".user_id").val('');         // Reset hidden or text input
            $(".keywordsid").val('');      // Reset text input
            $(".lessondate").val('');      // Reset date input
            $(".school_year").val('');     // Reset text input
            $(".termnum").val('');         // Reset select input or text input
}

    });
</script>