@extends('layouts.vertical', ['page_title' => 'Neb Mitra to ABM Mapping'])

@section('css')
    <link href="{{ asset('assets/libs/datatables/datatables.min.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .card-box {
            background-color: #fff;
            padding: 1.5rem;
            box-shadow: 0 0.75rem 6rem rgba(56, 65, 74, 0.03);
            margin-bottom: 24px;
            border-radius: 0.25rem;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row align-items-center mb-3">
            <div class="col-md-6 p-2">
                <h4 class="page-title">{{ $title }}</h4>
            </div>
            <div class="col-md-6 p-2 text-end">
                <a href="/nebmitra/abmmappingexport" class="btn btn-dark waves-effect waves-light me-2" id="btn-export">
                    Export
                </a>
            </div>
        </div>

        @if (session()->has('message'))
            <div class="alert alert-success">
                {{ session()->get('message') }}
            </div>
        @endif
        @if (session()->has('error'))
            <div class="alert alert-danger">
                {{ session()->get('error') }}
            </div>
        @endif

        <div class="row">
            <div class="col-12">
                <div class="card-box">
                    <div class="responsive-table-plugin">
                        <div class="table-rep-plugin">
                            <div class="table-responsive" data-pattern="priority-columns">
                                <table id="abm-mapping-datatable" class="table dt-responsive nowrap">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>ABM User ID</th>
                                            <th>ABM Name</th>
                                            <th>Mitra User ID</th>
                                            <th>Mitra Name</th>
                                            <th>Mitra Hierarchy ID</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('assets/libs/datatables/datatables.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            let table = $('#abm-mapping-datatable').DataTable({
                "order": [[0, "desc"]],
                "language": {
                    "paginate": {
                        "previous": "<i class='mdi mdi-chevron-left'>",
                        "next": "<i class='mdi mdi-chevron-right'>"
                    }
                },
                "drawCallback": function() {
                    $('.dataTables_paginate > .pagination').addClass('pagination-rounded');
                },
                fixedHeader: true,
                "pageLength": 50,
                "lengthMenu": [[50, 100, 250, 500], [50, 100, 250, 500]],
                'processing': true,
                'serverSide': true,
                'serverMethod': 'get',
                searchDelay: 2000,
                'searching': true,
                'info': true,
                "ajax": {
                    url: '/nebmitra/abmmappingajax',
                    dataSrc: 'data'
                },
                columns: [
                    { "data": "id" },
                    { "data": "abm_user_id" },
                    { "data": "abm_name" },
                    { "data": "mitra_user_id" },
                    { "data": "mitra_name" },
                    { "data": "mitra_hierarchy_id" }
                ],
                "initComplete": function(settings, json) {
                    var api = this.api();
                    var textBox = $('.dataTables_filter label input');
                    textBox.unbind();
                    textBox.bind('keyup input', function(e) {
                        if (e.keyCode == 8 && !textBox.val() || e.keyCode == 46 && !textBox.val()) {
                            // do nothing
                        } else if (e.keyCode == 13 || !textBox.val()) {
                            api.search(this.value).draw();
                        }
                    });
                }
            });
        });
    </script>
@endsection