@extends('layouts.app_layout')

@section('title')
    All Users
@endsection

@section('content')
    @if (session('message'))
        <h6 class="alert alert-success">
            {{ session('message') }}
        </h6>

        {{-- <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
            <div class="toast" style="position: absolute; top: 0; right: 0;">
              <div class="toast-header">
                <img src="..." class="rounded mr-2" alt="...">
                <strong class="mr-auto">Bootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="toast-body">
                Hello, world! This is a toast message.
              </div>
            </div>
          </div> --}}
        
        @endif
    <div class="px-3">

        <div class="row align-items-center">
            <div class="col-sm-6">
                <h5 class="page-title-text d-inline-block">Users</h5>
                <div class="breadcrumbs d-inline-block">
                    <ul>
                        <li><a class="text-decoration-none" href="{{ route('dashboardIndex') }}">{{__('common.home')}}</a></li>
                        <li>Users</li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-6 text-right">
                <div class=" text-end mb-3">
                    <a href="{{ route('createUser') }}" class="btn btn-outline-primary btn-sm me-2">
                        <i class="fa-solid fa-plus me-2"></i> New User
                    </a>
                </div>
            </div>
        </div>

        <div class="bg-white rounded shadow p-4">

            <div class="  table-responsive">
                <table id="exampleTable" class="table table-striped cell-border" style="width:100%">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Image</th>
                            <th scope="col">User</th>
                            <th scope="col">Nationality</th>
                            <th scope="col">Gender</th>
                            <th scope="col">Allow Login</th>
                            <th scope="col">Is Active</th>
                            <th scope="col">Business Location</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($users as $user)
                            <tr>
                                <td>
                                    <p class="m-0 px-3">1</p>
                                </td>
                                <td scope="row">
                                    @if ($user->image !== null)
                                        <img class="image-fload" width="100px" height="100px"
                                            src='{{ asset("uploads/$user->image") }}' alt="{{ $user->full_name }}">
                                    @else
                                        No User Image
                                    @endif
                                </td>
                                <td>
                                    <a class="text-decoration-none" href="{{ route('viewUser', $user->id) }}">
                                        <p class="text-custome m-0 px-3">{{ $user->user_name }}</p>
                                    </a>
                                    <p class="m-0 px-3">{{ $user->email }}</p>
                                    <p class="m-0 px-3">{{ $user->phone }}</p>
                                </td>
                                <td>
                                    <p class="m-0 px-3">{{ $user->nationality }}</p>
                                </td>
                                <td>
                                    <p class="m-0 px-3">{{ $user->gender }}</p>
                                </td>
                                <td>
                                    @if ($user->allow_login == 1)
                                        <p class="m-0 px-3 text-success">Allowable</p>
                                    @else
                                        <p class="m-0 px-3 text-danger">NotAllowable</p>
                                    @endif
                                </td>
                                <td>
                                    @if ($user->is_active == 1)
                                        <p class="m-0 px-3 text-success">Active</p>
                                    @else
                                        <p class="m-0 px-3 text-danger">InActive</p>
                                    @endif
                                </td>
                                <td>
                                    <a class="text-decoration-none"
                                        href="{{ route('viewBusinessLocation', $user->business_id) }}">
                                        <p class="m-0 px-3">{{ $user->business_location->business_name }}</p>
                                    </a>
                                </td>
                                <td>
                                    <div class="btn-group">

                                        <i data-bs-toggle="dropdown" aria-expanded="false"
                                            class="fa-solid fa-ellipsis  dropdown-toggle mx-3 opacity-75"></i>

                                        <ul class="dropdown-menu px-2 py-3 shadow bg-white bg-gradient border-0">
                                            <li>
                                                <a class="dropdown-item opacity-75 "
                                                    href="{{ route('viewUser', $user->id) }}">
                                                    <i class="fa-solid fa-eye me-2 text-custome"></i>
                                                    View
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item opacity-75 "
                                                    href="{{ route('editUser', $user->id) }}">
                                                    <i class="fa-solid fa-pen-to-square me-2 text-warning"></i>
                                                    Edit
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item opacity-75 "
                                                    href="{{ route('deleteUser', $user->id) }}">
                                                    <i class="fa-solid fa-trash-can me-2 text-danger"></i>
                                                    Delete
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        @endforeach

                    </tbody>
                </table>
                {{-- <div class="d-flex">
                    {!! $users->links() !!}
                </div> --}}
            </div>
        </div>

    </div>

    {{-- {{ $users->links() }} --}}
@endsection