@extends('layouts.app')

@section('content')
<style>
    .pagination{
        flex-wrap: wrap;
            row-gap: 10px;
    }
    .table-bordered td a{
        width: 100% !important;
    }
</style>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">{{ __('Dashboard') }}</div>

                    <div class="card-body">
                        @if (session('status'))
                            <div class="alert alert-success" role="alert">
                                {{ session('status') }}
                            </div>
                        @endif
                    </div>

                    <div class="container">
                        <div class="row justify-content-end">
                            <div class="col-md-12">
                                <h2>Student Table</h2>
                            </div>
                            <div class="col-md-6 justify-content-end">
                                <li  class="d-flex">
                                    <form action="{{route('home')}}" class="col-md-12">
                                        <div class="form-group d-flex">
                                        <input type="search" name="search" id="search" class="form-control me-2 pb-0 pt-0" placeholder="search" value="{{isset($request->search) && $request->search != "" ? $request->search : "" }}">
                                        <button  type="submit" class="btn  btn-outline-secondary"><i class="fa fa-search text-secondary"></i></button>
                                        </div>
                                    </form>
                                </li>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <table class="table table-bordered table-striped table-md table-sm">
                                    @if (count($data) > 0)
                                        <thead>
                                            <tr>
                                                <th>Sr.No</th>
                                                <th class="text-dark">@sortablelink('name')</th>
                                                <th>Mobile No</th>
                                                <th class="text-dark">@sortablelink('marks')</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php  $j=$data->firstItem(); @endphp
                                            @foreach ($data as $student)

                                                <tr>
                                                    <td>{{ $j }}</td>
                                                    <td>{{ ucfirst($student['name']) }}</td>
                                                    <td>{{ $student['mobile_no'] }}</td>
                                                    <td><a href="#" class="btn btn-outline-primary bg-primary text-white w-50 stud_mark" data-toggle="modal"
                                                            student-id="{{ $student['id'] }}" data-target="#largeModal">
                                                            {{ $student['marks'] }}</a></td>
                                                </tr>
                                                @php $j++; @endphp
                                            @endforeach
                                        @else
                                            <div class="border-top">
                                                <h4 align="center" style="padding : 20px;">Not Found Any Record
                                                </h4>
                                            </div>
                                    @endif
                                    </tbody>
                                </table>
                                {!! $data->appends(\Request::except('page'))->render() !!}
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div id="largeModal" class="modal" role="dialog">
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        $(document).ready(function() {
            $('.stud_mark').on('click',function(){
                var stu_id = $(this).attr('student-id');
                $.ajax({
                    url  : 'modal',
                    type : "get",
                    data: {stu_id : stu_id},
                    success: function(response) {
                        $('#largeModal').html(response);
                        $("#largeModal").modal("show");
                    }
                });
            });
            $(".cancel").click(function(){
                $("#largeModal").modal().hide();
            });
        });
    </script>
@endsection