@extends('layouts.master')
@section('content')
    <div class="card">
        <div class="card-body">
            <form method="GET" action="{{ route('student_info.index') }}" class="row">
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="form-group mb-0">
                        @component('components.search_student', [
                            'student_name' => $student_name ?? '',
                            'student_id_no' => request()->student_id_no ?? '',
                            'required' => '',
                        ])
                        @endcomponent
                    </div>
                </div>
                <div class="form-group col-lg-2 col-md-4 col-sm-6">
                    {{ generateDropdown($shifts, 'class="form-control shift" id="shift" name="shift"', request()->query('shift'), "Shift") }}
                </div>
                <div class="form-group col-lg-2 col-md-4 col-sm-6">
                    {{ generateDropdown($groups, 'class="form-control group" id="group" name="group"', request()->query('group'), "Group") }}
                </div>
                <div class="form-group col-lg-2 col-md-4 col-sm-6">
                    {{ generateDropdown($studentClasses, 'class="form-control student_class select2" id="student_class" name="student_class"', request()->query('student_class'), "Class") }}
                </div>

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

                <div class="form-group col-lg-1 col-md-4 col-sm-6">
                    <button type="submit" class="btn btn-info">Search</button>
                </div>

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


    <div class="card mt-3">
        <div class="card-header card-custom-bg d-flex flex-row align-items-center justify-content-between">
            <h5>Student List
                @if ($students)
                    (Total Student : {{ $students ? $students->total() : 'N/A' }})
                @endif
            </h5>
            <div>
                <a href="{{ route('student_info.create') }}" class="btn btn-sm btn-primary">Add New</a>
                <button type="button" id="export-button" class="btn btn-sm btn-info">Export to Excel</button>
            </div>
        </div>
        <div class="card-body">

            <div class="row ">
                <div class="table-responsive">
                    <table class="table align-items-center table-flush">
                        <thead class="thead-light">
                            <tr>
                                <th>ID No</th>
                                <th>Image</th>
                                <th>Name</th>
                                <th>Class</th>
                                <th>Roll</th>
                                <th>Section</th>
                                <th>Shift</th>
                                <th>Branch</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if ($students)
                                @php
                                    // $sn = paginationStartNumber($students);
                                @endphp
                                @foreach ($students as $student)
                                    <tr>
                                        <td><a href="{{route('student_info.edit', $student->id)}}" target="_blank">{{ $student->student_id_no }}</a></td>
                                        <td>
                                            @php
                                                $student_image = $student->profile_image ? $student->profile_image : 'uploads/student/graduated_student.png';
                                            @endphp
                                            <img src="{{asset($student_image)}}" class="rounded-circle border p-1" alt="" height="40px" width="40px">
                                        </td>
                                        <td>{{ $student->first_name." ".$student->last_name }}</td>
                                        <td>{{ $student->studentClass?->class_name ?? "" }}</td>
                                        <td>{{ $student->class_roll ?? "" }}</td>
                                        <td>{{ $student->section?->section_name ?? "" }}</td>
                                        <td>{{ $student->shift?->shift_name ?? "" }}</td>
                                        <td>{{ $student->branch?->branch_name ?? "" }}</td>
                                        <td class="d-flex justify-content-between">
                                            <a class="btn btn-sm btn-info" href="{{route('student_info.show',['student_id'=>$student->id])}}" target="_blank">View</a>
                                            <a class="btn btn-sm btn-info mx-1" href="{{route('student_info.edit',['student_info'=>$student->id])}}" target="_blank">Edit</a>
                                            <a class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this')" href="{{route('student_info.destroy',['student_id'=>$student->id])}}">Delete</a>
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                    <div class="p-4">
                        {!! $students->links('pagination::bootstrap-4') !!}
                    </div>
                </div>

            </div>

        </div>
    </div>

@endsection
@section('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);
                });
            }
        }

        $('#export-button').click(function(e) {
            e.preventDefault();
            let url = "{{ route('export_student.download') }}";
            let data = $('form').serialize();

            $.ajax({
                url: url,
                type: 'GET',
                data: data,
                xhrFields: {
                    responseType: 'blob'
                },
                success: function(response) {
                    let blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
                    let link = document.createElement('a');
                    link.href = window.URL.createObjectURL(blob);
                    link.download = 'students.xlsx';
                    link.click();
                },
                error: function(response) {
                    console.log('Export failed', response);
                }
            });
        });

    </script>
@endsection