@extends('admin.include.master')

@section('content')
<style>
    span.cmrow {
    border-bottom: 1px #000 solid;
    width: 100% !important;
    padding: 5px;
    height: auto;
    /* background: #ccc; */
    display: block;
}
</style>
<!-- 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">Scheme wise Abstract</h1>
                </div>
                <div class="col-sm-6">
                <div class="col-sm-6" style="float: left;">
                    
                </div>
                  <div class="col-sm-6 form-group mb-2" style="float: right;">
                    <label class="mb-0" for="Scheme Name">Name of Scheme</label>
                <form action="" method="GET" id="scheme">    
                    <select class="form-control form-control-sm select2"  aria-hidden="true"
                      name="SchemeNameId" id="SchemeNameId" data-placeholder="Select Scheme">
                      <option value="" disabled selected>Select Scheme</option>
                    </select>
                     <input type="hidden" name="SchemeId" id="SchemeId">
                </form>     
                  </div>
                </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="schemeTable" class="table table-bordered table-striped table-sm">
                                <thead>
                                    <tr>
                                        <th colspan="6">Name of the Scheme: <span id="Scheme"></span></th>
                                    </tr>
                                    <tr>   
                                        <th colspan="6">Total Sanction Post: <span id="SchemePost"></span></th>
                                    </tr>
                                    <tr>
                                        <th colspan="6">Scheme wise sanction Positions</th>
                                    </tr>
                                    <tr>
                                        <th class="text-center">DesignationName</th>
                                        <th class="text-center">No of Post</th>
                                        <th class="text-center">Filled Post</th>
                                        <th class="text-center">Vacant Post</th>
                                        <th class="text-center">Employee Name</th>
                                        <th class="text-center">Working Place</th>
                                    </tr>
                                    
                                </thead>
                                <tbody>
                                    
                                </tbody>
                            </table>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                    </form>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->

        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
// Name Of Scheme List
<script>
  $(document).ready(function() {
        $.ajax({
          type: "GET",
          url: "{{ url('/scheme-name-list') }}",
          dataType: "json",
          success: function(response) {
            var json = response.SchemeNameList;
            $.each(json, function(i, schemename) {
              $("#SchemeNameId").append("<option value='" + schemename.SchemeNameId + "'>" + schemename.NameOfScheme + "</option>");
              $('#SchemeNameId').trigger('change');
            });
          }
        });
});

$(document).ready(function(e) {
    $('#SchemeNameId').change(function(e) {
     var SchemeId = $(this).val();
        if (SchemeId == null) {
            var nodata = '<tr class="odd"><td valign="top" colspan="8" class="text-center">No data available in table</td></tr>';
            $('#schemeTable').find('tbody').html('#' +nodata);
           return false;
        }
        else{
            $("#schemeTable tbody").empty();
            $('#schemeTable').dataTable().fnClearTable();
            $('#schemeTable').dataTable().fnDestroy();
            $.ajax({
                type: "GET",
                url: "{{ url('/scheme-wise-report/') }}/"+SchemeId,
                success: function(response, status) {
                    
                    $('#schemeTable').find('tbody').append(response.output);
                    $('#schemeTable').find('tbody').append(response.total);
                    $('span#Scheme').html('' +response.NameOfScheme);  
                    $('span#SchemePost').html('' +response.TotalSanctionPost);

                    $("#schemeTable").DataTable({
                    "responsive": true,
                    "ordering": false,
                    "buttons": ["csv", "excel", "pdf", "print"]
                    }).buttons().container().appendTo('#schemeTable_wrapper .col-md-6:eq(0)');
                }
            });
        }
        e.preventDefault();
    });
});

{{-- JS Start Here --}}
    // $(function() {
    //     $("#schemeTable").DataTable({
    //         "searchable": false,
    //         "responsive": true,
    //         "ordering": false,
    //         // "lengthChange": true,
    //         // "autoWidth": false,
    //         // "lengthMenu": [10, 20, 50, 100, 250, 500],
    //         // "columnDefs": [{ "orderable": false, "targets": 0 }],
    //         "buttons": ["csv", "excel", "pdf", "print"]
    //     }).buttons().container().appendTo('#schemeTable_wrapper .col-md-6:eq(0)');
    // });

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