@extends('admin.layout')
@section('main')
<style>
   .view_role_rs {
    margin: 0 0 0 5px;
    border-radius: 0;
    justify-content: center;
    font-size: 0;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 25px;
    border-radius: 50px;
    align-items: center;
    display: flex
;
    background: rgb(251 239 237);
    color: #DB644D !important;
    border: 1px solid #DB644D;
    padding: 0 0 0 1px;
}

    .view_role_rs svg {
        margin: 0 !important;
        text-align: center;
            width: 13px;
    }
</style>
    <div class="content-header row">
    </div>
    <div class="content-body">
                {{-- for timeline dropdown --}}
    <div class="modal fade" id="track_modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
        <div class="modal-dialog  modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title font-weight-bolder" id="">Activity Track</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <ul class="timeline ml-50" id="track_modal_body">

                    </ul>
                </div>
            </div>
        </div>
    </div>
    {{-- for timeline dropdown --}}


        <!-- Dashboard Ecommerce Starts -->
        <section id="dashboard-ecommerce">
            <div class="row match-height justify-content-end mb-1">
                <div class="col-lg-12 mr-auto">
                    <h2>Manage Designation</h2>
                </div>

                <div class="col-lg-auto col-md-6 my-1">
                    <div class="d-lg-flex">
                        {{-- <a href="#" class="btn btn-primary">Apply</a> --}}
                        {{-- <a href="#" class="btn btn-light ml-1">Clear</a> --}}
                        {{-- <a href="{{ route('admin.designation.new') }}" class="btn btn-info ml-1 spaSlug"><i
                                class="fa fa-plus mr-1"></i> Add Designation</a> --}}
                    </div>
                </div>
                <div class="col-lg-auto  col-md-6 my-1 text-right">
                    <div class="form-group">
                        <a href="{{ route('admin.designation.export') }}"
                            class="btn btn-success btn-toggle-sidebar waves-effect waves-float waves-light">
                            <span class=""><i class="fa fa-download mr-1"></i> Export</span>
                        </a>
                    </div>
                </div>
            </div>


        </section>
        <section id="column-search-datatable">
            <div class="row">
                <div class="col-12">
                    <div class="card">

                        <div class="card-datatable p-1">

                            <table class="dt-column-search table table-striped w-100 text-center display" id="dataTable">
                                <thead>
                                    <tr>
                                        <th>Sr. No.</th>
                                        <th>Action</th>
                                        <th>Designation</th>
                                        <th>Status</th>
                                        <th>Date & Time</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Dashboard Ecommerce ends -->

    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            setSidebarActive('{{ Route::currentRouteName() }}');
            $(".select2").select2();

        });

        $(function() {
            var columns = [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    "orderable": false,
                    searchable: false
                },
                {
                    data: 'Action',
                    "orderable": false,
                    searchable: false
                },
                {
                    data: 'vDesignation',
                },
                {
                    data: 'eStatus',
                },
                {
                    data: 'created_at',
                },
            ];
            var columnDefs = [];
            getdatatable("{{ route('admin.designation.paginate') }}", columns, columnDefs);
        });

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

                    // alert();
                }
            });
        }

        function changeStatus(status, id) {
            $.ajax({
                url: "{{ route('admin.designation.status') }}",
                type: 'POST',
                data: {
                    'iDesignationID': id,
                    'eStatus': status,
                    _token: "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response) {
                    if (response.status == 1)
                        $.notify(response.message, "success");
                    else
                        $.notify(response.message, "error");
                    $('#dataTable').DataTable().ajax.reload(null, false);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $('#dataTable').DataTable().ajax.reload();
                    if (jqXHR.status == 419){
                            $.notify("Please refresh the Page", "error");
                        }else if (jqXHR.status == 500){
                            $.notify("Please try after a few minutes", "error");
                        }else{
                            $.notify(jqXHR.responseJSON.message, "error");
                        }
                }
            });
        }

        function reloadTable() {
            $('#dataTable').DataTable().ajax.reload();
        }

                        function timelineTrack(id) {
            data = {
                'iDesignationID': id,
                '_token': "{{ csrf_token() }}"
            }

            ajax_call("{{ route('admin.designation.timeline.track') }}", 'POST', data, 0, 'dataTable', 1, 0,
                'timelineTrack_response');
        }

        function timelineTrack_response(response) {
            var html = '';
            $(response).each(function(index, element) {
                $title = '';
                role = element.vuserRole;
                const viewRouteTemplate = "{{ route('admin.designation.timeline.track.log', ['iTimelineID' => ':id']) }}";
                let viewLink = viewRouteTemplate.replace(':id', element.iTimelineID);
                html += '<li class="timeline-item">' +
                    '<span class="timeline-point timeline-point-indicator"></span>' +
                    '<div class="timeline-event">' +
                    '<div class="d-flex justify-content-between flex-sm-row flex-column mb-sm-0 mb-0">' +
                    '<h5 class="font-weight-bold mb-0">' + (($title == '') ? 'Designation ' + element.eType + ' By' :
                        $title) + '</h5>' ;
                if (element.eType != 'Status Changed') {
                    html += '<a class="view_role_rs" target="_blank" href="' + viewLink +
                        '"> <i data-feather="eye"></i> </a>';
                }


                html += '<span class="timeline-event-time mr-1 text-right"><i' +
                    'class="fa fa-calendar mr-1"></i> ' + element.created_date + '  <br /> <i' +
                    'class="fa fa-clock mr-1"></i>' + element.created_time + '</span>' +
                    '</div>' +
                    '<h6>' + element.vuserName +
                    ' <label class="badge badge-light-primary">' + (role) + '</label></h6>' +
                    '</div>' +
                    '<hr class="mb-0">' +
                    '</li>';

            });
            $("#track_modal_body").html(html);
            $("#track_modal").modal('show');
        }


    </script>
@endsection