<?php
use \App\Permission as Permission;
?>
@extends('layouts.app', [
    'title' => __('User Management'),
    'parentSection' => 'laravel',
    'elementName' => 'user-management'
])

@section('content')
    @component('layouts.headers.auth')
        @component('layouts.headers.breadcrumbs')
            @slot('title')
                {{ __('Examples') }}
            @endslot

            <li class="breadcrumb-item"><a href="{{ route('user.index') }}">{{ __('User Management') }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ __('List') }}</li>
        @endcomponent
    @endcomponent

    <div class="container-fluid mt--6">
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h3 class="mb-0">{{ __('Users') }}</h3>
                                <p class="text-sm mb-0">
                                    {{ __('Change user\'s account role. Lock or Unlock accounts. Edit accounts') }}
                                </p>
                            </div>
                            @permission(Permission::EDIT_USER_MANAGEMENT)
                                <div class="col-4 text-right">
                                    <a href="{{ route('user.create') }}" class="btn btn-sm btn-success">{{ __('Add user') }}</a>
                                </div>
                            @endpermission
                        </div>
                    </div>

                    <div class="col-12 mt-2">
                        @include('alerts.success')
                        @include('alerts.errors')
                    </div>

                    <div class="table-responsive py-4">
                        <table class="table align-items-center table-flush" id="datatable-basic">
                            <thead class="thead-light">
                            <tr class="text-primary">
                                <th scope="col">{{ __('Role') }}</th>
                                <th scope="col">{{ __('Name') }}</th>
                                <th scope="col">{{ __('Email') }}</th>
                                <th scope="col">{{ __('Account Status') }}</th>
                                <th scope="col">{{ __('Creation Date') }}</th>
                                <th scope="col">Account Settings</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach ($users as $user)
                                <tr class="{{ $user->locked ? "table-warning" : ""}}">
                                    <td>{{ $user->role->name }}</td>
                                    <td>{{ $user->name }}</td>
                                    <td>{{ $user->email }}</td>
                                    <td>
                                        @if($user->locked)
                                            Locked
                                        @else
                                            Unlocked
                                        @endif
                                    </td>
                                    <td>{{ $user->created_at->format('d/m/Y H:i') }}</td>
                                    <td>
                                        <div class="row">
                                                @if ($user->id != auth()->id())
                                                    @permission(Permission::LOCK_USER_MANAGEMENT)
                                                        @if(!$user->locked)
                                                            <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#lockModal{{$user->id}}">Lock</button>
                                                        @else
                                                            <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#unlockModal{{$user->id}}">Unlock</button>
                                                        @endif
                                                    @endpermission
                                                @include('users.lock_modal', ['user' => $user])
                                                @include('users.unlock_modal', ['user' => $user])
                                                @permission(Permission::EDIT_USER_MANAGEMENT)
                                                    <a class="btn btn-warning btn-sm" href="{{ route('user.edit', $user) }}">{{ __('Edit') }}</a>
                                                    <form action="{{ route('user.destroy', $user) }}" method="post">
                                                        @csrf
                                                        @method('delete')
                                                        <button type="button" class="btn btn-danger btn-sm" onclick="confirm('{{ __("Are you sure you want to delete this user?") }}') ? this.parentElement.submit() : ''">
                                                            {{ __('Delete') }}
                                                        </button>
                                                    </form>
                                                @endpermission
                                                @else
                                                    <a class="btn btn-warning btn-sm" href="{{ route('profile.edit') }}">{{ __('Edit') }}</a>
                                                @endif

                                        </div>
                                    </td>

                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @include('layouts.footers.auth')
    </div>
@endsection

@push('css')
    <link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css">
    <link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-select-bs4/css/select.bootstrap4.min.css">
@endpush

@push('js')
    <script src="{{ asset('argon') }}/vendor/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-buttons/js/buttons.flash.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-buttons/js/buttons.print.min.js"></script>
@endpush