@extends('layouts.master')

@section('content')
    <div class="card">
        <div class="card-body">
            <form action="{{ route('collect_fee.due-list') }}" method="GET">

                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group mb-2">
                                    @component('components.search_student', [
                                        'student_name' => $student_name ?? '',
                                        'student_id_no' => request()->student_id_no ?? '',
                                        'required' => '',
                                    ])
                                    @endcomponent
                                </div>
                            </div>

                            <div class="col-lg-2">
                                <div class="form-group mb-2">
                                    {{ generateDropdown($classes, 'class="form-control student_class select2" id="student_class" name="student_class"', request()->query('student_class'), "Select Class") }}
                                </div>
                            </div>

                            <div class="col-lg-2">
                                <div class="form-group mb-2">
                                    {{ generateDropdown([], 'class="form-control section" id="section" name="section"', request()->query('section'), "Select Section") }}
                                </div>
                            </div>

                            {{-- <div class="col-lg-2">
                                <div class="form-group mb-2">
                                    <input type="date" name="from_date" value="{{old('from_date', request()->from_date)}}" class="form-control">
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="form-group mb-2">
                                    <input type="date" name="to_date" value="{{old('to_date', request()->to_date)}}" class="form-control">
                                </div>
                            </div> --}}
                            <div class="col-lg-2">
                                <button class="btn btn-info">Search</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="card mt-2">
        <div class="card-header card-custom-bg d-flex flex-row align-items-center justify-content-between">
            <h5>Fee Invoices</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table" id="dataTable">
                    <thead class="thead-light">
                        <tr>
                            <th>Student ID</th>
                            <th>Name</th>
                            <th>Class</th>
                            <th>Fees</th>
                            <th>Due Amount</th>
                        </tr>
                    </thead>

                    <tbody>

                        @foreach ($dueFees as $fee)
                            @if ($fee->paid_fee<=0)
                                <tr>
                                    <td>{{$fee->student_id_no}}</td>
                                    <td>{{$fee->first_name.' '.$fee->last_name}}</td>
                                    <td>{{$fee->class_name}}</td>
                                    <td>{{$fee->title}}</td>
                                    @if ($fee->code == 'HOSTEL')
                                        <td>{{$fee->cost}}</td>
                                    @elseif ($fee->code == 'TRANSPORT')
                                        <td>{{$fee->monthly_cost}}</td>
                                    @else
                                        <td>{{$fee->due_fee}}</td>
                                    @endif
                                </tr>
                            @endif

                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $('.student_class').on('change', function(){
            let student_class_id = $('.student_class').val();
            getSection(student_class_id);
        });

        let student_class_id = "{{ request()->query('student_class') ?? '' }}";

        if(student_class_id!=''){
            getSection(student_class_id);
        }

        function getSection(student_class_id){

            let section_id = "{{ request()->query('section') ?? '' }}";
            if(student_class_id){
                $.get('{{ route('sections.list_by_class') }}', { student_class_id: student_class_id }, function(response) {
                    let sections = response;
                    console.log(sections);
                    let option = '<option value="">Select Section</option>';
                    for(let i=0;i<sections.length;i++){
                        // if(sections[i].student_class_id == student_class_id){
                            if(section_id==sections[i].id){
                                option += '<option value='+sections[i].id+' selected>'+sections[i].section_name+'</option>';
                            }else{
                                option += '<option value='+sections[i].id+' >'+sections[i].section_name+'</option>';
                            }

                        // }
                    }
                    console.log(option);
                    $('select.section').empty().append(option);
                });
            }
        }
    </script>
@endpush