@extends('layouts.app')

@section('title', 'Manage Users')

@push('styles')
<link href="{{ asset('css/crudTableStyler.css') }}" rel="stylesheet" type="text/css">
@endpush

@section('content')
    <div class="container-fluid py-3">
        <h1 class="fs-2">Super Admin | <strong>Manage Banned Users</strong></h1>

        <div class="d-flex flex-row justify-content-between px-4 pb-2 pt-3">

            <div class="d-flex flex-row form-group w-50">
                <input type="text" class="form-control" placeholder="Search user...">
                </input>
                <div class="py-2 px-3 bg-transparent"><i class="bi bi-search"></i></div>
            </div>

            {{-- <button id="buttonTriggerNewUserModal" class="rounded-3 btn btn-primary btn-sm float-right align-middle"  data-placement="left" data-bs-toggle="modal" data-bs-target="#createUserModal">
                <i class='bx bx-plus-circle'></i>
                {{ __('Create New') }}
            </button> --}}

        </div>


        <div class="table-responsive mh-60-vh overflow-y-scroll">
            <table class="table bg-transparent table-hover">
                <thead class="thead sticky-top">
                    <tr>

                        <th class="column-Name fw-normal text-secondary">NAME</th>
                        <th class="column-Gender fw-normal text-secondary">GENDER</th>
                        <th class="column-Email fw-normal text-secondary">EMAIL</th>
                        <th class="column-Role fw-normal text-secondary">ROLE</th>
                        <th class="column-ClientName fw-normal text-secondary">CLIENT NAME</th>
                        {{-- <th class="text-">Client</th> --}}

                        <th class="w-25 text-center fw-normal text-secondary">ACTIONS</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($users as $user)
                        <tr class="align-middle">

                            <td class="column-Name firstColumn">{{ $user->name }}</td>
                            <td class="column-Gender">
                                @if($user->gender)
                                {{ $user->gender }}
                                @else
                                <span class="fst-italic text-secondary">(not specified)</span>
                                @endif
                            </td>
                            <td class="column-Email">{{ $user->email }}</td>
                            <td class="column-Role fw-bold">@if($user->is_admin === 1)
                                <span class="text-danger">Admin</span>
                                @else
                                <span class="text-primary">Client</span>
                                @endif
                            </td>
                            <td class="column-ClientName">@if($user->is_client === 1)
                                    @if(!empty($user->client_name))
                                    <em class="fw-semibold">{{ $user->client_name }}</em>
                                    @else
                                    <em class="text-secondary">(not specified)</em>
                                    @endif
                                @else
                                    <span class="text-danger">n/a</span>
                                @endif
                            </td>

                            <td class="d-flex justify-content-end column-Actions lastColumn">
                                <button class="btn btn-xs bg-transparent fw-bold" data-bs-toggle="modal" data-bs-target="#showUserModal-{{ $user->id }}">
                                    <a class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">
                                        <i class="bi-eye-fill"></i> {{ __('Show') }}
                                    </a>
                                </button>
                                <button class="btn btn-xs bg-transparent fw-bold" data-bs-toggle="modal" data-bs-target="#toggleBanUserModal-{{ $user->id }}">
                                    <a class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">
                                        <i class="bi-person-fill-slash"></i> {{ __('Unban') }}
                                    </a>
                                </button>
                                <button class="btn btn-xs bg-transparent fw-bold" data-bs-toggle="modal" data-bs-target="#deleteUserModal-{{ $user->id }}">
                                    <a class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">
                                        <i class="bi-trash-fill"></i> {{ __('Delete') }}
                                    </a>
                                </button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {!! $users->links() !!}

    </div>

    @if($message = Session::get('success') || $message = Session::get('warning') || $errors->any())
    <div class="d-flex flex-row w-100 justify-content-center">
        @if ($message = Session::get('success'))
            <div class="alert alert-success d-flex flex-column justify-content-center align-items-center">
                <p class="p-0 m-0">{{ $message }}</p>
            </div>
        @endif

        @if($errors->any())
        {{-- @php
            dd($errors->all());
        @endphp --}}
        <div class="alert alert-danger d-flex flex-column justify-content-center align-items-center">
            @foreach($errors->all() as $error)
            <p class="text-center m-0 p-0"><strong class="fst-italic">Could not update user:</strong> {{ $error }}</p>
            @endforeach
        </div>
        @endif
    </div>
    @endif

    @foreach($users as $user)
        @include('superadmin.user.modal-show', ['user' => $user])
        @include('superadmin.user.modal-toggle-ban', ['user' => $user])
        @include('superadmin.user.modal-delete', ['user' => $user])
    @endforeach

    {{-- <style src="{{ asset('css/crudTableStyler.css') }}"></style> --}}
    <style>
        .column-Name,
        .column-Email,
        .column-ClientName,
        .column-Gender,
        .column-Role,
        .column-Actions
            { height: 100%; }
        .column-Name,
        .column-Email,
        .column-ClientName
            { width: 18%; }
        .column-Gender
            { width: 10%; }
        .column-Role {
            width: 10%;
            text-align: center;
        }
        .column-Actions {
            /* width: 25%; */
        }
    </style>

    <script src="{{ asset('js/modalCrudForms.js') }}"></script>
    <script>
    'use strict';

    // CRUD BANNED USERS

        let toggleBanButtons = document.querySelectorAll('.toggleBanUserButton');
        let toggleBanForms = document.querySelectorAll('.toggleBanUserForm');

        let deleteButtons = document.querySelectorAll('.deleteUserButton');
        let deleteForms = document.querySelectorAll('.deleteUserForm');

        setModalFormEventListeners(toggleBanButtons, toggleBanForms, "data-user-id");
        setModalFormEventListeners(deleteButtons, deleteForms, "data-user-id");
    </script>
@endsection