@extends('layouts.template')
@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <h5 class="px-10 py-7 text-primary">Data SDM</h5>
            <div class="separator separator my-1"></div>
            <div class="card-header border-0 pt-6">
                <div class="card-title">
                    <div class="d-flex align-items-center position-relative my-1">
                        <span class="svg-icon svg-icon-1 position-absolute ms-6">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="black" />
                                <path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="black" />
                            </svg>
                        </span>
                        <input type="text" data-kt-customer-table-filter="search" class="form-control form-control-solid w-250px ps-15" placeholder="Search SDM" id="myInputTextField" />
                    </div>
                </div>
                <div class="card-toolbar">
                    <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                        <a href="{{route('sdm.export')}}" type="button" class="btn btn-light-success me-3 btn-sm" style="margin-right:5px;"><i class="bi bi-file-earmark-excel"></i>Excel</a>
                        <a href="{{route('sdm.create')}}" type="button" class="btn btn-primary btn-sm" style="margin-right:5px;"><i class="bi bi-plus fs-3"></i>Add Data</a>
                    </div>
                </div>
            </div>
            <div class="card-body pt-5">
                <table class="table align-middle table-row-dashed fs-6 gy-5 table-sm" id="tb-sdm" style="font-size:7px;">
                    <thead>
                        <tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase gs-0">
                            <th class="min-w-50px">NO</th>
                            <th class="min-w-50px">ACTION</th>
                            <th class="min-w-90px">NOPEG</th>
                            <th class="min-w-100px">NAMA SDM</th>
                            <th class="min-w-70px">STATUS</th>
                            <th class="min-w-125px">JABATAN</th>
                            <th class="min-w-90px">REGION</th>
                            <th class="min-w-125px">DISTRIBUTOR</th>
                            <th class="min-w-125px">TERRITORY</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<script src="//code.jquery.com/jquery.js"></script>     
<script>
$(function() {
    const table = $('#tb-sdm').DataTable({
        processing: true,
        // serverSide: true,
        ajax: {
            url: "{{ route('sdm.getDataSdm') }}",
            type: "get",
            data: function (d) {
            }
        },
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'action', name: 'action' },
            { data: 'nopeg', name: 'nopeg' },
            { data: 'nama_sdm', name: 'nama_sdm' },
            { data: 'status', name: 'status' },
            { data: 'jabatan', name: 'jabatan' },
            { data: 'region', name: 'region' },
            { data: 'distributor', name: 'distributor' },
            { data: 'territory', name: 'territory' }
           
        ]
    });

    $('#myInputTextField').keyup(function(){
        table.search($(this).val()).draw() ;
    })
});

</script>
@endsection