@extends('admin.include.master')

@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 id="page-title">Category wise Abstract (Promotion)</h1>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            {{-- Country List --}}
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        {{-- <div class="card-header">
                        </div> --}}
                        <!-- /.card-header -->
                        <div class="card-body">
                            <table id="CategoryTable" class="table table-bordered table-striped table-sm">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th colspan="11">Cadre Wise Sanction Post</th>
                                        <th colspan="11">Cadre Wise Filled Post</th>
                                        <th colspan="11">Cadre Wise Vacant Post</th>
                                    </tr>
                                    <tr>
                                        <td class="text-bold">Sr.No.</td> 
                                        <td class="text-bold">Cadre</td>
                                        <td class="text-bold">Sanction Post</td>
                                        <td class="text-bold">Filled Post</td>
                                        <td class="text-bold">SC</td>
                                        <td class="text-bold">ST</td> 
                                        <td class="text-bold" colspan="4">VJ/NT</td>
                                        <td class="text-bold">SBC</td>
                                        <td class="text-bold">OBC</td>
                                        <td class="text-bold">EWS</td>
                                        <td class="text-bold">OPEN</td>
                                        <td class="text-bold">Total</td>
                                        <td class="text-bold">SC</td>
                                        <td class="text-bold">ST</td> 
                                        <td class="text-bold" colspan="4">VJ/NT</td>
                                        <td class="text-bold">SBC</td>
                                        <td class="text-bold">OBC</td>
                                        <td class="text-bold">EWS</td>
                                        <td class="text-bold">OPEN</td>
                                        <td class="text-bold">Total</td>
                                        <td class="text-bold">SC</td>
                                        <td class="text-bold">ST</td> 
                                        <td class="text-bold" colspan="4">VJ/NT</td>
                                        <td class="text-bold">SBC</td>
                                        <td class="text-bold">OBC</td>
                                        <td class="text-bold">EWS</td>
                                        <td class="text-bold">OPEN</td>
                                        <td class="text-bold">Total</td>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                    </form>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->

        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>

{{-- JS Start Here --}}
<script>
    $(document).ready(function(e) {
        $.ajax({
            type: "GET",
            url: "{{ url('/get-category-wise-promotion-report') }}",
            success: function(response, status) {
                $('#CategoryTable').find('tbody').append(response.output);
                $('#CategoryTable').find('tbody').append(response.total);
                $("#CategoryTable").DataTable({
                "responsive": true,
                "ordering": false,
                "lengthChange": true,
                "autoWidth": false,
                "lengthMenu": [10, 20, 50, 100, 250, 500],
                "buttons": ["csv", "excel", "pdf", "print"]
                }).buttons().container().appendTo('#CategoryTable_wrapper .col-md-6:eq(0)');
            }
        });
    }); 
</script>
{{-- <script>
    $(function() {
            $("#CategoryTable").DataTable({
                "responsive": true,
                "ordering": false,
                "lengthChange": true,
                "autoWidth": false,
                "lengthMenu": [10, 20, 50, 100, 250, 500],
                "buttons": ["csv", "excel", "pdf", "print"],
            }).buttons().container().appendTo('#CategoryTable_wrapper .col-md-6:eq(0)');
        });      
</script> --}}

<!-- /.content-wrapper -->
@endsection