@extends('adminlte::page')

@include('admin.includes.datatable-axios-files')

@section('title', 'Dashboard')

@section('content_header')
<h1>Admin Staff</h1>
<small>Manage admin staffs</small>
@stop

@section('content')
<div class="card card-dark">
    <div class="card-header">
        <h3 class="card-title"></h3>
        <div class="card-tools">
            <a href="{{ route('admin.add.staff') }}" class="btn btn-dark"><i class="fas fa-plus"></i> Add Staff</a>
        </div>
    </div>

    <div class="card-body">
        <form method="POST" id="search-form" role="form">

            <div class="form-group">
                <label for="search">Search</label>
                <x-adminlte-input class="form-control" id="search_keyword" name="search_keyword" placeholder="Enter Name" />

            </div>
            <div class="form-group">
                <label for="status">Status</label>
                @php
                $options = ['all' => 'All', STATUS_DISABLED => 'Disabled', STATUS_ENABLED => 'Active'];
                @endphp
                <x-adminlte-select name="status_filter" id="status_filter">
                    <x-adminlte-options :options="$options" empty-option="Select an option..." />
                </x-adminlte-select>

            </div>

            @php
            $config = [
            "showDropdowns" => true,
            "cancelButtonClasses" => "btn-danger",
            "locale" => ["format" => "YYYY/MM/DD"],
            ];
            @endphp
            <x-adminlte-date-range name="date_range_filter" id="date_range_filter" placeholder="Select a date range..." label="Date Range" :config="$config" autocomplete="off">
                <x-slot name="prependSlot">
                    <div class="input-group-text bg-gradient-dark">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                </x-slot>
            </x-adminlte-date-range>

            <!--<button type="submit" class="btn btn-primary">Filter</button>-->

            <!--<div class="card-footer">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>-->
        </form>
        <table class="table table-bordered yajra-datatable">
            <thead>
                <tr>
                    {{-- <th>
                        <input type="checkbox" id="selectAll" /></th>  --}}
                    {{-- <th>ID</th>  --}}
                    <th>Name</th>
                    <th>Email</th>
                    <th>Status</th>
                    <th>Roles</th>
                    <th>Created Date</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
@stop

@section('js')
<script type="text/javascript">
    $(function() {

        var dataTable = $('.yajra-datatable').DataTable({
            processing: true,
            serverSide: true,
            pageLength: 10,
            searching: false,
            'ajax': {
                'url': "{{ route('admin.get.staffs') }}",
                'data': function(data) {
                    // Read values
                    var search_keyword = $('#search_keyword').val();
                    var shop_filter = $('#shop_filter option:selected').val();
                    var status_filter = $('#status_filter option:selected').val();
                    var date_range_filter = $('#date_range_filter').val();

                    // Append to data
                    data.search_keyword = search_keyword;
                    data.shop_filter = shop_filter;
                    data.status_filter = status_filter;
                    data.date_range_filter = date_range_filter;
                }
            },
            columns: [
                /*{data: 'checkbox', name: 'checkbox', orderable: false, searchable: false},*/
                /*  {data: 'id', name: 'ID'},  */
                {
                    data: 'first_name',
                    name: 'Name'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'role',
                    name: 'role'
                },
                {
                    data: 'created_at',
                    name: 'Created Date'
                },
                {
                    data: 'action',
                    name: 'action',
                    /*orderable: true,
                    searchable: true*/
                },
            ]
        });

        $('#search_keyword').keyup(function() {
            dataTable.draw();
        });
        $('#shop_filter').on('change', function() {
            dataTable.draw();
        });
        $('#status_filter').on('change', function() {
            dataTable.draw();
        });
        $('#date_range_filter').on('apply.daterangepicker', function(ev, picker) {
            //console.log(picker.startDate.format('YYYY-MM-DD'));
            // console.log(picker.endDate.format('YYYY-MM-DD'));
            dataTable.draw();
        });
        /*
            // select all rows
            $('#selectAll').on('change', function(){
                let groupCheck = Array.from(document.getElementsByClassName('select_row'));
                //console.log(groupCheck)
                if (this.checked) {
                    groupCheck.forEach(element => {
                        // checking the checkbox
                        element.checked = true;
                        //$('#bulk-action-apply').prop('disabled', false);
                        $('.bulk-action-wrap').show();
                    })
                } else {
                    groupCheck.forEach(element => {
                        // Unchecking the checkbox
                        element.checked = false;
                        $('.bulk-action-wrap').hide();
                    })
                }
            });*/

        $(document).on('click', '.update_status', function(e) {
            e.preventDefault();
            $('.overlay-with-loader').show();
            var update_status_id = $(this).attr('id');
            var current_status = $(this).data('current-status');
            var new_status = (current_status == 0) ? 1 : 0;
            var new_status_label = (new_status == 1) ? 'Active' : 'Inactive';
            var url = $(this).data('update-url');
            axios.put(url, {
                    new_status: new_status
                })
                .then(response => {
                    // Handle success response
                    $('.overlay-with-loader').hide();
                    if (response.data.status === 'success') {
                        var success_messages = '';
                        console.log('#update_status_currnt', '#update_status_' + current_status);
                        console.log('#update_status_new', '#update_status_' + new_status);
                        $('#update_status_' + current_status).hide();
                        $('#update_status_' + new_status).show();
                        if (Array.isArray(response.data.message)) {
                            $.each(response.data.message, function(Index, Value) {
                                if (success_messages === '') {
                                    success_messages += Value;
                                } else {
                                    success_messages += '<br/>' + Value;
                                }
                            });
                        } else {
                            success_messages = response.data.message;
                        }
                        $('#success-container').html(success_messages).show('slow');
                    } else {
                        var messages = '';
                        if (Array.isArray(response.data.message)) {
                            $.each(response.data.message, function(Index, Value) {
                                if (messages === '') {
                                    messages += Value;
                                } else {
                                    messages += '<br/>' + Value;
                                }
                            });
                        } else {
                            messages = response.data.message;
                        }
                        $('#error-container').html(messages).show('slow');
                    }
                    setTimeout(function() {
                        $('#success-container').hide('slow');
                        $('#error-container').hide('slow');
                    }, 5000);
                })
                .catch(error => {
                    console.error(error);
                });
        });

    });
</script>
@stop