@extends('layouts.app')
@section('styles')
<link rel="stylesheet" href="{{ asset('css/custom-student-style.css') }}">
<style>
    tfoot{
        background-color: #36304a;
    }
    
    table.dataTable>thead>tr>th:not(.sorting_disabled){
        padding-right: 30px !important;
    }
    .toast-title{
        text-align: center;
    }
</style>
@endsection

@section('content')
<div class="container-fluid main-container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card" id="content">
                <div class="card-header flex justify-between p-3 text-2xl text-blue-700">
                    {{ __('home.students') }}
                    <a href="{{ route('student.create') }}">
                        <div class="add-student  {{ app()->getLocale() == 'ar' ? 'float-left' : 'float-right'}}">
                            <button type="button"
                                class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
                                <i class="fa fa-user-plus" aria-hidden="true"></i>
                                {{ __('student.add-new-student') }}
                            </button>
                        </div>
                    </a>
                </div>
                <div class="card-body">
                    <div class="custom-filter row">
                        <form action="{{ route('filter.students') }}" method="post" id="filterForm">
                            @csrf
                            @include('layouts.filter')

                            <div class="row flex justify-center space-x-2 mt-4">
                                <div class="col-4 flex justify-center px-1">
                                    <button type="submit" style="background-color: #36304a;" class="mr-3 px-4 py-2 rounded-2 text-white btn" id="studentFilter" name="filter">
                                        {{__('student.apply-filter') }}
                                    </button>
                                    <a href="{{ route('student.index') }}" style="background-color: #36304a;" class="bg-danger btn mr-3 px-4 py-2 rounded-2 text-white" id="studentFilter">
                                        {{__('student.reset') }}
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div id="studentsListTable" class="mt-4">
                        <table class="table" id="studentsTable" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        رقم
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('student.id') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('student.name') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('student.section') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('student.date') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('student.actions') }}
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="studentsList">
                                @if ( isset($students) )
                                                                @foreach ($students as $student)
                                <tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-700">
                                    <th scope="row" class="py-2 text-center">
                                        1                                    </th>
                                    <td class="py-2 text-center">
                                        {{ $student->student_id }}
                                    </td>
                                    <td class="py-2 text-right">
                                        {{ $student->student_name }}
                                    </td>
                                    <td class="py-2 text-center">
                                        {{ isset($student->section) ? $student->section->name : __('home.not-set') }}
                                    </td>
                                    <td class="py-2 text-center">
                                        {{ $student->created_at}}
                                    </td>

                                    <td class="py-2 text-center">
                                        <a class="px-4 py-1 text-sm text-white bg-blue-700 hover:bg-blue-800 rounded-full mx-1"
                                            href="{{ route('student.edit', $student->id) }}" style="background-color: #36304a">
                                            <i class="fa fa-eye" aria-hidden="true"></i>
                                            {{ __('student.show') }}
                                        </a>
                                        
                                        <a class="px-4 py-1 text-sm text-white bg-blue-700 hover:bg-blue-800 rounded-full mx-1"
                                            href="{{ route('student.files', $student->id) }}" style="background-color: #36304a">
                                            <i class="fa fa-file" aria-hidden="true"></i>
                                            {{ __('student.files') }}
                                        </a>

                                        {{-- @if (auth()->user()->hasRole('admin'))
                                            <a href="{{ route('student.index') }}" onclick="event.preventDefault();
                                            document.getElementById('delete-form-{{$student->id}}').submit();"
                                                class="px-4 py-1 text-sm text-white bg-red-700 hover:bg-red-800 rounded-full mx-1">
                                                <i class="fa fa-trash" aria-hidden="true"></i>
                                                {{ __('student.delete') }}
                                            </a>
                                            <form id="delete-form-{{$student->student_id}}" +
                                                action="{{route('student.destroy', $student->student_id)}}" method="post">
                                                @csrf @method('DELETE')
                                            </form>
                                        @endif --}}
                                    </td>
                                </tr>
                                @endforeach
                                @endif
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        رقم
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('student.id') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('student.name') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('student.section') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('student.date') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('student.actions') }}
                                    </th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>

                </div>
            </div>

            <div class="export-import flex justify-center m-5">
                <form action="{{ route('student.import') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group mb-4 text-center">
                        <div class="custom-file">
                            <label for="file_input" class="custom-file-label px-4 py-2 rounded">
                                {{ __('student.choose-file') }}
                            </label>
                            <input class="block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" id="file_input" type="file" name="file" required>
                        </div>
                    </div>
                    <button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
                        <i class="fa fa-upload" aria-hidden="true"></i>
                        {{ __('student.import') }}
                    </button>
                    <a class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
                        href="{{ route('student.export.view') }}">
                        <i class="fa fa-download" aria-hidden="true"></i>
                        {{ __('student.export') }}
                    </a>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
{!! Toastr::message() !!}
<script src="{{ asset('plugins/jQuery.print.min.js') }}"></script>

<script src="{{ asset('plugins/jquery-validate/js/jquery.validate.min.js') }}"></script>


<!-- datatable custimzation -->
<script>
    $("#printStudentData").click(function(){
        $('#editStudentForm').print();
    });
    
    $(document).ready(function () {
        dataTable = $("#studentsTable").DataTable({
            "responsive": false,
            "lengthChange": false,
            "autoWidth": false,
            "searching": true,
            "paging": true,
            "ordering": true,
            "info": false,
            "deferRender": true,
            // "buttons": ["copyHtml5", "csv", "excel", "pdf", "print", "colvis"],

            "oLanguage": {
                "sSearch": "بحث ",
                "sEmptyTable": "لا توجد بيانات متوفرة في الجدول",
            },
        });
        // }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
    
        $(".constraint-option").click(function() {
            dataTable.search( $(this).attr('value') ).draw();
        });

        $(".academic-class-option").click(function() {
            dataTable.search( $(this).attr('value') ).draw();
        });

        $(".academic-year").click(function() {
            dataTable.search( $(this).attr('value') ).draw();
        });

        
    }); // End of $(document).ready
</script>

<script>
    $(document).ready(function () {
        $('#college, #section, #program, #batch').each( function (){
            $(this).change(function (e) { 
                e.preventDefault();
                
                $('#studentFilter').click();
            });
        });
    });
</script>
@endsection