@push('styles')
    <style>
        div#table-1_wrapper {
            max-width: 1000px;
            min-width: 1500px;
        }

        .theme-white .page-item.active .page-link {
            color: #274e75;
            background-color: #3abaf4;
            border-color: #3abaf4;
        }

        li.paginate_button.page-item.active {
            background-color: transparent !important;
        }
    </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)
                <a href="{{ route('client.create') }}" class="btn btn-info btn-lg">Add Client</a>
            @else
            @endif
        @else
            <a href="{{ route('client.create') }}" class="btn btn-info btn-lg">Add Client</a>
        @endif
    </div>
    @if (session()->has('message'))
        @php
            $message = json_decode(session()->get('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>
    @endif
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped client_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>#</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Address</th>
                        <th>Tel</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $start = $clients->firstItem();
                    @endphp
                    @forelse ($clients as $client)
                        <tr>
                            <td> {{ $start + $loop->index }} </td>
                            <td>{{ $client->name }}</td>
                            <td>{{ $client->email }}</td>
                            <td>{{ $client->address }}</td>
                            <td>{{ $client->tel }}</td>
                            @if (auth()->user()->role->name == 'staff' || auth()->user()->role->name == 'companyStaff')
                                <td>
                                    @if (auth()->user()->is_edit == 1)
                                        <a href="{{ route('client.update', ['client' => $client->id]) }}"
                                            class="btn btn-info">
                                            <i class="fa fa-edit"></i>
                                        </a>
                                    @else
                                    @endif
                                    @if (auth()->user()->is_delete == 1)
                                        <a href="#" onclick="showDelete('deleteClient','{{ $client->id }}')"
                                            class="btn btn-info"><i class="fa fa-trash"></i></a>
                                    @else
                                    @endif
                                </td>
                            @else
                                <td>
                                    <a href="{{ route('client.update', ['client' => $client->id]) }}"
                                        class="btn btn-info">
                                        <i class="fa fa-edit"></i>
                                    </a>
                                    <a href="#" onclick="showDelete('deleteClient','{{ $client->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 {{ $clients->firstItem() }} to {{ $clients->lastItem() }} of {{ $clients->total() }}
                results
            </div>
            <div class="col-md-6">
                <div class="float-right">
                    {{ $clients->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
@push('scripts')
    <script>
        $(document).ready(function() {
            $('#client').addClass('active');
            $('#manager').removeClass('active');
            $('#mycomapny').removeClass('active');
            $('#employee').removeClass('active');
            $('#prod').removeClass('active');
            $('#supp').removeClass('active');
            $('#purch').removeClass('active');
            $('#ship').removeClass('active');
            $('#sales').removeClass('active');

            $('#rma').removeClass('active');
        });
    </script>
@endpush