@extends('layouts.app')

@section('title', 'Usuarios - SICA')
@section('page-icon')
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"/><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/><path d="M21 21v-2a4 4 0 0 0 -3 -3.85"/></svg>
@endsection
@section('page-title', 'Usuarios')

@section('page-actions')
<button class="btn btn-primary" id="btn-create">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M12 5l0 14"/><path d="M5 12l14 0"/></svg>
    Nuevo Usuario
</button>
@endsection

@section('content')
<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-vcenter card-table" id="users-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Nombre</th>
                    <th>Correo</th>
                    <th>Rol</th>
                    <th>Creado</th>
                    <th class="w-1">Acciones</th>
                </tr>
            </thead>
            </table>
        </div>
    </div>
</div>

{{-- Modal crear/editar usuario --}}
<div class="modal modal-blur fade" id="modal-user" tabindex="-1">
    <div class="modal-dialog modal-fullscreen-sm-down">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-user-title">Nuevo Usuario</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="form-user">
                <input type="hidden" name="_method" id="form-method" value="POST">
                <input type="hidden" id="form-user-id" value="">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nombre</label>
                        <input type="text" name="name" id="input-name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Correo electronico</label>
                        <input type="email" name="email" id="input-email" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Contrasena</label>
                        <input type="password" name="password" id="input-password" class="form-control">
                        <small class="form-hint" id="password-hint" style="display:none;">Dejar vacio para mantener la actual</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Rol</label>
                        <select name="role_id" id="input-role" class="form-select" required>
                            <option value="">Seleccionar rol...</option>
                            @foreach($roles as $role)
                                <option value="{{ $role->id }}">{{ $role->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn me-auto" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success" id="btn-save">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10"/></svg>
                        Guardar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    var usersDataUrl = "{{ route('users.data') }}";
    var usersStoreUrl = "{{ route('users.store') }}";
    var usersBaseUrl = "{{ url('users') }}";
</script>
<script src="{{ asset('js/users/index.js') }}?v={{ filemtime(public_path('js/users/index.js')) }}"></script>
@endpush