@extends('admin.layout')
@section('main')
    <div class="content-header row">
    </div>
    <div class="content-header row mb-2">
        <div class="row breadcrumbs-top">
            <div class="col-12">

                <div class="breadcrumb-wrapper">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('division.dashboard') }}"
                                class="router-link-active spaSlug" target="_self"><svg xmlns="http://www.w3.org/2000/svg"
                                    width="16px" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                    class="align-text-top feather feather-home">
                                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                                    <polyline points="9 22 9 12 15 12 15 22"></polyline>
                                </svg></a></li>
                        <li class="breadcrumb-item"><a href="{{ route('division.field.import') }}" target="_self"
                                class="spaSlug"> Import
                                Field Person
                            </a></li>
                        <li class="breadcrumb-item active"><span aria-current="location"> Insert Count </span></li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="content-wrapper">
        <div class="content-header row">
        </div>
        <div class="content-body">
            <!-- Dashboard Ecommerce Starts -->
            <section id="column-search-datatable">

                <div class="row">
                    <div class="col-12">
                        <div class="card">

                            <div class="card-datatable p-1 table-responsive ">
                                 
                                <table class="dt-column-search table table-striped w-100 text-center display"
                                    id="dataTable">
                                    <thead>
                                        <tr>
                                            <th>Sr. No.</th>
                                            <th>Position Code</th>
                                            <th>Parent Position Code</th>
                                            <th>Employee Code</th>
                                            <th>Employee Name</th>
                                            <th>Designation</th>
                                            <th>Mobile Number</th>
                                            <th>Email ID</th>
                                            <th>Region</th>
                                            <th>HQ Name</th>
                                            <th>HQ Code</th>
                                            <th>Comment</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Dashboard Ecommerce ends -->

        </div>
    </div>
@endsection
@section('scripts')
    <script>

        $(function() {
            var columns = [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    "orderable": false,
                    searchable: false
                },
                {
                    data: 'vPositionCode',
                },
                {
                    data: 'vParentPositionCode',
                },
                {
                    data: 'vEmployeeCode',
                },
                {
                    data: 'vEmployeeName',
                },
                {
                    data: 'vDesignation',
                },
                {
                    data: 'vMobile',
                },
                {
                    data: 'vEmail',
                },
                {
                    data: 'vRegion',
                },
                {
                    data: 'vHq',
                },
                {
                    data: 'vHqCode',
                },
                {
                    data: 'vComment',
                },
            ];
            var columnDefs = [];
            getdatatable("{{ route('division.field.import.detail.paginate') }}", columns, columnDefs);
        });

        function getdatatable(url, columns, columnDefs) {
            $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                bDestroy: true,
                order: [],
                "scrollX": true,
                columns: columns,
                columnDefs: columnDefs,
                // ajax: "{{ url('participant-paginate') }}",
                ajax: {
                    method: 'post',
                    url: url,
                    data: function(d) {
                        d._token = "{{ csrf_token() }}",
                            d.type = '{{ $type }}',
                            d.iImportID = '{{ $iImportID }}'
                    }
                },
                "drawCallback": function(settings) {
                    new VenoBox({
                        selector: '.venobox_img',
                    });
                    feather.replace();

                    // alert();
                }
            });
        }

        function setDivision(iDivisionID) {
            $.post("{{ route('division.set.session') }}", {
                    iDivisionID: iDivisionID,
                    _token: "{{ csrf_token() }}"
                },
                function(data, status) {
                    $('#dataTable').DataTable().ajax.reload();
                });
        }
    </script>
@endsection