@extends('backend.student.layouts.right_side_bar')
@section('studentBody')

    <div class="content p-0">

        @if(session('success'))
                <div class="col-sm-12">
                    <div role="alert" style="background-color:#d4edda; color:#155724; border-radius: 5px;" class="alert  alert-dismissible show">
                        <span class="btn btn-success btn-xs">Success</span> {{session('success')}}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
                <div style="clear: both;"></div>
            @endif
            @if(session('error'))
                <div class="col-sm-12">
                    <div role="alert" style="background-color:#d4edda; color:#155724; border-radius: 5px;" class="alert  alert-dismissible show">
                        <span class="btn btn-danger btn-xs">Error</span> {{session('error')}}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
                <div style="clear: both;"></div>
            @endif
            @if($errors->any())
                <div class="col-sm-12">
                    <div role="alert" style="background-color:#d4edda; color:#155724; border-radius: 5px;" class="alert  alert-dismissible show">
                        @foreach($errors->all() as $error)
                            <span class="btn btn-danger btn-xs">Error</span> {{$error}}<br>
                        @endforeach
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
                <div style="clear: both;"></div>
        @endif
            <!-- Overview -->
            <div class="block block-rounded block-bordered">
                <div class="block-header block-header-default">
                    <div>
                        <a class="font-w600" href="javascript:void(0)">{{$headingName}}</a>
                    </div>
                </div>

                <div class="block-content">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="table-responsive">
                                <button class="btn btn-primary btn-sm mb-1" style="float: right;" data-toggle="modal" data-target="#modal-block-popin"><i class="fa fa-plus-circle"></i> Add New</button>
                                <table class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>SN</th>
                                        <th>Degree</th>
                                        <th>Institutions</th>
                                        <th>Year</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($student->degrees as $key=>$degree)
                                        <tr>
                                            <td>{{++$key}}</td>
                                            <td>{{$degree->course->name}}</td>
                                            <td>{{$degree->client->company_name}}</td>
                                            <td>{{$degree->pass_year}}</td>
                                            <td>
                                                <form action="{{url('student/profile').'/degree'.'/'.$degree->id.'/remove'}}" method="post">
                                                    {{csrf_field()}}
                                                    <button class="btn btn-danger btn-sm"><i class="fa fa-times-circle"></i></button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END Overview -->
        </div>
        <!-- END Page Content -->
    <!-- Pop In Block Modal -->
    <div class="modal fade" id="modal-block-popin" tabindex="-1" role="dialog" aria-labelledby="modal-block-popin" aria-hidden="true">
        <div class="modal-dialog modal-dialog-popin modal-lg" role="document">
            <div class="modal-content">
                <form action="{{url('student/profile').'/addDegree'}}" method="post">
                    {{csrf_field()}}
                    <div class="block block-themed block-transparent mb-0">
                        <div class="block-header bg-primary-dark">
                            <h3 class="block-title">Add New</h3>
                            <div class="block-options">
                                <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                                    <i class="fa fa-fw fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <div class="block-content">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>Choose Course<span class="text-danger">*</span></strong>
                                                                </span>
                                            </div>
                                            <select name="course_id" class="form-control select2" id="course_id" required>
                                                <option value="">--Choose--</option>
                                                @foreach($courses as $course)
                                                    <option value="{{$course->id}}" @if(old('course_id')==$course->id) selected @endif>{{$course->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <strong>College/School <span class="text-danger">*</span></strong>
                                                </span>
                                            </div>
                                            <input type="text" class="form-control client_name" value="{{null}}" name="client_name" required>
                                        </div>
                                        <div class="p-1 border client_list"></div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <strong>Grade/Percentage</strong>
                                                </span>
                                            </div>
                                            <input type="text" class="form-control" name="grade" value="{{old('grade')}}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <strong>Pass Year</strong>
                                                </span>
                                            </div>
                                            <input type="text" class="form-control" name="pass_year" value="{{old('pass_year')}}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="block-content block-content-full text-right bg-light mb-3">
                            <button type="button" class="btn btn-sm btn-light" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-sm btn-primary">Add</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- END Pop In Block Modal -->

@endsection
@section('script')
    <script type="text/javascript">
        // jQuery wait till the page is fullt loaded
        $(document).ready(function () {
            // keyup function looks at the keys typed on the search box
            $('.client_name').on('keyup',function() {
                // the text typed in the input field is assigned to a variable
                var query = $(this).val();
                // call to an ajax function
                if ( ! this.value == '')
                {
                    $(".client_list").show();

                    $.ajax({
                        // assign a controller function to perform search action - route name is search
                        url:"{{ url('student/profile').'/getCollege' }}",
                        // since we are getting data methos is assigned as GET
                        type:"GET",
                        // data are sent the server
                        data:{'keyword':query},
                        // if search is succcessfully done, this callback function is called
                        success:function (data) {
                            // print the search results in the div called country_list(id)
                            $('.client_list').html(data);
                        }
                    })
                }else{
                    $(".client_list").hide();
                }

                // end of ajax call
            });

            // initiate a click function on each search result
            $(document).on('click', 'li', function(){
                // declare the value in the input field to a variable
                var value = $(this).text();
                // assign the value to the search box
                $('.client_name').val(value);
                // after click is done, search results segment is made empty
                $('.client_list').html("");
            });
        });
    </script>


    {{--<!-- Page JS Plugins -->--}}
    {{--<script src="{{asset('public/theme')}}/assets/js/plugins/jquery-bootstrap-wizard/bs4/jquery.bootstrap.wizard.min.js"></script>--}}

    <!-- Page JS Code -->
    <script src="{{asset('public/theme')}}/assets/js/pages/be_forms_wizard.min.js"></script>


@endsection