@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" wire:navigate href="{{ route('admin.course-category.create') }}"><i class="fa fa-plus"></i> {{ __('Add New') }}</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        @session('success')
                            <div class="alert alert-success" role="alert"> 
                                {{ $value }}
                            </div>
                        @endsession
                        @session('error')
                            <div class="alert alert-danger" role="alert"> 
                                {{ $value }}
                            </div>
                        @endsession
                        <form class="mb-15" id="kt_admin_course_category_delete" action="{{ route('admin.course-category.delete') }}" method="POST">
                            @csrf
                            @method('post')

                            <table id="course_category_datatable" class="table table-striped w-100 nowrap">
                                <thead>
                                    <tr>
                                        <td></td>
                                        <td>
                                            <input type="text" data-col-index="1" placeholder="Name" class="form-control form-control-sm datatable-input">
                                        </td>
                                        <td>
                                            <input type="text" data-col-index="2" placeholder="Description" class="form-control form-control-sm datatable-input">
                                        </td>
                                        <td>
                                            <select data-col-index="3" class="form-select form-control-sm datatable-input">
                                                <option value="">- Select -</option>
                                                <option value="1">Active</option>
                                                <option value="0">In-active</option>
                                            </select>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-primary" id="kt_search"><i class="fa fa-search"></i> </button>
                                            <button type="button" class="btn btn-dark" id="kt_reset"><i class="fa fa-close"></i></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>Description</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>

    <!-- Datatable Demo Aapp js -->
    <!-- <script src="{{ asset('assets/js/pages/datatable.init.js') }}"></script> -->
    <script src="{{ asset('assets/js/custom/course-category.js') }}"></script>
@endsection