@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 p-4">
        <h1 class="fs-2">Super Admin | <strong>Manage 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-25">
                <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">ACTION</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">@if($user->is_admin === 1)
                                <button data-bs-toggle="modal" data-bs-target="#toggleRoleUserModal-{{ $user->id }}" class="align-middle btn btn-xs btn-danger fw-bold">
                                    <i class="bi bi-person-fill-gear"></i> Admin
                                </button>
                                @else
                                <button data-bs-toggle="modal" data-bs-target="#toggleRoleUserModal-{{ $user->id }}" class="align-middle btn btn-xs btn-warning fw-bold">
                                    <i class="bi bi-person-fill"></i> Client
                                </button>
                                @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="#editUserModal-{{ $user->id }}">
                                    <a class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">
                                        <i class="bi-pencil-square"></i> {{ __('Edit') }}
                                    </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> {{ __('Ban') }}
                                    </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

    @include('superadmin.user.modal-create')
    @foreach($users as $user)
        @include('superadmin.user.modal-show', ['user' => $user])
        @include('superadmin.user.modal-edit', ['user' => $user])
        @include('superadmin.user.modal-toggle-role', ['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';

    // CLIENTS

        let is_client_checkboxes = document.querySelectorAll('.userForm-is_client');
        let client_name_fields = document.querySelectorAll('.userForm-client_name');

        Array.prototype.forEach.call(is_client_checkboxes, (checkbox) => {
            let i = 0;
            let client_name_field = undefined;
            while(i < client_name_fields.length && client_name_field === undefined)
            {
                if(checkbox.getAttribute('data-user-id') !== client_name_fields[i].getAttribute('data-user-id'))
                    i++;
                else
                    client_name_field = client_name_fields[i];
            }
            checkbox.addEventListener('change', () => {
                if(checkbox.checked)
                    client_name_field.removeAttribute('disabled');
                else
                    client_name_field.setAttribute('disabled', true);
            });
        });

    // CRUD USERS
        let createButton = document.querySelector('#createUserButton');
        let createForm = document.querySelector('#createUserForm');

        let toggleRoleButtons = document.querySelectorAll('.toggleRoleUserButton');
        let toggleRoleForms = document.querySelectorAll('.toggleRoleUserForm');

        let updateButtons = document.querySelectorAll('.updateUserButton');
        let updateForms = document.querySelectorAll('.updateUserForm');

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

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

        setModalFormEventListeners(toggleRoleButtons, toggleRoleForms, "data-user-id");
        setModalFormEventListeners(updateButtons, updateForms, "data-user-id");
        setModalFormEventListeners(toggleBanButtons, toggleBanForms, "data-user-id");
        setModalFormEventListeners(deleteButtons, deleteForms, "data-user-id");
        setSingleModalFormEventListener(createButton, createForm);
    </script>
@endsection