@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 (auth()->user()->role->name == 'staff' || auth()->user()->role->name == 'companyStaff')
            @if (auth()->user()->is_add == 1)
                <button type="button" class="btn btn-info btn-lg"
                    wire:click="$emit('addCompanyStaff',{{ $companyId }})">
                    Add Company Staff
                </button>
            @else
            @endif
        @else
            <button type="button" class="btn btn-info btn-lg" wire:click="$emit('addCompanyStaff',{{ $companyId }})">
                Add Company 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 companyStaff_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="">Company</th>
                        <th class="">Permission</th>
                        <th class="">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $start = $companyStaffs->firstItem();
                    @endphp
                    @forelse ($companyStaffs as $companyStaff)
                        <tr>
                            <td> {{ $start + $loop->index }} </td>
                            <td> {{ $companyStaff->name }} </td>
                            <td class="align-middle"> {{ $companyStaff->email }} </td>
                            <td> {{ $companyStaff->phone }} </td>
                            <td> {{ $companyStaff->address }} </td>
                            <td> {{ $companyStaff->company->name ?? '' }} </td>
                            <td>
                                <a href="#"
                                    wire:click.prevent="$emit('changeCompany', {{ $companyStaff->id }})"
                                    class="btn btn-info">
                                    Permission
                                </a>
                            </td>
                            @if (auth()->user()->role->name == 'staff' || auth()->user()->role->name == 'companyStaff')
                                <td>
                                    @if (auth()->user()->is_edit == 1)
                                        <a href="#"
                                            wire:click.prevent="$emit('editCompanyStaff', {{ $companyStaff->id }})"
                                            class="btn btn-info">
                                            <i class="fa fa-edit"></i>
                                        </a>
                                    @else
                                    @endif
                                    @if (auth()->user()->is_delete == 1)
                                        <a href="#"
                                            onclick="showDelete('deleteCompanyStaff','{{ $companyStaff->id }}')"
                                            class="btn btn-info"><i class="fa fa-trash"></i></a>
                                    @else
                                    @endif
                                @else
                                <td>
                                    <a href="#"
                                        wire:click.prevent="$emit('editCompanyStaff', {{ $companyStaff->id }})"
                                        class="btn btn-info">
                                        <i class="fa fa-edit"></i>
                                    </a>

                                    <a href="#"
                                        onclick="showDelete('deleteCompanyStaff','{{ $companyStaff->id }}')"
                                        class="btn btn-info"><i class="fa fa-trash"></i></a>
                                </td>
                            @endif
                        </tr>
                    @empty
                        <tr>
                            <td colspan="3" style="text-align:center;">No Data!</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="row">
            <div class="col-md-6 text-light">
                Showing {{ $companyStaffs->firstItem() }} to {{ $companyStaffs->lastItem() }} of
                {{ $companyStaffs->total() }}
                results
            </div>
            <div class="col-md-6">
                <div class="float-right">
                    {{ $companyStaffs->links() }}
                </div>
            </div>
        </div>
    </div>
    @if (auth()->user()->role->name == 'staff' || auth()->user()->role->name == 'companyStaff')
        @if (auth()->user()->is_add == 1)
            @livewire('dashboard.company-staff.add')
        @else
        @endif
        @if (auth()->user()->is_edit == 1)
            @livewire('dashboard.company-staff.update')
        @else
        @endif
    @else
        @livewire('dashboard.company-staff.add')
        @livewire('dashboard.company-staff.update')
        @livewire('dashboard.company-staff.permission')
    @endif
</div>
@push('scripts')
    <script>
        $(document).ready(function() {

            $('#companyStaff').addClass('active');
            $('#employee').addClass('active');
            $('#mycomapny').removeClass('active');
            $('#manager').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