@extends('layouts.admin')

@section('styles')
    <!-- Datatables css -->
    <link href="{{ asset('assets/vendor/datatables.net-bs5/css/dataTables.bootstrap5.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/vendor/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css') }}" rel="stylesheet"
        type="text/css" />
    <link href="{{ asset('assets/vendor/datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css') }}" rel="stylesheet"
        type="text/css" />
    <link href="{{ asset('assets/vendor/datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css') }}" rel="stylesheet"
        type="text/css" />
    <link href="{{ asset('assets/vendor/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css') }}" rel="stylesheet"
        type="text/css" />
    <link href="{{ asset('assets/vendor/datatables.net-select-bs5/css/select.bootstrap5.min.css') }}" rel="stylesheet"
        type="text/css" />
@endsection

@section('content')

<div class="container-fluid">
    @include('elements.admin-breadcrumb')

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-10">
                        </div>
                        <div class="col-2 text-end">
                            <a class="btn btn-primary" href="{{ route('admin.instructor.create') }}"><i class="fa fa-plus"></i> {{ __('Add New') }}</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success" role="alert"> 
                            {{ session('success') }}
                        </div>
                    @endif
                    @if(session('error'))
                        <div class="alert alert-danger" role="alert"> 
                            {{ session('error') }}
                        </div>
                    @endif
                    <form class="mb-15" id="kt_instructor_delete" action="{{ route('admin.instructor.delete') }}" method="POST">
                        @csrf
                        @method('post')

                        <table id="instructor_datatable" class="table table-striped w-100 nowrap">
                            <thead>
                                <tr>
                                    <td></td>
                                    <td>
                                        <input type="text" data-col-index="7" placeholder="Full Name" class="form-control form-control-sm datatable-input">
                                    </td>
                                    <td>
                                        <input type="text" data-col-index="6" placeholder="Email" class="form-control form-control-sm datatable-input">
                                    </td>
                                    <td>
                                        <input type="text" data-col-index="8" placeholder="Mobile Number" class="form-control form-control-sm datatable-input">
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-primary" id="kt_search"><i class="fa fa-search"></i> Search </button>
                                        <button type="button" class="btn btn-dark" id="kt_reset"><i class="fa fa-close"></i> Reset</button>
                                        <button class="btn btn-danger" id="kt_delete" style="display: none" type="submit" name="submit" value="delete">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                
                                <tr>
                                    <th>
                                        <input class="form-check-input" type="checkbox" name="checkAll" id="checkAll">
                                    </th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Mobile Number</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                    
                            </tbody>
                        </table>
                    </form>
                </div> <!-- end card body-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div> <!-- end row-->
</div>


@endsection

@section('scripts')
    <!-- Datatables js -->
    <script src="{{ asset('assets/vendor/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/datatables.net-bs5/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js') }}"></script>
    
    <script src="{{ asset('assets/vendor/datatables.net-fixedcolumns-bs5/js/fixedColumns.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js') }}"></script>
    
    <script src="{{ asset('assets/vendor/datatables.net-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/datatables.net-buttons/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/datatables.net-buttons/js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/datatables.net-buttons/js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/datatables.net-keytable/js/dataTables.keyTable.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/datatables.net-select/js/dataTables.select.min.js') }}"></script>

    <!-- Instructor JS -->
    <script src="{{ asset('assets/js/custom/instructor.js') }}"></script>
@endsection