@extends('layouts.master')
@section('content')
    <div class="card">
        <div class="card-body">
            <form method="GET" action="{{ route('assign-stoppage.index') }}" class="row">

                <div class="form-group col-lg-3 col-md-4 col-sm-6">
                    @component('components.search_student', [
                        'student_name' => request()->query('student_name') ?? '',
                        'student_id_no' => request()->query('student_id_no') ?? '',
                        'required' => '',
                    ])
                    @endcomponent
                </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'), "Select 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'), "Select Group") }}
                </div>
                <div class="form-group col-lg-2 col-md-4 col-sm-6">
                    {{ generateDropdown($studentClasses, 'class="form-control student_class" id="student_class" name="student_class" ', request()->query('student_class'), "Select 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'), "Select 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 Students : {{ $students ? $students->total() : 'N/A' }})
                @endif
            </h5>

        </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>Stu. ID</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 : 'graduated_student.png';
                                        @endphp
                                        <img src="{{asset("uploads/student/$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">

                                        @if (isset($student->studentTransport) && $student->studentTransport->count()>0)
                                            <button class="btn btn-sm btn-info" data-toggle="modal" data-target="#assignModal"
                                            data-action="edit" data-student_transport_details="{{ $student->studentTransport }}"
                                            data-student_id="{{ $student->id }}">Update
                                            </button>
                                        @else
                                            <button class="btn btn-sm btn-info" data-toggle="modal" data-target="#assignModal"
                                                data-student_id="{{ $student->id }}">Assign
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
                <div class="p-4">
                    {!! $students->links('pagination::bootstrap-4') !!}
                </div>
            </div>

        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="assignModal" tabindex="-1" aria-labelledby="assignModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="assignModalLabel">Assign Hostel Room</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    {{-- @component('components.modals.transport-assign',[
                        'transport_routes' => $transport_routes,
                    ])@endcomponent --}}

                    <div class="form-group">
                        <label for="code">Routes</label>
                        {{ generateDropdown($transport_routes, 'class="form-control select2 route_id" id="route_id" name="route_id" required', '', "Select Route") }}
                    </div>
                    <div class="form-group">
                        <label for="code">Stoppage</label>
                        {{ generateDropdown([], 'class="form-control select2 stoppage_id" id="stoppage_id" name="stoppage_id" required', '', "Select Stopage") }}
                    </div>

                    <div class="modalContent">
                        <input type="hidden" name="student_id" id="student_id" class="student_id">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="saveData()">Save</button>
                </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(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>';
                        }

                    }
                    $('select.section').empty().append(option);
                });
            }
        }

        $('#assignModal').on('show.bs.modal', function(event) {
            $('#hostel-room-search').focus();
            var button = $(event.relatedTarget);
            var action = button.data('action');
            var studentId = button.data('student_id');
            $('#student_id').val(studentId);

            var modal = $(this);

            if(action=='edit'){
                var hostel_room = button.data('student_transport_details');
                let route_id = hostel_room.route_id
                let stoppage_id = hostel_room.stoppage_id

                modal.find('#route_id').val(route_id).trigger('change');
                modal.find('#stoppage_id').val(stoppage_id).trigger('change');

                $('#student_id').val(studentId);
                getStoppage(route_id, stoppage_id);
            }
        });

        $('#assignModal').on('hidden.bs.modal', function() {
            $('#route_id').val('').trigger('change');
            $('#stoppage_id').val('').trigger('change');
        });

        $('.route_id').on('change', function(){
            let route_id = $(this).val();
            let stoppage_id = '';
            getStoppage(route_id, stoppage_id);
        });

        function getStoppage(route_id, stoppage_id){

            if(route_id){
                $.get('{{ route('stoppage-list-by-route') }}', { route_id: route_id }, function(response) {
                    let stoppages = response;

                    let option = '<option value="">--Select Stopages--</option>';
                    for(let i=0;i<stoppages.length;i++){

                        if(stoppage_id==stoppages[i].id){
                            option += '<option value='+stoppages[i].id+' selected>'+stoppages[i].name+ ' -> ( Tk. '+stoppages[i].monthly_cost+')</option>';
                        }else{
                            option += '<option value='+stoppages[i].id+' >'+stoppages[i].name+ ' -> ( Tk. '+stoppages[i].monthly_cost+')</option>';
                        }

                    }
                    $('select.stoppage_id').empty().append(option);
                });
            }
        }


        function saveData() {
            var student_id = $('#student_id').val();
            var route_id = $('#route_id').val();
            var stoppage_id = $('#stoppage_id').val();
            const csrfToken = document.head.querySelector('meta[name="csrf-token"]').content;

            $.post("{{route('assign-stoppage.store')}}", {
                _token: csrfToken,
                student_id: student_id,
                route_id: route_id,
                stoppage_id: stoppage_id
            }, function(response) {
                if (response.success) {
                    toastr.success(response.message, 'Success');
                    $('#assignModal').modal('hide');
                    var button = $('button[data-student_id="' + student_id + '"]');
                    button.text('Update');

                }else{
                    toastr.error(response.message, 'Success');
                }
            });
        }

    </script>
@endsection