@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <h2 class="ui header">Usuarios</h2>
        <table class="ui table">
            <thead>
            <tr>
                <th>Nombre</th>
                <th class="right aligned">
                    <button class="ui mini green icon button" id="create-user-button">
                        <i class="plus icon"></i>
                    </button>
                </th>
            </tr>
            </thead>
            <tbody>
            @foreach($users as $user)
                <tr>
                    <td>{{ $user->name }}</td>
                    <td class="right aligned">
                        <button class="ui mini blue icon button">
                            <i class="edit icon"></i>
                        </button>
                        <button class="ui mini red icon button">
                            <i class="trash icon"></i>
                        </button>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
    <div class="ui modal" id="create-user-modal">
        <i class="close icon"></i>
        <div class="header">
            Crear usuario
        </div>
        <div class="content">
            <form class="ui form">
                <div class="field">
                    <label>Nombre</label>
                    <input type="text" name="name" placeholder="Nombre">
                </div>
                <div class="field">
                    <label>Correo</label>
                    <input type="email" name="email" placeholder="Correo">
                </div>
                <div class="field">
                    <label>Contraseña</label>
                    <input type="password" name="password" placeholder="Contraseña">
                </div>
            </form>
        </div>
        <div class="actions">
            <div class="ui black deny button">
                Cancelar
            </div>
            <div class="ui positive right labeled icon button">
                Crear
                <i class="checkmark icon"></i>
            </div>
        </div>
    </div>
@endsection

@include('layout.body.scripts.cryptojs')

@push('page_scripts')
    <script>
        function encryptPassword(password) {
            const passphrase = Math.floor(Math.random() * Date.now()).toString()
            const encrypted = CryptoJS.AES.encrypt(password, passphrase)
            return [passphrase, encrypted.toString()].join('')
        }
        $(document).ready(function () {
            $('#create-user-modal').modal({
                onApprove: function() {
                    const url = '{{$urls->api}}/admin/users/add'
                    const method = 'post'
                    const body = new FormData(document.querySelector('#create-user-modal form'))
                    body.set('password', encryptPassword(body.get('password')))
                    fetchAPI(url, {method, body}).then(response => {
                        if (!response) {
                            return;
                        }
                        response.json().then(result => {
                            if (result.success) {
                                location.reload()
                            }
                        })
                    })
                }
            })
            $('#create-user-button').on('click', function () {
                $('#create-user-modal').modal('show')
            })
        });
    </script>
@endpush