@push('styles')
    <style>
        .theme-white .page-item.active .page-link {
            color: #274e75;
            background-color: #3abaf4;
            border-color: #3abaf4;
        }
    </style>
@endpush
<div class="card">
    <div class="card-header">
        @if ($is_admin)
            <button type="button" class="btn btn-info btn-lg" wire:click="$emit('addStaff')">
                Add Staff
            </button>
        @endif
    </div>
    @if (!empty($message))
        @php
            $message = json_decode($message);
        @endphp
        <div class="alert alert-{{ $message->type }} alert-dismissible fade show" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <strong>{{ $message->title }}</strong> {{ $message->message }}
        </div>
        @php $message = null; @endphp
    @endif
    <style>
        .table {
            color: #fff !important;
        }
    </style>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped staff_table">
                <div class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
                    <div class="row">
                        <div class="col-sm-12 col-md-6">
                            <div class="dataTables_length">
                                <label>Show
                                    <select class="form-control form-control-sm" wire:model="sortNo">
                                        <option value="10">10</option>
                                        <option value="25">25</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                    </select> entries
                                </label>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6">
                            <div class="dataTables_filter">
                                <label>Search:
                                    <input type="text" wire:model='search' class="form-control form-control-sm"
                                        placeholder="Seaching" />
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <thead>
                    <tr>
                        <th class="">#</th>
                        <th class="">Full Name</th>
                        <th class="">Email</th>
                        <th class="">Contact</th>
                        <th class="">Address</th>
                        <th class="">Permission</th>
                        @if ($is_admin)
                            <th class="">Action</th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                    @php
                        $start = $staffs->firstItem();
                    @endphp
                    @foreach ($staffs as $staff)
                        <tr>
                            <td> {{ $start + $loop->index }} </td>
                            <td> {{ $staff->name }} </td>
                            <td class="align-middle"> {{ $staff->email }} </td>
                            <td> {{ $staff->phone }} </td>
                            <td> {{ $staff->address }} </td>
                            @if ($is_admin)
                                <td>
                                    <a href="#" wire:click.prevent="$emit('changePermission',{{ $staff->id }})"
                                        class="btn btn-info">
                                        Permission
                                    </a>
                                    {{-- @if ($staff->permission == 0)
                                    @else
                                        <a href="#" wire:click.prevent="changePermission({{ $staff->id }})"
                                            class="btn btn-info">
                                            Permission Assigned
                                        </a>
                                    @endif --}}
                                </td>
                                <td>
                                    <a href="#" wire:click.prevent="$emit('editStaff', {{ $staff->id }})"
                                        class="btn btn-info">
                                        <i class="fa fa-edit"></i>
                                    </a>

                                    <a href="#" onclick="showDelete('deleteStaff','{{ $staff->id }}')"
                                        class="btn btn-info"><i class="fa fa-trash"></i></a>
                                </td>
                            @endif
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="row">
            <div class="col-md-6 text-light">
                Showing {{ $staffs->firstItem() }} to {{ $staffs->lastItem() }} of
                {{ $staffs->total() }}
                results
            </div>
            <div class="col-md-6">
                <div class="float-right">
                    {{ $staffs->links() }}
                </div>
            </div>
        </div>
    </div>
    @if ($is_admin)
        @livewire('dashboard.staff.add')
        @livewire('dashboard.staff.update')
        @livewire('dashboard.staff.permission')
    @endif
</div>
@push('scripts')
    <script>
        $(document).ready(function() {

            $('#manager').removeClass('active');
            $('#mycomapny').addlass('active');
            $('#employee').removeClass('active');
            $('#ship').removeClass('active');
            $('#rma').removeClass('active');
            $('#prod').removeClass('active');
            $('#supp').removeClass('active');
            $('#client').removeClass('active');
            $('#sales').removeClass('active');
            $('#purch').removeClass('active');
        });
    </script>
@endpush