@extends('layouts.admin.admin')

@section('page-specific-styles')
    <link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/TableTools.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/lightbox.css') }}" />
@endsection

@section('title', 'Qualification')

@section('content')

    <div class="nk-block-head">
        <div class="nk-block-head-between flex-wrap gap g-2">
            <div class="nk-block-head-content">
                <h2 class="nk-block-title">Qualifications </h1>
                    <nav>
                        <ol class="breadcrumb breadcrumb-arrow mb-0">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item"><a href="#">Qualifications</a></li>

                        </ol>
                    </nav>
            </div>
            <div class="nk-block-head-content">
                <ul class="d-flex">
                    <li><a href="{{ route('qualification.create') }}" class="btn btn-primary d-none d-md-inline-flex"><em class="icon ni ni-plus"></em><span>Add Qualification</span></a></li>
                </ul>
            </div>


        </div>

        <div class="d-flex">
            @if (session()->has('message'))
                <div class="alert alert-success row" id="response_messsage">
                    {{ session()->get('message') }}
                </div>
            @endif

            @if (session()->has('error'))
                <div class="alert alert-danger" id="response_messsage">
                    {{ session()->get('error') }}
                </div>
            @endif
        </div>
    </div>
    <div class="nk-block">
        <div class="card mt-3 mb-2">
            <div class="card-body">
                <div class="dataTable-wrapper dataTable-loading   fixed-columns">
                    <table class="datatable-init table table-border" data-nk-container="table-responsive" id="example">

                
                    <thead class="table-light">
                        <tr>
                            <th data-sortable="" style="width: 2%;"><span class="overline-title">ID</th>
                            <th data-sortable="" style="width: 20%;"><span class="overline-title">S.No.</th>
                            <th data-sortable="" style="width: 20%;"><span class="overline-title">Qualification</th>
                            <th data-sortable="" style="width: 20%;"><span class="overline-title">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
            </div>
            
        </div>


    </div>



@endsection


@section('page-specific-scripts')
    <script src="{{ asset('js/datatables.min.js') }}"></script>
    <script src="{{ asset('js/lightbox.js') }}"></script>
    <script>
        $(document).ready(function() {
            setTimeout(() => {
                $('#response_messsage').hide();
            }, 3000);

            $('#example').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": '{{ route('qualification.data') }}',
                // dom: 'Bfrtip',
                // buttons: [
                //     'copy', 'csv', 'excel', 'pdf', 'print',
                //     // exportOptions: {
                //     //     columns: 'th:not(:last-child)'
                //     // }
                // ],
                dom: 'Bfrtip',
                buttons: [{
                    extend: 'excel',
                    text: 'Export Search Results',
                    className: 'btn btn-default',
                    exportOptions: {
                        columns: 'th:not(:last-child)'
                    }
                }],
                "columns": [{
                        "data": "id",
                        'visible': false
                    },
                    {
                        "data": "DT_RowIndex",
                        orderable: false,
                        searchable: false
                    },
                    {
                        "data": "name"
                    },

                    {
                        "data": "actions",
                        orderable: false,
                        searchable: false
                    },
                ],
                order: [
                    [2, 'desc']
                ]
            });
        });
    </script>
@endsection